Phần tử SECTION được định nghĩa là một phần ngữ nghĩa của trang web hoặc trang web không phải là một loại cụ thể hơn như ARTICLE hoặc ASIDE. Các nhà thiết kế thường sử dụng phần tử này khi đánh dấu một phần riêng biệt của trang — toàn bộ phần có thể được di chuyển và sử dụng trên các trang hoặc phần khác của trang web. Nó là một phần nội dung riêng biệt.
Ngược lại, phần tử DIV thích hợp cho các phần của trang mà bạn muốn phân chia cho các mục đích khác ngoài ngữ nghĩa . Ví dụ: bạn có thể bọc một số nội dung trong DIV để tạo cho nó một “hook” để tạo kiểu với CSS. Nó có thể không phải là một phần nội dung riêng biệt về mặt ngữ nghĩa, nhưng nó được đặt riêng biệt để bạn có thể đạt được bố cục hoặc cảm giác mong muốn.
Đó là tất cả về ngữ nghĩa
Sự khác biệt duy nhất giữa các phần tử DIV và SECTION là ngữ nghĩa — ý nghĩa của nội dung mà bạn đang phân chia.
Bất kỳ nội dung nào có trong phần tử DIV đều không có ý nghĩa cố hữu. Nó được sử dụng tốt nhất cho những thứ như:
- Các kiểu CSS và móc nối cho các kiểu CSS
- Bố cục vùng chứa
- JavaScript hooks
- Các phần giúp nội dung hoặc HTML dễ đọc hơn
Phần tử DIV từng là phần tử duy nhất có sẵn để thêm móc vào tài liệu kiểu và bố cục. Trước HTML5, trang web điển hình đã có các phần tử DIV. Trên thực tế, một số trình soạn thảo WYSIWYG đã sử dụng riêng phần tử DIV, đôi khi thay cho các đoạn văn.
HTML5 đã giới thiệu các phần tử phân đoạn để tạo ra các tài liệu mô tả ngữ nghĩa hơn và giúp xác định kiểu trên các phần tử đó.
Về phần tử SPAN thì sao?
Một phần tử phi ngữ nghĩa phổ biến khác là SPAN. Nó được sử dụng nội tuyến để thêm hook cho các kiểu và script xung quanh các khối nội dung (thường là văn bản). Theo nghĩa đó, nó giống hệt như DIV, nhưng không phải là một phần tử khối . Hãy coi DIV như một SPAN cấp khối và sử dụng nó theo cách tương tự, nhưng cho toàn bộ khối nội dung HTML.
HTML không có phần tử phân đoạn nội dòng nào có thể so sánh được.
Đối với các phiên bản cũ hơn của Internet Explorer
Ngay cả khi bạn đang hỗ trợ các phiên bản cũ hơn đáng kể của Internet Explorer của Microsoft không nhận dạng được HTML5 một cách đáng tin cậy, bạn nên sử dụng các thẻ HTML chính xác về mặt ngữ nghĩa. Ngữ nghĩa sẽ giúp bạn và nhóm của bạn quản lý trang trong tương lai. Các phiên bản mới nhất của Internet Explorer, cũng như phiên bản thay thế của nó, Microsoft Edge, nhận dạng HTML5.
Sử dụng các phần tử DIV và SECTION
Bạn có thể sử dụng cả hai phần tử DIV và SECTION cùng nhau trong một tài liệu HTML5 hợp lệ — SECTION, để xác định các phần rời rạc về mặt ngữ nghĩa của nội dung và DIV, để xác định các móc cho CSS, JavaScript và các mục đích bố cục.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào ngày 15/3/17
