Tiêu đề và phần

Trong phần trước, bạn đã tìm hiểu cách thức, 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 dàn ý 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 lại các phần tử phân đoạn trong phần trước; và đánh dấu dàn ý cho ứng dụng của bạn.

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

Giờ đây, bạn đã hiểu ngữ nghĩa của mã đá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 thường sẽ 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 một tiêu đề trang web. Bắt đầu bằng mã đánh dấu không ngữ nghĩa và tìm cách đưa ra giải pháp phù hợp để bạn có thể tìm hiểu lợi ích của các phần tử tiêu đề và phần HTML trong quá trình thực hiện.

Nếu bạn không chú ý đến ngữ nghĩa của tiêu đề, 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ể làm cho (gần như) mọi mã đánh dấu trông đúng. Tuy nhiên, việc sử dụng <div> không có ngữ nghĩa cho mọi thứ thực sự tạo ra thêm việc. Để nhắm đến nhiều <div> bằng CSS, bạn sẽ 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 thẻ đóng </div> để cho biết thẻ mở nào đã được đóng bằng thẻ </div>.

Mặc dù các thuộc tính id và class cung cấp các điểm nối cho 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ô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) phù hợp 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 -->

Điều này ít nhất 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> nào đóng mỗi </div>.

Nếu biết HTML, bạn chỉ cần 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 chú thích 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 hai 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à một mốc. Thẻ này có ngữ nghĩa khác nhau tuỳ thuộc vào vị trí lồng ghép. Khi <header> ở cấp cao nhất, thì đó là banner của trang web, một vai trò mốc mà bạn có thể đã lưu ý trong khối mã role. Khi một <header> được lồng trong <main>, <article> hoặc <section>, thì nó chỉ xác định đó là tiêu đề cho phần đó và không phải là một mốc.

Phần tử <nav> xác định nội dung là thành phần điều hướng. Vì <nav> này được lồng trong tiêu đề trang web, nên đây là thành phần điều hướng chính cho trang web. Nếu được lồng trong <article> hoặc <section>, thì thành phần này sẽ chỉ là thành 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 đã xây dựng một mô hình đối tượng hỗ trợ tiếp cận (AOM) có ý nghĩa. 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 qua hoặc bỏ qua.

Việc sử dụng thẻ đóng </nav> và </header> giúp loại bỏ nhu cầu nhận xét để xác định phần tử nào 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 sẽ giúp bạn không cần dùng các hook id và class. Bộ chọn CSS có thể có tính cụ thể thấp; 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 đề có rất í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 vậy.

Trang web <footer>

Lập trình chân trang của 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à mốc hay không phụ thuộc vào vị trí lồng chân trang. Khi là chân trang của trang web, đây là một mốc và phải chứa thông tin chân trang của 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 quyền riêng tư và cookie 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à 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ó hai chân trang: một chân trang trong <article> và một chân trang cấp cao nhất. Chân trang cấp cao nhất là một mốc có vai trò ngầm định là contentinfo. Chân trang còn lại không phải là mốc. Chrome hiển thị dưới dạng FooterAsNonLandmark; Firefox hiển thị dưới dạng 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 có vai trò contentinfo ngầm định. Mỗi bài đăng trên blog cũng có thể có một <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 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 bài đăng mà chúng được lồng vào.

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

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 để chứa thông tin liên hệ của các cá nhân hoặc tổ chức, chứ không phải địa chỉ gửi thư thực tế.

<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à phần tử mốc (hoặc "phân mục"). Có một số phần tử phân đoạn thường gặp hơn.

Bố cục có tiêu đề, hai 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. Tại đâ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ử mốc <main> duy nhất. Phần tử <main> xác định nội dung chính của tài liệu. Mỗi trang chỉ được có một <main>.

<aside>

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

<article>

Lồng trong <main>, chúng ta đã thêm hai 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ực tế là một phần nội dung. Tuy nhiên, nếu bạn đang viết blog, như trong ví dụ thứ hai, thì mỗi bài đăng phải nằm trong một <article> lồng trong <main>.

<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ể sử dụng lại một cách độc lập. Hãy coi bài viết như một bài báo. Trên báo in, một tin bài về Jacinda Ardern, Thủ tướng New Zealand, có thể chỉ xuất hiện trong một mục, có thể là tin tức thế giới. Trên trang web của tờ báo, cùng một tin bài đó có thể xuất hiện trên trang chủ, trong mục chính trị, trong mục tin tức về Châu Đại Dương hoặc Châu Á – Thái Bình Dương và có thể là trong mục thể thao, lối sống hoặc công nghệ, tuỳ thuộc vào chủ đề của tin bài. 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 một 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 đề, trừ một số 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, theo sau là một <main> duy nhất, được chia thành nhiều <section>, 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>. Trong mỗi <article>, bạn cũng có thể 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à mục" là <article>. Sau đó, <article> này đượ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ó một tiêu đề, cũng như mỗi phần.

<section> không phải là một 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, thì vai trò ngầm định là region. Bạn nên sử dụng vai trò mốc 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ò mốc có thể tạo ra "nhiễu" trong trình đọc màn hình, khiến bạn khó hiểu bố cục tổng thể của trang. Nếu <main> của bạn chứa hai hoặc ba tiểu mục quan trọng, thì việc thê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 đề mục: <h1>, <h2>, <h3>, <h4>, <h5> và <h6>. Mỗi thẻ đại diện cho một trong sáu cấp của tiêu đề mục, trong đó <h1> là cấp mục cao nhất hoặc quan trọng nhất và <h6> là cấp thấp nhất.

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

Bạn nên sử dụng các cấp tiêu đề tương tự như 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, <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 đề mục 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, các tiêu đề được cho là để phác thảo một tài liệu, giống như MS Word hoặc Google Tài liệu có thể tạo một dàn ý dựa trên các tiêu đề, nhưng các trình duyệt chưa bao giờ triển khai cấu trúc này và thuật toán dàn ý được đề xuất đã bị xoá khỏi thông số kỹ thuật HTML. Mặc dù trước đây, các trình duyệt hiển thị các phần tử <h1> lồng trong các phần tử phân đoạn ở cỡ chữ nhỏ hơn, nhưng các trình duyệt hiện đại đã loại bỏ các kiểu mặc định đó và không hỗ trợ việc tự động tạo dàn ý cho tài liệu.

Giờ đây, bạn đã có đủ kiến thức để phác thảo MachineLearningWorkshop.com:

Phác thảo <body> của MLW.com

Đây là dàn ý cho nội dung hiển thị của trang web hội thảo về công nghệ học máy:

Vì không có nội dung nào là nội dung hoàn chỉnh, độc lập, 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 với <footer>.

Đến đây thì có lẽ bạn đã hiểu rõ, nhưng xin nhắc lại là đừng dùng tiêu đề để in đậm hoặc phóng to văn bản; hãy 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 việc đó. 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 khái niệm 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.