Nguyên tắc cốt lõi khi xây dựng cấu trúc DOM
Theo đặc tả của W3C, việc lồng ghép các thẻ HTML phải tuân thủ một quy luật bất biến: Phần tử khối (Block-level) được phép chứa phần tử nội dòng (Inline), nhưng phần tử nội dòng tuyệt đối không được bao bọc phần tử khối. Việc vi phạm nguyên tắc này sẽ phá vỡ ngữ nghĩa của tài liệu và gây ra các lỗi hiển thị không lường trước.
Phân cấp và giới hạn của phần tử khối
Các phần tử block không hoàn toàn giống nhau về khả năng chứa đựng. Chúng được chia thành ba nhóm cấp độ:
- Cấp độ 1: Thẻ
<body>- Phần tử gốc chứa toàn bộ nội dung hiển thị của trang. - Cấp độ 2: Các block tự do như
<div>,<section>,<li>. Chúng có thể chứa bất kỳ phần tử nào khác, bao gồm cả block và inline. - Cấp độ 3: Các block giới hạn. Nhóm này chỉ chấp nhận phần tử nội dòng. Điển hình là các thẻ tiêu đề (
<h1>đến<h6>), đoạn văn<p>, chú thích bảng<caption>, đường kẻ ngang<hr>, và thuật ngữ định nghĩa<dt>.
Các thẻ có cấu trúc ràng buộc nghiêm ngặt
Một số phần tử đóng vai trò khung chứa đặc biệt và yêu cầu thẻ con trực tiếp của chúng phải tuân theo một trật tự cố định:
- Danh sách: Thẻ
<ul>và<ol>chỉ được chứa trực tiếp<li>. Tương tự,<dl>chỉ chấp nhận<dt>hoặc<dd>. - Bảng dữ liệu: Cấu trúc của
<table>đòi hỏi các phần tử con cấp một phải là<caption>,<thead>,<tfoot>hoặc<tbody>. Bên trong các thẻ phân vùng này mới được đặt<tr>(hàng), và cuối cùng<tr>mới chứa các ô dữ liệu<td>hoặc tiêu đề cột<th>.
Cơ chế tự động sửa lỗi của trình duyệt
Khi mã nguồn vi phạm quy tắc lồng ghép, trình duyệt sẽ kích hoạt cơ chế phân tích cú pháp lỗi (Error Handling) để tự động "sửa" DOM nhằm đảm bảo trang web vẫn render được. Tuy nhiên, kết quả thường không như mong đợi.
Ví dụ về mã nguồn không hợp lệ:
<p class="description">
<article id="content-box">Dữ liệu văn bản mẫu</article>
</p>Cấu trúc DOM thực tế được trình duyệt biên dịch lại:
<p class="description"></p>
<article id="content-box">Dữ liệu văn bản mẫu</article>
<p></p>Do <p> không thể chứa <article> (một block element), trình duyệt đã tự động đóng thẻ <p> ngay trước khi thẻ block xuất hiện, đồng thời tạo ra một thẻ <p> rỗng ở phía sau. Để tránh các lỗi layout tiềm ẩn, lập trình viên cần tuân thủ tuyệt đối chuẩn W3C.
Đặc tính của Replaced Elements và CSS
Trong nhóm nội dòng, tồn tại một tập hợp các phần tử thay thế (Replaced Elements) như <img>, <input>, <select>, <textarea>. Mặc dù mang bản chất inline, chúng sở hữu đặc quyền của block element: cho phép định nghĩa chiều rộng (width) và chiều cao (height).
Trong CSS, thuộc tính display: inline-block được thiết kế để mô phỏng hành vi của các replaced elements. Nó cho phép một phần tử vừa xếp chung trên một hàng với văn bản (như inline), vừa có thể can thiệp vào Box Model (margin, padding, width, height) giống như block.
Bảng tra cứu phân loại phần tử HTML
Nhóm Block Elements (Phần tử khối)
Lưu ý: Một số thẻ đánh dấu (*) đã bị loại bỏ (deprecated) trong HTML5.
<address>: Thông tin liên hệ của tác giả hoặc chủ sở hữu.<blockquote>: Trích dẫn dạng khối.<center>(*): Căn giữa nội dung.<dir>(*): Danh sách thư mục.<div>: Khối chia vùng tổng quát, nền tảng của CSS Layout.<dl>: Danh sách định nghĩa.<fieldset>: Nhóm các trường dữ liệu trong form.<form>: Biểu mẫu tương tác (chứa các block khác).<h1>-<h6>: Các cấp độ tiêu đề.<hr>: Đường kẻ ngang phân cách ngữ nghĩa.<isindex>(*): Ô nhắc nhập liệu tìm kiếm.<menu>(*): Danh sách menu ngữ cảnh.<noframes>(*): Nội dung dự phòng khi trình duyệt không hỗ trợ frame.<noscript>: Nội dung hiển thị khi JavaScript bị vô hiệu hóa.<ol>: Danh sách có thứ tự.<p>: Đoạn văn bản.<pre>: Văn bản được định dạng sẵn (giữ nguyên khoảng trắng).<table>: Bảng dữ liệu.<ul>: Danh sách không thứ tự.
Nhóm Inline Elements (Phần tử nội dòng)
Được thiết kế dựa trên ngữ nghĩa (semantic) để định dạng văn bản hoặc chứa các inline elements khác.
<a>: Siêu liên kết (Anchor).<abbr>: Từ viết tắt.<acronym>(*): Chữ viết tắt tạo thành từ các chữ cái đầu.<b>: In đậm (không nhấn mạnh ngữ nghĩa).<bdo>: Ghi đè hướng hiển thị văn bản (Bidirectional Override).<big>(*): Văn bản cỡ chữ lớn.<br>: Ngắt dòng.<cite>: Trích dẫn tên tác phẩm.<code>: Đoạn mã lập trình.<dfn>: Thuật ngữ định nghĩa.<em>: Nhấn mạnh ngữ nghĩa (thường in nghiêng).<font>(*): Định dạng phông chữ, màu sắc.<i>: In nghiêng (dùng cho thuật ngữ, suy nghĩ...).<img>: Hình ảnh (Replaced element).<input>: Trường nhập liệu (Replaced element).<kbd>: Văn bản nhập từ bàn phím.<label>: Nhãn cho các phần tử form.<q>: Trích dẫn ngắn dạng nội dòng.<s>(*): Gạch ngang giữa chữ (không còn chính xác).<samp>: Kết quả xuất ra từ chương trình máy tính.<select>: Danh sách thả xuống (Replaced element).<small>: Văn bản cỡ chữ nhỏ (thường cho chú thích).<span>: Vùng chứa nội dòng tổng quát.<strike>(*): Gạch ngang chữ.<strong>: Nhấn mạnh mức độ cao (thường in đậm).<sub>: Chỉ số dưới.<sup>: Chỉ số trên.<textarea>: Vùng nhập văn bản đa dòng (Replaced element).<tt>(*): Văn bản teletype (máy điện báo).<u>: Gạch chân (dùng cho lỗi chính tả hoặc tên riêng tiếng Trung).<var>: Biến số trong toán học hoặc lập trình.