Cách đặt hai tiêu đề trên cùng một dòng trong html

Question

Các phần tử HTML từ

đến

đại diện cho sáu cấp độ của tiêu đề phần.

là cấp phần cao nhất và

là thấp nhất

Nội dung chính Show

Thể loại nội dung, nội dung tiêu đề, nội dung có thể sờ thấy. nội dung được phép. Bỏ sót thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm định Vai trò ARIA được phéptab,

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

0 hoặc

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

1Giao diện DOM

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

2

Các phần tử này chỉ bao gồm các thuộc tính toàn cục

Thông tin tiêu đề có thể được sử dụng bởi các tác nhân người dùng để tự động xây dựng mục lục cho tài liệu

Không sử dụng các thành phần tiêu đề để thay đổi kích thước văn bản. Thay vào đó, hãy sử dụng thuộc tính CSS

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

3

Đừng bỏ qua các cấp tiêu đề. luôn bắt đầu từ

, tiếp theo là

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

5, v.v.

Mặc dù tiêu chuẩn HTML cho phép sử dụng nhiều phần tử

trên một trang (miễn là chúng không phải là ), đây không được coi là phương pháp hay nhất. Một trang nói chung nên có một phần tử

duy nhất mô tả nội dung của trang (tương tự như của tài liệu

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

9)

Ghi chú. Các phiên bản cũ hơn của tiêu chuẩn HTML cho phép lồng nhiều phần tử

vào lồng nhau. Tuy nhiên, điều này chưa bao giờ được coi là một phương pháp hay nhất và hiện không phù hợp. Đọc thêm trong Thuật toán không có phác thảo tài liệu
Chỉ thích sử dụng một

trên mỗi trang và không bỏ qua các cấp độ

Đoạn mã sau hiển thị tất cả các cấp tiêu đề, đang được sử dụng

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>
<h4>Heading level 4h4>
<h5>Heading level 5h5>
<h6>Heading level 6h6>

Đây là kết quả của mã này

Đoạn mã sau hiển thị một vài tiêu đề với một số nội dung bên dưới chúng

<h1>Heading elementsh1>
<h2>Summaryh2>
<p>Some text here…p>

<h2>Examplesh2>
<h3>Example 1h3>
<p>Some text here…p>

<h3>Example 2h3>
<p>Some text here…p>

<h2>See alsoh2>
<p>Some text here…p>

Đây là kết quả của mã này

Một kỹ thuật điều hướng phổ biến cho người dùng phần mềm đọc màn hình là nhảy từ tiêu đề để nhanh chóng xác định nội dung của trang. Do đó, điều quan trọng là không bỏ qua một hoặc nhiều cấp độ tiêu đề. Làm như vậy có thể tạo ra sự nhầm lẫn, vì người điều hướng theo cách này có thể không biết tiêu đề bị thiếu ở đâu

Đừng

________số 8_______

Làm

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>

làm tổ

Các tiêu đề có thể được lồng vào nhau dưới dạng các tiểu mục để phản ánh việc tổ chức nội dung của trang. Hầu hết các trình đọc màn hình cũng có thể tạo danh sách theo thứ tự của tất cả các tiêu đề trên một trang, điều này có thể giúp một người nhanh chóng xác định thứ bậc của nội dung

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

2 Bọ cánh cứng

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

3 Từ nguyên học

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

3 Phân bố và Đa dạng

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

3 Sự tiến hóa

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Hậu Cổ Sinh

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Kỷ Jura

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Kỷ Phấn trắng

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Kainozoi

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

3 Hình thái bên ngoài

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Đầu

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>

2 Miệng

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Ngực

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>

2 Prongorax

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>

2 Pterothorax

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Chân

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Cánh

<h1>Heading level 1h1>
<h3>Heading level 3h3>
<h4>Heading level 4h4>

6 Bụng

Khi các tiêu đề được lồng vào nhau, các cấp độ tiêu đề có thể bị "bỏ qua" khi đóng một tiểu mục

Tiêu đề • Cấu trúc trang • Hướng dẫn truy cập web WAI
Hiểu Tiêu chí Thành công 1. 3. 1. W3C Hiểu WCAG 2. 0
Hiểu Tiêu chí Thành công 2. 4. 1. W3C Hiểu WCAG 2. 0
Hiểu Tiêu chí Thành công 2. 4. 6. W3C Hiểu WCAG 2. 0
Hiểu Tiêu chí Thành công 2. 4. 10. W3C Hiểu WCAG 2. 0

Một kỹ thuật điều hướng phổ biến khác dành cho người dùng phần mềm đọc màn hình là tạo danh sách và sử dụng danh sách đó để xác định bố cục của trang.

Nội dung của phần có thể được gắn nhãn bằng cách sử dụng kết hợp

<h1>Heading level 1h1>
<h2>Heading level 2h2>
<h3>Heading level 3h3>

9 và các thuộc tính, với nhãn mô tả chính xác mục đích của phần. Kỹ thuật này hữu ích cho các trường hợp có nhiều thành phần phân đoạn trên cùng một trang

Thí dụ

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigationh2>
    
  nav>
header>



<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigationh2>
    
  nav>
footer>

Trong ví dụ này, công nghệ đọc màn hình sẽ thông báo rằng có hai phần

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigationh2>
    
  nav>
header>



<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigationh2>
    
  nav>
footer>

1, một phần có tên là "Điều hướng chính" và một phần có tên là "Điều hướng chân trang". Nếu nhãn không được cung cấp, người sử dụng phần mềm đọc màn hình có thể phải điều tra nội dung của từng thành phần

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigationh2>
    
  nav>
header>



<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigationh2>
    
  nav>
footer>

2 để xác định mục đích của chúng

programming html

Cách đặt hai tiêu đề trên cùng một dòng trong html

, tiếp theo là <h1>Heading elementsh1> <h2>Summaryh2> <p>Some text here…p> <h2>Examplesh2> <h3>Example 1h3> <p>Some text here…p> <h3>Example 2h3> <p>Some text here…p> <h2>See alsoh2> <p>Some text here…p> 5, v.v.

vào lồng nhau. Tuy nhiên, điều này chưa bao giờ được coi là một phương pháp hay nhất và hiện không phù hợp. Đọc thêm trong Thuật toán không có phác thảo tài liệuChỉ thích sử dụng một

trên mỗi trang và không bỏ qua các cấp độ

Đừng

Làm

làm tổ

Thí dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

, tiếp theo là
`<h1>Heading elementsh1> <h2>Summaryh2> <p>Some text here…p> <h2>Examplesh2> <h3>Example 1h3> <p>Some text here…p> <h3>Example 2h3> <p>Some text here…p> <h2>See alsoh2> <p>Some text here…p>`
5, v.v.

vào lồng nhau. Tuy nhiên, điều này chưa bao giờ được coi là một phương pháp hay nhất và hiện không phù hợp. Đọc thêm trong Thuật toán không có phác thảo tài liệu
Chỉ thích sử dụng một