[HTML] Bài 5: Nhóm Các Thẻ Block - Thẻ Phân Chia Khu Vực

1. Giới Thiệu Thẻ DIV
Thẻ DIV là viết tắc của từ Division có nghĩa là phân chia, ta có thể hiểu ở đây là việc phân chia khu vực hay vùng sự phân chia này giúp cho trình duyệt hiểu rỏ bố cục trên trang web. Thẻ DIV là thẻ rất quan trọng trong thiết kế giao diện nó có thể chứa hầu hết các thẻ HTML.
Cú Pháp: <DIV> ................ </DIV>
- Các Thẻ không được nằm trong thẻ DIV: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link> .
- Để phân chia khu vực cho trang web bằng thẻ DIV chúng ta thường sử dụng thuộc tính id, class đinh kèm (chúng ta sẽ học các thuộc tính này ở phần CSS )
Ví Dụ:
Ở Bài 1 chúng ta đã học 1 mẫu trang web cơ bản như sau:

Bây giờ chúng ta sẻ sử dụng thẻ DIV để phân vùng khu vực:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FCWC- Thẻ DIV</title>
</head>
<body>
  <div id="header">
    <h1>Lo go</h1>
  </div>
  <!-- End header -->
  <div id="gnav">
    Đây là phần Global navigation
  </div>
  <!-- end global navigation-->
  <div id="pagebody">
    <div id="content">
      Đây là phần content
    </div>
    <!--End content-->
    <div id="sidebar">
      Đây là phần sidebar
    </div>
    <!-- end sidebar-->
  </div>
  <!-- end pagebody-->
  <div id="footer">
    Đây là phần Footer
  </div>
  <!-- end footer-->
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Có lẽ bạn sẻ thắc mắc là trình duyệt hiển thị không khác gì ta viết chữ bình thường phải không, đó là vì Div đơn thuần chỉ là một thành phần trống, không nội dung không ý nghĩa nếu ta vẫn chưa sử dụng đến CSS chúng ta sẻ học ở những bài học CSS.
2. Không Nên Lạm Dụng Thẻ DIV
Hình tượng hóa một chút cho bạn dễ hiểu. Giả sử khi bạn làm giao diện cũng giống như bạn gói gém đồ đạc để chuyển nhà. Bạn muốn cho tất cả đồ đạc của mình vào hộp để di chuyển. Nhưng bạn muốn phần loại nó ra cho dễ quản lý. Sách bào vào một hộp, băng đĩa vào một hộp, chăn ga gối đệm vào một hộp, máy tính game vào một hộp v.v.. Như thế thì rất hợp lý và không ai có thể nói được gì. Nhưng tưởng tượng khi bạn gói hộp có id= Sách Vở bạn sẽ không gói từng quyển sách vào một hộp nhỏ chứ?.
Điều mà mọi người thường làm là cho hết tất cả sách vở vào hộp có id=sach_vo chứ không ai lại gói từng cuốn sách vào một hộp riêng rồi lại cho hết các hộp nhỏ này vào một hộp lớn. Như thế nó vừa khó quản lý, tốn kém thời gian, bày bừa nhà cửa, hao tốn tài nguyên .v.v
Tương tự khi sử dụng div. Khi bạn tạo một div với id=’banner’ thì bạn sẽ cho hết những gì liên quan đến banner vào trong thẻ div này. Tất cả những thứ như logo, Slogan, Navigation v.v.. sẽ nằm trong div này và các thành phần này không cần phải có div bao quanh từng thành phần nhỏ nữa.
Ví Dụ:
Sử Dụng Quá nhiều Thẻ DIV: