Trong lập trình web, thẻ div trong HTML là “khối chứa” quan trọng giúp nhóm các phần tử và tổ chức bố cục trang rõ ràng hơn. Khi sử dụng đúng cách, thẻ <div> mang lại lợi thế tối ưu trong thiết kế, dễ dàng kết hợp với CSS để tạo giao diện hiện đại, responsive. Nhờ đó, bạn có thể xây dựng website chuyên nghiệp, dễ quản trị và nâng cao trải nghiệm người dùng.

Thẻ div trong HTML là gì?

Thẻ div trong HTML là một khối được hình thành từ việc nhóm nhiều phần tử HTML khác lại với nhau thành một khối thống nhất. Về bản chất, thẻ div không mang ý nghĩa như các thẻ <header>, <section> hay <article> mà chủ yếu đóng vai trò khung chưa để lập trình viên dễ dàng quản lý bố cục và áp dụng CSS, JavaScript.

Khi nào cần sử dụng thẻ div trong HTML?

Thẻ <div> được xem là “khung chứa linh hoạt” trong HTML. Tuy không có ý nghĩa ngữ nghĩa, nhưng nó cực kỳ hữu ích trong nhiều tình huống thực tế.

• Nhóm nhiều phần tử lại thành một khối: Khi bạn muốn gom nhiều thành phần như tiêu đề, đoạn văn và hình ảnh vào cùng một khu vực để dễ quản lý, <div> là lựa chọn lý tưởng. Điều này giúp việc áp dụng CSS hoặc thao tác bằng JavaScript được thực hiện trên toàn khối thay vì từng phần tử đơn lẻ.
• Xây dựng bố cục trang web (layout): Trước khi có CSS Grid và Flexbox, <div> là “xương sống” của layout web, thường dùng để chia trang thành header, sidebar, content và footer. Ngày nay, <div> vẫn đóng vai trò quan trọng khi kết hợp với CSS để tùy chỉnh bố cục nhanh chóng.
• Áp dụng định dạng CSS cho nhiều phần tử: Bằng cách gán class hoặc id cho <div>, bạn có thể kiểm soát toàn bộ khối nội dung bên trong, từ màu nền, căn lề cho đến hiệu ứng hiển thị. Điều này giúp mã HTML gọn gàng và dễ bảo trì hơn.
• Tích hợp hiệu ứng và chức năng JavaScript: <div> thường được sử dụng làm vùng chứa cho các tương tác như popup, modal, thanh menu ẩn hoặc slider. Việc này cho phép bạn bắt sự kiện và xử lý logic động dễ dàng hơn.

Vai trò và cách sử dụng thẻ div trong HTML

Trong thiết kế web, thẻ div trong HTML đóng vai trò như một phần tử “bao bọc” giúp tách biệt và tổ chức nội dung một cách có hệ thống. Nhờ đặc tính dạng khối, <div> cho phép: 

Thẻ div áp dụng thuộc tính class

Thuộc tính class sẽ thay đổi định dạng hiển thị trên website. một thẻ <div> có thể chứa nhiều class cùng lúc, nhờ đó việc định dạng và mở rộng tính năng trở nên gọn gàng, dễ bảo trì. Nếu như lang chủ yếu phục vụ nhận diện ngôn ngữ, thì class tập trung vào kiểm soát hiển thị và hành vi của nội dung trên trang web.

Ví dụ: 

<style>

.myDiv {

font-family: 'Arial';

font-weight: bold;

  border: 5px outset #00A4BD;   

  color: #2D3E50;

  background-color: #EAF0F6;

  text-align: center;

}

</style>

<div class="myDiv">

  <h2>LANIT Blog</h2>

  <p>Trang cung cấp kiến thức của LANIT</p>

</div>

Thẻ div sử dụng lang

Thẻ div sử dụng thuộc tính lang để xác định ngôn ngữ của nội dung trong 1 phần tử. Điều này giúp trình duyệt, công cụ tìm kiếm và công cụ hỗ trợ tiếp nhận hiểu đúng ngữ cảnh ngôn ngữ.

Ví dụ:

<div lang="vi">

  <p>Xin chào, đây là tiếng Việt.</p>

</div>

<div lang="en">

  <p>Hello, this is English.</p>

</div>

<div lang="fr">

  <p>Bonjour, ceci est du français.</p>

</div>

Lúc này, trên giao diện người dùng sẽ có thể hiển thị cả tiếng Việt – Anh – Pháp, tuỳ sự lựa chọn hiển thị. 

Nhưng lang không dịch mà chỉ giúp đánh dấu và hiển thị đúng cách. Nếu bạn muốn dịch tự động thì cần dùng đến công cụ khác.

Sử dụng thẻ div với Flexbox

Khi cần sắp xếp hoặc thay đổi bố cục phần tử trên trang, bạn có thể áp dụng Flexbox cho thẻ <div> bằng cách khai báo thuộc tính CSS cho một class, chẳng hạn .flex-container, rồi gán class này vào thẻ <div>.

Ví dụ, để xây dựng một layout gồm bốn cột, bạn chỉ cần tạo bốn thẻ <div> đại diện cho bốn khối nội dung và đặt chúng bên trong một thẻ <div> bao ngoài. Trong phần CSS, bạn định nghĩa .flex-container làm vùng chứa chính, khai báo chế độ hiển thị linh hoạt với display: flex, đồng thời có thể thêm chiều cao hoặc màu nền để dễ nhận diện bố cục.

<style>

.flex-container {

  display: flex;

  height: 200px;

  background-color: #00A4BD;

}

.flex-container > div {

  background-color: #EAF0F6;

  width: 90px;

  margin: 10px;

  text-align: center;

  line-height: 50px;

  font-size: 60px;

  flex: 1 1 200px;

}

</style>

<body>

<h1>LANIT Blog</h1>

<p>Hướng dẫn cách sử dụng .flex-container</p>

<div class="flex-container">

  <div>1</div>

  <div>2</div>

</div>

</body>

Tạo hiệu ứng đổ bóng cho thẻ <div>

Với CSS, bạn hoàn toàn có thể thêm hiệu ứng bóng cho thẻ <div> thông qua thuộc tính box-shadow. Cách này giúp khối nội dung trở nên nổi bật và tạo chiều sâu cho giao diện. Để dễ hình dung, hãy tham khảo ví dụ minh họa dưới đây:

<style>

.box-shadow {

      font-family: cursive, arial;

      background-color: #2ecc71;

      color: white;

      padding: 10px;

      border-radius: 4px;

      box-shadow: 2px 2px 20px 23px #7fecad;

    }

</style>

<div class="box-shadow">

      <p>LANIT Blog - Kiến thức công nghệ thông tin<br />Định nghĩa thẻ div trong HTML </p>

      <p>Thẻ div có khác biệt gì so với thẻ<br/>span

      </p>

</div>

Thẻ span và thẻ div khác nhau thế nào trong HTML?