Document Outlines in HTML 5.1

Bài đăng này đã không được cập nhật trong 6 năm

Khái quát cho một tài liệu HTML cho thấy cấu trúc của nội dung trên trang. Điều này hữu ích cho các user agents, những người có thể sử dụng phác thảo để tạo, ví dụ, một bảng nội dung cho tài liệu. Điều này sau đó có thể được sử dụng bởi trình đọc màn hình để giúp mọi người điều hướng trang tốt hơn. HTML 5,1 đã được phát hành. Đã có một số thay đổi thú vị được thực hiện, hai trong số đó liên quan đến cách chúng ta tạo ra một phác thảo tài liệu hợp lệ.

Xóa: Việc sử dụng thẻ <section> với mỗi thẻ <h1> để tạo một phác thảo. Thay đổi: <header> và <footer> có thể lồng nhau, nếu mỗi cấp nằm trong một phần tử chia.

Tạo phác thảo tài liệu với phần lồng nhau <section>

Trong HTML 5.0, một cách mới để tạo ra một phác thảo tài liệu đã được giới thiệu. Nó tham gia chỉ sử dụng các tiêu đề <h1> tiêu đề, và thay vì làm tổ <section> yếu tố để xác định phần lồng nhau trong tài liệu. Lấy, ví dụ, đánh dấu này

<section>  
<h1>Heading Level One</h1>

    <section>
        <h1>Heading Level Two</h1>
    </section>

    <section>
        <h1>Heading Level Two</h1>

        <section>
            <h1>Heading Level Three</h1>
        </section>
    </section>

<section>

Sử dụng đánh dấu đó, cần tạo ra các phác thảo tài liệu sau đây

1. Heading Level One  
    1. Heading Level Two
    2. Heading Level Two
        1. Heading Level Three

phương pháp được khuyến cáo để tạo một phác thảo tài liệu là vẫn sử dụng các phần tử lồng nhau, nhưng kết hợp với xếp hạng tiêu đề thích hợp cho mỗi phần. Ví dụ: để tạo phác thảo tài liệu ở trên, chúng ta nên sử dụng các đánh dấu sau đây

<section>  
<h1>Heading Level One</h1>

    <section>
        <h2>Heading Level Two</h2>
    </section>

    <section>
        <h2>Heading Level Two</h2>

        <section>
            <h3>Heading Level Three</h3>
        </section>
    </section>

<section>

Tạo phần tử <header> và <footer>

Trong HTML 5.0, phần tử <header> không thể được lồng trong các phần tử <head>, và các phần tử <footer> không thể được lồng trong các phần tử <footer>. Trong HTML 5,1, điều này đã được thay đổi. Bây giờ, chúng ta có thể có các phần tử <header> và <footer> lồng nhau, nhưng chỉ khi chúng nằm trong một ngữ cảnh phân chia mới, được tạo ra bằng cách xếp chúng trong một phần tử phân chia. Đây là một trong những điều sau đây:

<article>
<section>
<aside>
<nav>

Bằng cách này, phần tử <header> hoặc <footer> luôn liên quan đến một phần tử phân chia duy nhất, chẳng hạn như phần tử <section>, chứ không phải là phần tử <head> hoặc <footer>. Ví dụ: một phần tử <article> có thể có <header>, trong đó <section> khác nhau, chi tiết các thông tin khác nhau về bài báo.

<article>  
  <header>
    <h1>Creating a Document Outline in HTML 5.1</h1>
    <section>
      <header>
        <h2>The Author</h2>
      </header>
      <p>Ire Aderinokun</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
    <section>
      <header>
        <h2>The Publication</h2>
      </header>
      <p>bitsofcode</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
  </header>
  <h2>Introduction</h2>
  <p>Lorem ipsum dolor sit amet</p>
</article>

Markup này sẽ tạo ra phác thảo sau đây

1. Creating a Document Outline in HTML 5.1  
    1. The Author
    2. The Publication
    3. Introduction

Nguồn: https://bitsofco.de/document-outlines-in-html-5-1/

HTML5 HTML

Tạo phác thảo tài liệu với phần lồng nhau <section>

Tạo phần tử <header> và <footer>

Mục lục