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 trang) khi các phần tử ngữ nghĩa cung cấp tài liệu có cấu trúc có ý nghĩa, thì những phần tử khác (công cụ tìm kiếm, công nghệ hỗ trợ, người duy trì trong tương lai, thành viên mới trong nhóm) sẽ hiểu được đường viền của tài liệu.

Trong phần này, bạn sẽ tìm hiểu cấu trúc tài liệu; bạn sẽ tóm tắt các thành phần mục từ phần trước; và đánh dấu đường viền cho ứng dụng của bạn.

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

Giờ thì bạn đã nắm được ngữ nghĩ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 thường sẽ chọn được phần tử phù hợp mà không cần mất thêm công sức (nếu có).

Trang web <header>

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

Nếu chưa suy nghĩ nhiều về ngữ nghĩa cho 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ư) bất kỳ đánh dấu nào trông phù hợp. Nhưng việc sử dụng <div> không có ngữ nghĩa cho mọi thứ thực sự tạo thêm công 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 chú thích cho mỗi </div> đóng để cho biết mỗi </div> đóng là thẻ mở nào.

Mặc dù thuộc tính id và class cung cấp móc để định kiểu và JavaScript, nhưng các thuộc tính này không thêm giá trị ngữ nghĩa cho trình đọc màn hình và (đối với hầu hết) 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ột mô hình đối tượng hỗ trợ tiếp cận (AOM) hiệu quả 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 -->

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

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 cũng như không cần ghi chú về 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. Tệp 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, đó là trang web banner, một vai trò mốc mà bạn có thể đã chú ý trong khối mã role. Khi một <header> được lồng trong <main>, <article> hoặc <section>, thì nhãn này chỉ xác định là tiêu đề của phần đó chứ không phải là điểm 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 của trang web. Nếu thành phần này được lồng trong <article> hoặc <section>, thì lệnh điều hướng nội bộ chỉ dành cho phần đó. Bằng cách sử dụng các phần tử ngữ nghĩa, bạn đã tạo được 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à người dùng có thể điều hướng qua hoặc bỏ qua.

Khi sử dụng thẻ đóng </nav> và </header>, bạn không cần phải có nhận xét để xác định thành phần mà mỗi thẻ đóng đã đóng. Ngoài ra, việc sử dụng các thẻ riêng cho các phần tử khác nhau sẽ giúp bạn không cần phải 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 với header nav a mà không phải lo lắng về xung đột.

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

Trang web <footer>

Hãy lập trình phần 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ột mốc hay không phụ thuộc vào vị trí chân trang được lồng. Nếu là chân trang web thì đó là một mốc và phải chứa thông tin chân trang web mà bạn muốn trên mọi trang, chẳng hạn như tuyên bố về bản quyền, thông tin liên hệ và đường liên kết đến chính sách về quyền riêng tư và cookie của bạn. role ngầm ẩn cho chân trang trang web là contentinfo. Nếu không, chân trang không có vai trò ngầm ẩn và không phải là mốc, như minh hoạ 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 ở cấp độ <article> và một ở cấp cao nhất. Chân trang cấp cao nhất là một mốc có vai trò ngầm ẩn là contentinfo. Chân trang còn lại không phải là một mốc. Chrome hiển thị tệp là FooterAsNonLandmark; Firefox hiển thị tệp này là section.

Điều đó không có nghĩa là bạn không nên sử dụng <footer>. Giả sử bạn có một blog. Blog này có một chân trang web chứa vai trò contentinfo ngầm ẩn. 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 của bạn, 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 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 tự xuất hiện, tuỳ thuộc vào mã đánh dấu, 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 bao bọc trong <address>, thành phần địa chỉ liên hệ. Đây là một thành phần không được đặt tên rõ ràng; nó được sử 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ì các phần tử này đôi khi là điểm mốc, hay "phần" riêng biệt, là duy nhất. Hãy cùng xem xét phần "toàn thời gian" bằng cách thảo luận về những bố cục trang phổ biến nhất:

Bố cục có 1 tiêu đề, 2 thanh bên và 1 chân trang được gọi là bố cục gọn gàng linh hoạt. Có nhiều cách để đánh dấu nội dung này, trong đó có:

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

Nếu đang tạo 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, các trình duyệt có thể tạo cây hỗ trợ tiếp cận có ý nghĩa, giúp người dùng trình đọc màn hình dễ dàng di chuyển hơn. Ở đây, banner và contentinfo được cung cấp thông qua trang web <header> và <footer>. Các phần tử mới được thêm ở đâ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. Chỉ được có một <main> trên mỗi trang.

<aside>

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

<article>

Lồng trong <main>, chúng ta đã thêm 2 phần tử <article>. Điều này là 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, là 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 của chúng tôi, 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 nghĩ về một bài viết giống như một bài viết trên một tờ báo. Ở dạng bản in, một bài báo 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, tin bài đó có thể xuất hiện trên trang chủ, trong mục chính trị, ở mục tin tức 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ó thể mục thể thao, lối sống hay công nghệ. Bài viết này cũng có thể xuất hiện trên các trang web khác, 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ể nào để sử dụng. Các phần phải có tiêu đề, với rất ít trường hợp ngoại lệ.

Trở lại ví dụ của Jacinda Ardern, trên trang chủ của tờ báo, biểu ngữ sẽ bao gồm tên tờ báo, theo sau là <main>, được chia thành nhiều <section>, mỗi <section> có tiêu đề, chẳng hạn như "Tin tức thế giới" và "Chính trị". Trong mỗi phần, bạn sẽ 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, thì toàn bộ phần "tiêu đề và phần" 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 này có tiêu đề và mỗi phần cũng vậy.

<section> không phải là mốc trừ phi mốc này 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 ẩn sẽ là region. Bạn nên hạn chế dùng vai trò đánh dấu để xác định các phần 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, gây khó khăn cho việc hiểu 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 cả tên dễ tiếp cận cho từng <section> thì 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 cấp độ đại diện cho một trong 6 cấp của tiêu đề mục, trong đó <h1> là cấp cao nhất hoặc quan trọng nhất của mục, còn <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 đề của ứng dụng hoặc trang web. Khi được lồng trong <main>, dù được lồng trong <header> trong <main> hay không, thì đó là tiêu đề của trang đó chứ không phải toàn bộ trang web. Khi được lồng trong <article> hoặc <section>, đây sẽ là tiêu đề cho mục con đó trên 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 với <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 đề mục ở đây.

Một số người dùng trình đọc màn hình có truy cập vào các tiêu đề để hiểu nội dung của trang. Ban đầu, tiêu đề được cho là sẽ phác thảo tài liệu, giống như MS Word hoặc Google Tài liệu có thể tạo đường viền dựa trên tiêu đề, nhưng các trình duyệt không bao giờ triển khai cấu trúc này. Mặc dù các trình duyệt hiển thị tiêu đề lồng nhau với 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ợ tính năng phác thảo.

Bây giờ, bạn đã có đủ kiến thức để tóm tắt về MachineSchoolML:

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

Đây là đường viền cho nội dung hiển thị trên trang web của hội thảo học máy:

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

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

Kiểm tra kiến thức

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