Tạm biệt Block & Inline - Chào mừng HTML5

Có rất nhiều đổi mới trong đặc tả HTML5 và nhiều cải tiến trong số đó đã được phần lớn bối cảnh trình duyệt hỗ trợ - dưới đây tôi muốn nêu bật một thay đổi thú vị đối với các quy tắc về lồng các phần tử. HTML luôn phân biệt giữa các phần tử khối và nội tuyến. Ví dụ: Định nghĩa loại tài liệu của HTML4 liệt kê h1, p và div là các phần tử khối và a, span và img là các phần tử nội tuyến.


Khái niệm này hiện đã bị bỏ (vì những lý do chính đáng). Trong một số trường hợp sử dụng, nhiều nhà thiết kế web đã bỏ qua tính đúng đắn của quy tắc lồng nhau nói rằng không có phần tử khối nào có thể nằm trong các phần tử nội tuyến hoặc hành vi tiêu chuẩn sử dụng các quy tắc CSS như display: inline; hoặc hiển thị: khối; (thường dẫn đến mã không hợp lệ) mà không cần thêm quảng cáo.

HTML5 hiện đang làm dịu sự phân biệt này và thậm chí đặt tên cho 9 danh mục khác nhau mà một phần tử có thể thuộc về, theo đó một phần tử có thể nằm trong một số danh mục. Sự khác biệt cũ giữa các phần tử khối và phần tử nội tuyến được đưa vào quá mức và vô số ý nghĩa của các thẻ trên web được tính đến. Đặc biệt, điều này có hậu quả là các cấu trúc sau đại diện cho mã hợp lệ:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

Trước đây chỉ có thể liên kết toàn bộ vùng chứa chứa các phần tử khối bổ sung (với mã hợp lệ) bằng cách sử dụng các thủ thuật (ví dụ: bằng cách định vị tuyệt đối của lớp phủ được liên kết). Ngoài ra, tiêu đề và đoạn văn đã được liên kết - điều này dẫn đến sự dư thừa và vùng chứa không thể nhấp vào được. Nhờ sự mở rộng đáng hoan nghênh của HTML5, điều này không còn là vấn đề nữa.

Trở lại