Trong HTML, thẻ <div> là một phần tử cấu trúc không có kiểu dáng mặc định, thường được sử dụng để tạo các vùng chứa (container) cho các phần tử khác. Thẻ này rất hữu ích trong việc phân chia nội dung, nhóm các thành phần lại với nhau và giúp áp dụng các kiểu CSS dễ dàng.

Các ứng dụng chính của thẻ <div>:

Bố cục Web: Thẻ <div> thường được sử dụng để chia nhỏ trang web thành các khu vực riêng biệt, giúp tổ chức nội dung một cách có hệ thống. Ví dụ, bạn có thể sử dụng các thẻ <div> để nhóm các phần tử liên quan như tiêu đề, thanh điều hướng, nội dung chính và chân trang. Việc này giúp dễ dàng áp dụng các kiểu CSS đồng nhất cho từng phần trong trang.

<div class="header">Tiêu đề trang</div>

<div class="navigation">Menu điều hướng</div>

<div class="content">Nội dung chính</div>

<div class="footer">Chân trang</div>

Tạo kiểu với CSS: Thẻ <div> không có kiểu dáng mặc định, vì vậy bạn có thể sử dụng CSS để tạo các kiểu dáng và bố cục mong muốn. Bạn có thể điều chỉnh các thuộc tính như kích thước, màu sắc, vị trí, lề, viền, và padding để tạo ra các thiết kế tùy chỉnh. Nhờ đó, thẻ <div> giúp dễ dàng tùy chỉnh giao diện cho các phần tử HTML.

Ví dụ, để tạo một thẻ <div> có chiều cao, chiều rộng, màu nền và viền, bạn có thể làm như sau:

.box {

width: 200px;

height: 150px;

background-color: lightblue;

border: 2px solid blue;

}

Thiết kế responsive (phù hợp với nhiều thiết bị): Thẻ <div> đặc biệt hữu ích trong thiết kế responsive (tương thích với nhiều kích thước màn hình). Bạn có thể sử dụng các thuộc tính CSS như flexbox và grid để làm cho các phần tử bên trong <div> có thể tự động điều chỉnh khi thay đổi kích thước màn hình, từ máy tính để bàn cho đến điện thoại thông minh và máy tính bảng.

.container {

display: flex;

flex-wrap: wrap;

}

.item {

flex: 1 1 200px;

margin: 10px;

}

Trong ví dụ trên, phần tử .item sẽ tự động điều chỉnh kích thước để phù hợp với không gian có sẵn, giúp giao diện trở nên linh hoạt trên các thiết bị khác nhau.

Tạo các hình dạng và hiệu ứng đặc biệt: Mặc dù thẻ <div> là một phần tử khối (block-level element), bạn vẫn có thể sử dụng nó để tạo các hình dạng phức tạp như hình tròn, hình vuông, hay thậm chí các hiệu ứng chuyển động và hoạt ảnh bằng CSS. Chẳng hạn, để tạo một vòng tròn, bạn chỉ cần đặt chiều rộng và chiều cao của thẻ <div> bằng nhau và áp dụng bán kính viền (border-radius) bằng 50%.

Ví dụ:

.circle {

width: 100px;

height: 100px;

background-color: red;

border-radius: 50%;

}

<div class="circle"></div>

Kết quả là một vòng tròn đỏ với đường kính 100px.

Tóm tắt

Thẻ <div> là một công cụ rất mạnh trong HTML, giúp tổ chức và nhóm các phần tử trang web một cách hiệu quả. Dù không có kiểu dáng mặc định, nhưng nhờ CSS, nó có thể dễ dàng được biến thành các thành phần có cấu trúc đẹp mắt và phù hợp với yêu cầu thiết kế. Việc sử dụng thẻ <div> hợp lý giúp cải thiện khả năng quản lý và tối ưu hóa bố cục web, đồng thời giúp trang web của bạn dễ dàng thích ứng với các thiết bị và kích thước màn hình khác nhau.