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

Những đổi mới của đặc tả HTML5 là rất nhiều và nhiều trong số chúng đã được phần lớn bối cảnh trình duyệt hỗ trợ - dưới đây tôi muốn làm nổi bật một thay đổi thú vị đối với các quy tắc lồng ghép các phần tử. HTML luôn phân biệt giữa phần tử khối và phần tử nội tuyến. Ví dụ: Định nghĩa loại tài liệu của HTML4, đặt tên h1, p và div dưới dạng phần tử khối và a, span, img là 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ể sử dụng toàn bộ vùng chứa chứa các phần tử khối khác (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 một lớp phủ được liên kết). Ngoài ra, bạn đã liên kết tiêu đề và đoạn văn - điều này dẫn đến dư thừa và vùng chứa không thể nhấp được. Với sự bổ sung đáng hoan nghênh cho HTML5, đây không còn là vấn đề nữa.

Trở lại