Tiêu đề và phần

Trong phần trước, bạn đã tìm hiểu cách, ngay cả khi bạn không biết ý nghĩa của các từ trên một trang, khi các phần tử ngữ nghĩa cung cấp cho tài liệu cấu trúc có ý nghĩa, những người khác (công cụ tìm kiếm, công nghệ hỗ trợ, người bảo trì trong tương lai, thành viên mới trong nhóm) sẽ hiểu được bố cục của tài liệu.

Trong phần này, bạn sẽ khám phá cấu trúc tài liệu; bạn sẽ tóm tắt các phần tử phân đoạn trong phần trước; và đánh dấu bố cục cho ứng dụng của mình.

Việc chọn đúng phần tử cho công việc khi bạn viết mã có nghĩa là bạn sẽ không phải tái cấu trúc hoặc nhận xét mã HTML. Nếu bạn nghĩ đến việc sử dụng đúng phần tử cho công việc, thì bạn sẽ thường chọn đúng phần tử cho công việc. Nếu không, có thể bạn sẽ không chọn được.

Giờ đây, bạn đã hiểu ngữ nghĩa của đánh dấu và biết lý do tại sao việc chọn đúng phần tử lại quan trọng. Sau khi tìm hiểu về tất cả các phần tử, bạn sẽ thường chọn đúng phần tử mà không cần nỗ lực thêm nhiều.

Trang web <header>

Trước tiên, bạn nên tạo tiêu đề trang web. Hãy bắt đầu bằng đánh dấu không ngữ nghĩa và tìm ra giải pháp tốt để bạn có thể tìm hiểu những lợi ích của các phần tử tiêu đề và phần HTML trong quá trình này.

Nếu bạn không nghĩ nhiều đến ngữ nghĩa cho tiêu đề của chúng tôi, bạn có thể sử dụng mã như sau:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS có thể giúp (hầu hết) mọi đánh dấu đều trông đúng. Nhưng việc sử dụng không ngữ nghĩa <div> cho mọi thứ thực sự tạo thêm công việc. Để nhắm mục tiêu nhiều <div> bằng CSS, bạn phải sử dụng mã nhận dạng hoặc lớp để xác định nội dung. Mã này cũng bao gồm một nhận xét cho mỗi </div> đóng để cho biết thẻ mở mà mỗi </div> đóng.

Mặc dù các thuộc tính id và class cung cấp các hook để tạo kiểu và JavaScript, nhưng chúng không thêm giá trị ngữ nghĩa cho trình đọc màn hình và (phần lớn) các công cụ tìm kiếm.

Bạn có thể thêm các thuộc tính role để cung cấp ngữ nghĩa nhằm tạo mô hình đối tượng hỗ trợ tiếp cận (AOM) tốt cho trình đọc màn hình:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Ít nhất thì điều này cũng cung cấp ngữ nghĩa và cho phép sử dụng bộ chọn thuộc tính trong CSS, nhưng vẫn thêm nhận xét để xác định <div> mà mỗi </div> đóng.

Nếu bạn biết HTML, tất cả những gì bạn phải làm là nghĩ về mục đích của nội dung. Sau đó, bạn có thể viết mã này theo ngữ nghĩa mà không cần sử dụng role và không cần nhận xét các thẻ đóng:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Mã này sử dụng 2 điểm mốc ngữ nghĩa: <header> và <nav>.

Đây là tiêu đề chính. Phần tử <header> không phải lúc nào cũng là điểm mốc. Phần tử này có ngữ nghĩa khác nhau tuỳ thuộc vào vị trí lồng nhau. Khi <header> là cấp cao nhất, đó là banner của trang web, một vai trò điểm mốc mà bạn có thể đã lưu ý trong khối mã role. Khi <header> được lồng trong <main>, <article> hoặc <section>, phần tử này chỉ xác định đó là tiêu đề cho phần đó và không phải là điểm mốc.

Phần tử <nav> xác định nội dung là điều hướng. Vì <nav> này được lồng trong tiêu đề trang web, nên đây là phần điều hướng chính cho trang web. Nếu được lồng trong <article> hoặc <section>, thì đó sẽ chỉ là phần điều hướng nội bộ cho phần đó. Bằng cách sử dụng các phần tử ngữ nghĩa, bạn đã tạo một mô hình đối tượng hỗ trợ tiếp cận có ý nghĩa accessibility object model, hay còn gọi là AOM. AOM cho phép trình đọc màn hình thông báo cho người dùng rằng phần này bao gồm một khối điều hướng chính mà họ có thể điều hướng hoặc bỏ qua.

Việc sử dụng thẻ đóng </nav> và </header> giúp bạn không cần nhận xét để xác định phần tử mà mỗi thẻ kết thúc đóng. Ngoài ra, việc sử dụng các thẻ khác nhau cho các phần tử khác nhau giúp bạn không cần các hook id và class. Bộ chọn CSS có thể có độ đặc hiệu thấp đặc hiệu; có thể bạn có thể nhắm mục tiêu các đường liên kết bằng header nav a mà không cần lo lắng về xung đột.

Bạn đã viết một tiêu đề chỉ với một chút HTML và không có lớp hoặc mã nhận dạng. Khi sử dụng HTML ngữ nghĩa, bạn không cần phải làm như vậy.

Trang web <footer>

Viết mã chân trang web.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Tương tự như <header>, việc chân trang có phải là điểm mốc hay không phụ thuộc vào vị trí lồng nhau của chân trang. Khi là chân trang web, đó là điểm mốc và phải chứa thông tin chân trang web mà bạn muốn có trên mọi trang, chẳng hạn như tuyên bố bản quyền, thông tin liên hệ và đường liên kết đến chính sách cookie và quyền riêng tư của bạn. role ngầm định cho chân trang web là contentinfo. Nếu không, chân trang sẽ không có vai trò ngầm định và không phải là điểm mốc, như trong ảnh chụp màn hình sau đây của AOM trong Chrome (có <article> với <header> và <footer> giữa <header> và <footer>).

Trong ảnh chụp màn hình này, có 2 chân trang: một trong <article> và một ở cấp cao nhất. Chân trang ở cấp cao nhất là điểm mốc có vai trò ngầm định là contentinfo. Chân trang còn lại không phải là điểm mốc. Chrome hiển thị chân trang này là FooterAsNonLandmark; Firefox hiển thị chân trang này là section.

Điều đó không có nghĩa là bạn không nên sử dụng <footer>. Ví dụ: nếu có một blog, bạn có thể có chân trang web với vai trò contentinfo ngầm định. Mỗi bài đăng trên blog cũng có thể có <footer>. Trên trang đích chính của blog, trình duyệt, công cụ tìm kiếm và trình đọc màn hình biết rằng chân trang chính là chân trang ở cấp cao nhất và tất cả các chân trang khác đều liên quan đến các bài đăng mà chúng được lồng trong.

Khi <footer> là phần tử con của <article>, <aside>, <main>, <nav> hoặc <section>, thì đó không phải là điểm mốc. Nếu bài đăng xuất hiện riêng, tuỳ thuộc vào đánh dấu, chân trang đó có thể được nâng cấp.

Chân trang thường là nơi bạn sẽ tìm thấy thông tin liên hệ, được gói trong <address>, phần tử địa chỉ liên hệ. Đây là một phần tử không được đặt tên rõ ràng; phần tử này được dùng để đính kèm thông tin liên hệ cho cá nhân hoặc tổ chức, không phải địa chỉ gửi thư thực.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Cấu trúc tài liệu

Mô-đun này bắt đầu bằng <header> và <footer>, vì đôi khi chúng chỉ là các phần tử điểm mốc (hoặc "phân đoạn"). Có một số phần tử phân đoạn thường xuyên hơn.

Bố cục có tiêu đề, 2 thanh bên và chân trang được gọi là bố cục chén thánh. Có nhiều cách để đánh dấu nội dung này, bao gồm:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Nếu đang tạo một blog, bạn có thể có một loạt bài viết trong <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Khi sử dụng các phần tử ngữ nghĩa, trình duyệt có thể tạo cây hỗ trợ tiếp cận có ý nghĩa. Điều này giúp cải thiện cách trình đọc màn hình điều hướng. Ở đây, banner và contentinfo được cung cấp thông qua <header> và <footer> của trang web. Các phần tử mới được thêm vào đây bao gồm <main>, <aside> và <article>; ngoài ra, <h1> và <nav> mà bạn đã sử dụng trước đó và <section> mà bạn chưa sử dụng.

<main>

Có một phần tử điểm mốc <main> duy nhất. Phần tử <main> xác định nội dung chính của tài liệu. Chỉ nên có một <main> trên mỗi trang.

<aside>

<aside> dành cho nội dung liên quan gián tiếp hoặc tiếp tuyến đến nội dung chính của tài liệu. Ví dụ: tài liệu này là về HTML. Đối với một phần về độ đặc hiệu của bộ chọn CSS cho 3 ví dụ về tiêu đề trang web (div, vai trò và ngữ nghĩa), phần phụ liên quan tiếp tuyến có thể nằm trong <aside>; và giống như hầu hết các phần, <aside> có thể sẽ được trình bày trong thanh bên hoặc hộp chú thích. <aside> cũng là một điểm mốc, có vai trò ngầm định là complementary.

<article>

Được lồng trong <main>, chúng tôi đã thêm 2 phần tử <article>. Điều này không cần thiết trong ví dụ đầu tiên khi nội dung chính chỉ là một từ hoặc trong thế giới thực, một phần nội dung duy nhất. Tuy nhiên, nếu bạn đang viết một blog, như trong ví dụ thứ hai, thì mỗi bài đăng phải nằm trong <article> được lồng trong <main>.

Một <article> đại diện cho một phần nội dung hoàn chỉnh hoặc độc lập, về nguyên tắc, có thể tái sử dụng độc lập. Hãy coi một bài viết như một bài viết trên báo. Trên bản in, một tin bài về Jacinda Ardern, Thủ tướng New Zealand, có thể chỉ xuất hiện trong một phần, có thể là tin tức thế giới. Trên trang web của tờ báo, tin bài đó có thể xuất hiện trên trang chủ, trong phần chính trị, trong phần tin tức về Châu Đại Dương hoặc Châu Á Thái Bình Dương và tuỳ thuộc vào chủ đề của tin tức, các phần thể thao, phong cách sống hoặc công nghệ. Bài viết cũng có thể xuất hiện trên các trang web khác, chẳng hạn như Pocket hoặc Yahoo News!

<section>

Phần tử <section> được dùng để bao gồm các phần độc lập chung của tài liệu khi không có phần tử ngữ nghĩa cụ thể hơn để sử dụng. Các phần phải có tiêu đề, với rất ít trường hợp ngoại lệ.

Quay lại ví dụ về Jacinda Ardern, trên trang chủ của tờ báo, biểu ngữ sẽ bao gồm tên của tờ báo, tiếp theo là một <main> duy nhất, được chia thành nhiều <section>s, mỗi phần có một tiêu đề, chẳng hạn như "Tin tức thế giới" và "Chính trị"; và trong mỗi phần, bạn sẽ tìm thấy một loạt <article>s. Trong mỗi <article>, bạn cũng có thể tìm thấy một hoặc nhiều phần tử <section>. Nếu bạn xem trang này, toàn bộ phần "tiêu đề và phần" là <article>. <article> này sau đó được chia thành nhiều <section>, bao gồm site header, site footer và cấu trúc tài liệu. Bản thân bài viết có tiêu đề, cũng như mỗi phần.

A <section> không phải là điểm mốc trừ phi có tên thành phần hỗ trợ tiếp cận; nếu có tên thành phần hỗ trợ tiếp cận, vai trò ngầm định là region. Vai trò điểm mốc nên được sử dụng một cách tiết kiệm để xác định các phần tổng thể lớn hơn của tài liệu. Việc sử dụng quá nhiều vai trò điểm mốc có thể tạo ra "tiếng ồn" trong trình đọc màn hình, khiến bạn khó hiểu được bố cục tổng thể của trang. Nếu <main> chứa 2 hoặc 3 phần phụ quan trọng, bao gồm tên thành phần hỗ trợ tiếp cận cho mỗi <section> có thể sẽ hữu ích.

Tiêu đề: <h1>-<h6>

Có 6 phần tử tiêu đề phần: <h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Mỗi phần tử đại diện cho một trong 6 cấp tiêu đề phần, trong đó <h1> là cấp phần cao nhất hoặc quan trọng nhất và <h6> là cấp thấp nhất.

Khi tiêu đề được lồng trong biểu ngữ tài liệu <header>, đó là tiêu đề cho ứng dụng hoặc trang web. Khi được lồng trong <main>, cho dù có được lồng trong <header> trong <main> hay không, đó là tiêu đề cho trang đó, không phải toàn bộ trang web. Khi được lồng trong <article> hoặc <section>, đó là tiêu đề cho phần phụ của trang đó.

Bạn nên sử dụng các cấp tiêu đề tương tự như các cấp tiêu đề trong trình chỉnh sửa văn bản: bắt đầu bằng <h1> làm tiêu đề chính, với <h2> làm tiêu đề cho các phần phụ và <h3> nếu các phần phụ đó có các phần; tránh bỏ qua các cấp tiêu đề. Có một bài viết hay về tiêu đề phần tại đây.

Một số người dùng trình đọc màn hình truy cập vào tiêu đề để hiểu nội dung của trang. Ban đầu, tiêu đề được dùng để vạch ra tài liệu, giống như MS Word hoặc Google Tài liệu có thể tạo bố cục dựa trên tiêu đề, nhưng trình duyệt chưa bao giờ triển khai cấu trúc này. Mặc dù trình duyệt hiển thị các tiêu đề lồng nhau ở kích thước phông chữ ngày càng nhỏ hơn như trong ví dụ sau, nhưng chúng không thực sự hỗ trợ bố cục.

Giờ đây, bạn đã có đủ kiến thức để vạch ra MachineLearningWorkshop.com:

Vạch ra <body> của MLW.com

Đây là bố cục cho nội dung hiển thị của trang web hội thảo về học máy:

Vì không có nội dung nào là nội dung độc lập và hoàn chỉnh, nên <section> phù hợp hơn <article>; mặc dù mỗi phần đều có tiêu đề, nhưng không có phần nào xứng đáng có <footer>.

Đến thời điểm này, bạn không cần phải nói, nhưng đừng sử dụng tiêu đề để làm cho văn bản đậm hoặc lớn; hãy sử dụng CSS. Nếu bạn muốn nhấn mạnh văn bản, thì cũng có các phần tử ngữ nghĩa để làm điều đó. Chúng ta sẽ đề cập đến vấn đề đó và điền hầu hết nội dung của trang khi thảo luận về các kiến thức cơ bản về văn bản; sau khi tìm hiểu sâu hơn về các thuộc tính.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về tiêu đề và phần.