Phần tử div

div là “chiếc hộp” đa năng nhất của HTML, dùng để nhóm các phần tử lại với nhau và làm khung bố cục. Bài này dạy dùng div, căn giữa và xếp nhiều div cạnh nhau.

25 phútCơ bản
Bạn sẽ học được
  • Nhóm nội dung bằng div
  • Căn giữa div bằng margin auto và flex
  • Xếp các div cạnh nhau bằng flex
  • Biết khi nào thay div bằng thẻ ngữ nghĩa

Khái niệm và lý thuyết

<div> là phần tử block không mang ý nghĩa gì, chỉ để gom nhóm và định dạng bằng CSS (thường đi kèm class). Khi nhóm có ý nghĩa rõ (đầu trang, bài viết, chân trang), hãy ưu tiên thẻ ngữ nghĩa như header, article, footer (bài Ngữ nghĩa).

Nhóm nội dung

<div style="background: #e3f2fd; padding: 12px; border-radius: 8px;">
  <h3>Khoa Khoa học Tự nhiên và Công nghệ</h3>
  <p>Đào tạo ngành Công nghệ thông tin, Sư phạm Tin học...</p>
</div>
Kết quả hiển thị

Khoa Khoa học Tự nhiên và Công nghệ

Đào tạo ngành Công nghệ thông tin, Sư phạm Tin học...

Căn giữa

<div style="width: 60%; margin: 0 auto; background: #fff3e0; text-align: center; padding: 10px;">Div căn giữa bằng margin: 0 auto</div>
Kết quả hiển thị
Div căn giữa bằng margin: 0 auto

Xếp div cạnh nhau

<div style="display: flex; gap: 10px;">
  <div style="flex: 1; background: #c8e6c9; padding: 10px;">Cột 1</div>
  <div style="flex: 1; background: #ffecb3; padding: 10px;">Cột 2</div>
  <div style="flex: 1; background: #f8bbd0; padding: 10px;">Cột 3</div>
</div>
Kết quả hiển thị
Cột 1
Cột 2
Cột 3
Mẹo hay

Tránh “div soup” (lồng quá nhiều div không cần thiết): mã khó đọc và nặng hơn.

Thực hành
  1. Tạo thẻ hồ sơ sinh viên bằng div có viền bo góc.
  2. Tạo 3 thẻ khóa học xếp ngang bằng flex.
  3. Căn giữa một hộp thông báo rộng 400px.
Tóm tắt bài học
  • div là hộp block không mang ngữ nghĩa.
  • Dùng cùng class và CSS để định dạng.
  • margin auto, flex để căn giữa và xếp ngang.