Content categories
Hầu hết các phần tử HTML đều thuộc một hoặc nhiều danh mục nội dung — các danh mục này nhóm các phần tử có chung đặc điểm. Đây là một nhóm lỏng lẻo (nó không thực sự tạo ra mối quan hệ giữa các phần tử trong các danh mục này), nhưng chúng giúp xác định và mô tả hành vi chung của các danh mục và các quy tắc liên quan. Một phần tử có thể không thuộc bất kỳ danh mục nào trong số này.
Các danh mục nội dung được sử dụng để xác định content model (mô hình nội dung) của các phần tử, nói cách khác, mỗi phần tử có thể nhận những phần tử con nào. Ví dụ, phần tử <p> chỉ có thể chứa phrasing content, trong khi phần tử <div> có thể chứa flow content. Một số phần tử, như <ins>, có transparent content model.
Có bảy danh mục nội dung chính, có thể tóm tắt bằng sơ đồ Venn dưới đây:
Note: Một thảo luận chi tiết hơn về các danh mục nội dung này và các chức năng so sánh của chúng nằm ngoài phạm vi của bài viết này; để biết thêm, bạn có thể muốn đọc các phần liên quan của đặc tả HTML.
Metadata content
Các phần tử thuộc danh mục metadata content sửa đổi cách trình bày hoặc hành vi của phần còn lại của tài liệu, thiết lập liên kết đến các tài liệu khác, hoặc truyền tải các thông tin out-of-band khác. Mọi thứ trong <head>, bao gồm <title>, <link>, <script>, <style>, và <base> ít được sử dụng hơn, đều là metadata content. Có một phần tử <meta> dành cho metadata không thể được biểu diễn bởi các phần tử khác này.
Các phần tử metadata bao gồm:
Một số phần tử này thuộc nhiều hơn một danh mục nội dung. Ví dụ, <script> là thành viên của danh mục metadata, flow và phrasing content, và là phần tử hỗ trợ script; <script> có thể được sử dụng ở những nơi mong đợi metadata content, phrasing content, hoặc các phần tử hỗ trợ script.
Flow content
Flow content là một danh mục rộng bao gồm hầu hết các phần tử có thể nằm bên trong phần tử <body>, bao gồm các phần tử heading, sectioning, phrasing, embedding, interactive, và liên quan đến biểu mẫu. Nó cũng bao gồm các text node (nhưng không phải những node chỉ bao gồm các ký tự khoảng trắng).
Các phần tử flow bao gồm:
<a><abbr><address><article><aside><audio><b><bdi><bdo><blockquote><br><button><canvas><cite><code><data><datalist><del><details><dfn><dialog><div><dl><em><embed><fieldset><figure><footer><form><geolocation><h1>-<h6><header><hgroup><hr><i><iframe><img><input><ins><kbd><label><main><map><mark><math><menu><meter><nav><noscript><object><ol><output><p><picture><pre><progress><q><ruby><s><samp><script><search><section><select><slot><small><span><strong><sub><sup><svg><table><template><textarea><time><u><ul><var><video><wbr>- Autonomous custom elements
- Plain text
Một số phần tử khác thuộc danh mục này, nhưng chỉ khi một điều kiện cụ thể được đáp ứng:
Sectioning content
Sectioning content, một tập hợp con của flow content, tạo ra một phần trong outline hiện tại xác định phạm vi của các phần tử <header> và <footer>.
Các phần tử sectioning bao gồm:
Heading content
Heading content, một tập hợp con của flow content, xác định tiêu đề của một phần. Định nghĩa này áp dụng cho cả các phần được đánh dấu bằng các phần tử sectioning content rõ ràng và những phần được định nghĩa ngầm bởi chính heading content.
Các phần tử heading bao gồm:
Note:
Mặc dù có thể chứa heading content, <header> không phải là heading content.
Phrasing content
Phrasing content, một tập hợp con của flow content, đề cập đến văn bản và đánh dấu trong một tài liệu. Các chuỗi phrasing content tạo thành các đoạn văn.
Các phần tử phrasing bao gồm:
<abbr><audio><b><bdi><bdo><br><button><canvas><cite><code><data><datalist><dfn><em><embed><i><iframe><img><input><kbd><label><mark><math><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><var><video><wbr>- Autonomous custom elements
- Plain text
Một số phần tử khác thuộc danh mục này, nhưng chỉ khi một điều kiện cụ thể được đáp ứng:
Embedded content
Embedded content, một tập hợp con của flow content, nhập một tài nguyên khác hoặc chèn nội dung từ ngôn ngữ đánh dấu hoặc namespace khác vào tài liệu.
Các phần tử embedded content bao gồm:
Interactive content
Interactive content, một tập hợp con của flow content, bao gồm các phần tử được thiết kế đặc biệt để người dùng tương tác.
Các phần tử interactive content bao gồm:
Một số phần tử thuộc danh mục này chỉ trong các điều kiện cụ thể:
Palpable content
Palpable content là nội dung không rỗng và không ẩn; đó là nội dung được render và có chất lượng. Palpable content không được sử dụng để định nghĩa các content model mà được sử dụng để định nghĩa một quy tắc chung: Các phần tử có content model cho phép bất kỳ flow content hoặc phrasing content nên có ít nhất một node trong nội dung của nó là palpable content và không có thuộc tính hidden được chỉ định.
Các phần tử palpable bao gồm:
<a><abbr><address><article><aside><b><bdi><bdo><blockquote><button><canvas><cite><code><data><del><details><dfn><div><em><embed><fieldset><footer><figure><form><iframe><img><ins><kbd><label><main><map><mark><math><meter><nav><object><p><picture><pre><progress><q><ruby><s><samp><search><section><select><small><span><strong><sub><sup><svg><table><textarea><time><u><var><video>- Autonomous custom elements
- Plain text không phải là khoảng trắng giữa các phần tử
Một số phần tử thuộc danh mục này chỉ trong các điều kiện cụ thể:
Các phần tử không có danh mục
Một số phần tử không thuộc bất kỳ danh mục nội dung nào. Bao gồm:
Các phần tử hỗ trợ script
Các phần tử hỗ trợ script là các phần tử không đóng góp trực tiếp vào đầu ra được render của tài liệu. Thay vào đó, chúng phục vụ để hỗ trợ script, bằng cách chứa hoặc chỉ định mã script trực tiếp hoặc bằng cách chỉ định dữ liệu sẽ được script sử dụng. Hầu hết tất cả các phần tử, bao gồm cả những phần tử chỉ nhận các phần tử cụ thể (như <ul>, nhận các phần tử <li>), đều có thể chứa các phần tử hỗ trợ script.
Các phần tử hỗ trợ script bao gồm:
Form-associated content
Form-associated content là một tập hợp con của flow content bao gồm các phần tử có form owner và có thể được sử dụng ở bất kỳ đâu flow content được mong đợi. Form owner là phần tử <form> chứa nó hoặc <form> có id được chỉ định trong thuộc tính form của phần tử.
Các phần tử form-associated bao gồm:
Danh mục này chứa một số danh mục con:
- listed
-
Các phần tử được liệt kê trong các tập hợp
HTMLFormElement.elementsvàHTMLFieldSetElement.elements. Bao gồm<button>,<fieldset>,<input>,<object>,<output>,<select>, và<textarea>. - submittable
-
Các phần tử có thể được sử dụng để xây dựng tập dữ liệu biểu mẫu khi biểu mẫu được gửi. Bao gồm
<button>,<input>,<select>, và<textarea>. - resettable
-
Các phần tử có thể bị ảnh hưởng khi biểu mẫu được reset. Bao gồm
<input>,<output>,<select>, và<textarea>. - autocapitalize-and-autocorrect-inheriting
-
Các phần tử kế thừa các thuộc tính
autocapitalizevàautocorrecttừ form owner. Bao gồm<button>,<fieldset>,<input>,<output>,<select>, và<textarea>. - labelable
-
Các phần tử có thể được liên kết với các phần tử
<label>. Bao gồm<button>,<input>(tất cả các loại ngoại trừhidden),<meter>,<output>,<progress>,<select>, và<textarea>.
Transparent content model
Ngoài các danh mục nội dung được liệt kê, content model của một phần tử cũng có thể được định nghĩa là "transparent". Nếu nội dung được phép của phần tử X là "transparent", thì chúng ta nhìn vào phần tử cha của X. Chúng ta lấy giao điểm của nội dung được phép của cha X với các danh mục nội dung của X, và kết quả là ý nghĩa của "transparent" trong ngữ cảnh này. Nếu cha của X cũng có transparent content model, thì chúng ta tiếp tục đi lên cây cho đến khi tìm thấy một content model không transparent. Khi không có cha như vậy, "transparent" có nghĩa là "flow content".
Ví dụ, một phần tử <ruby> chấp nhận phrasing content. Phần tử <ins> thuộc danh mục phrasing content khi nó chỉ chứa phrasing content. Do đó, một phần tử <ins> có thể được đặt bên trong một phần tử <ruby>. Nội dung được phép của phần tử <ins> là "transparent", khi được lồng trong <ruby> có nghĩa là "phrasing content". Tuy nhiên, các phần tử <rt> không phải là phrasing content. Do đó, một phần tử <rt> không thể được lồng bên trong phần tử <ins> này, mặc dù cả <rt> và <ins> đều có thể nằm trong <ruby>, và <ins> là "transparent".
<ruby>
Text before
<ins>
<!-- Invalid: rt cannot be placed inside ins here -->
<rt>Pronunciation</rt>
</ins>
</ruby>
<ruby>
Text before
<!-- Valid: ins can be inside ruby, and rt can be inside ruby -->
<ins>Inserted text</ins>
<rt>Pronunciation</rt>
</ruby>
<ruby>
Text before
<!-- Valid: rt can be inside ruby, and ins can be inside rt -->
<rt><ins>Pronunciation</ins></rt>
</ruby>
Transparent là một content model, không phải một content category, vì vậy nó chỉ định nghĩa những gì một phần tử có thể chứa, không phải nơi phần tử có thể được đặt. Nghĩa là, khi xác định tính hợp lệ của các phần tử con, bạn không thể "nhìn xuyên qua" các phần tử con transparent. Ví dụ, một phần tử <ul> chỉ chấp nhận các phần tử <li> và các phần tử hỗ trợ script, và không cho phép <del> hay <ins>, ngay cả khi <del> chỉ chứa các phần tử <li>.
<ul>
<del>
<li>Oranges</li>
<li>Toilet paper</li>
</del>
<li>Toothpaste</li>
</ul>
<ul>
<li><del>Oranges</del></li>
<li><del>Toilet paper</del></li>
<li>Toothpaste</li>
</ul>