Tìm hiểu cách sử dụng phần tử HTML <div>.
Phần tử <div> là một phần tử container chung dùng để chia, nhóm và đóng gói nội dung.
Bạn chỉ nên dùng phần tử <div> nếu không có phần tử HTML ngữ nghĩa nào phù hợp với ngữ cảnh (hoặc nếu bạn không chắc chắn).
Đánh dấu ngữ nghĩa (Semantic markup) là khi bạn dùng các phần tử HTML mô tả ý nghĩa/chức năng của nội dung bạn đặt bên trong. Phần tử <div> là phần tử chung/phi ngữ nghĩa.
Trường hợp sử dụng cho phần tử <div>
Giả sử bạn đang viết mã một thành phần modal (hộp thoại) tái sử dụng cho trang web, khuyến khích người truy cập đăng ký bản tin.
Không có thẻ HTML ngữ nghĩa nào được định nghĩa sẵn cho thành phần như vậy, nên đó là ví dụ hoàn hảo khi nên dùng phần tử container chung <div>:
<div class="subscribe-modal"> <form id="contact" method="post" action=""> <fieldset> <h3>Đăng ký Bản tin của tôi</h3> <input name="email" id="email" type="email" placeholder="Nhập địa chỉ email ở đây" required /> <input type="submit" name="submit" class="submit" value="Đăng ký!" /> </fieldset> </form> </div>Thẻ <div> là một trong nhiều thẻ HTML dùng để định nghĩa các phần tử container. Một số phần tử container HTML thường dùng nhất là:
<article>,<section>, <main> , <header>, <footer>,<form>.
Nếu bất kỳ phần tử nào ở trên phù hợp để dùng làm container cho nội dung của bạn, hãy dùng chúng thay vì <div> chung chung.
Tại sao? Vì chúng đều là các thẻ phần tử ngữ nghĩa trong khi <div> là thẻ phi ngữ nghĩa, không cung cấp ngữ cảnh cụ thể nào.
Cần biết về phần tử <div>
Bạn có thể đặt bất kỳ loại nội dung nào bên trong phần tử <div>.
Mặc dù đánh dấu ngữ nghĩa thường được khuyến khích, nhưng nó không bắt buộc để trình duyệt hiểu và hiển thị trang cho người dùng.
Tuy nhiên, nếu bạn dùng các phần tử HTML chung/phi ngữ nghĩa trong tình huống mà HTML đã có sẵn các thẻ ngữ nghĩa, điều đó có thể làm tổn hại SEO của bạn.
Thông thường, tôi dùng phần tử <div> nếu我不确定该用哪个HTML元素，因为我宁愿用一个通用元素也不愿用错元素。此外，从技术角度来看，你几乎不可能错误地使用 <div> 元素——只能从语义角度来看。