💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 31 tháng 5 năm 2026
Nhóm lại bằng thẻ div | Hướng dẫn và bài tập
📌
Kết luận
<div> là một chiếc "hộp" dùng để bố cục
<div>.
📝 Mã thực tế tại đây
<div>Thẻ bài 1</div>
<div>Thẻ bài 2</div>div là gì?
<div> là viết tắt của "division" (phân chia), là một phần tử khối (block element) đa năng và không có ý nghĩa ngữ nghĩa cụ thể.
"Không có ý nghĩa" chính là điểm quan trọng. Các thẻ như <header> hay <main> đều mang ý nghĩa nhất định, nhưng <div> thì thuần túy chỉ dùng để "gom nhóm" phục vụ cho việc trình bày.
Khi nào nên dùng div?
| Trường hợp | Thẻ nên dùng |
|---|---|
| Khu vực đầu trang | <header> (có ý nghĩa) |
| Nội dung chính | <main> (có ý nghĩa) |
| Bố cục dạng thẻ bài | <div> (không ý nghĩa - phục vụ CSS) |
| Khung chứa cho Flexbox | <div> (không ý nghĩa - phục vụ bố cục) |
<div>.
Tổng kết
-<div> dùng để gom nhóm phục vụ trang trí và bố cục
- Dùng thẻ ngữ nghĩa cho các phần có vai trò rõ ràng
- <div> là phần tử khối (mặc định sẽ xếp chồng lên nhau theo chiều dọc)
Hãy thử trong phần bài tập
Hãy thử bao quanh hai phần tử bằng các thẻ div riêng biệt nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy bao quanh hai phần tử bất kỳ bằng thẻ div riêng biệt. Nội dung bên trong có thể viết tùy ý.
Gợi ý khi gặp khó khăn
div là một phần tử khối không có ý nghĩa ngữ nghĩa, dùng để gom nhóm các phần tử.