Định nghĩa và cách dùng thẻ <div>
- Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.
- Có thể chứa hầu hết các thẻ trong HTML/XHTML.
- Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>.
- Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>.
Một số khu vực khuyên sử dụng thẻ <div></div>:
- Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web)
- Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ <div></div> để tiện cho việc điều khiển.
Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id, chúng ta có thể xem ở phần tham khảo thuộc tính id.
HTML viết
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Tiêu đề trang web</title>
</head>
<body>
<div id="header">Viết nội dung phần header ở đây</div>
<div id="gNav">Viết nội dung phần global navigation ở đây</div>
<div id="pageBody">
<div id="content">Viết nội dung phần content ở đây</div>
<div id="sidebar">Viết nội dung phần sidebar ở đây</div>
</div>
<div id="footer">Viết nội dung phần footer ở đây</div>
</body>
</html>
Hiển thị trình duyệt:
Những cấu trúc không nên sử dụng
Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button,... nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<div>Đây là đoạn văn</div>
<div><img src="images/img_planet.gif" alt="Space" /></div>
<div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div>
</body>
</html>