Thẻ div trong HTML: div là gì, div class, bố cục và CSS

Thẻ div dùng để làm gì

<div> (viết tắt của division) là một khối chứa chung. Div nhóm các phần tử lại để bạn định dạng, đặt vị trí hoặc điều khiển chúng bằng script như một khối duy nhất. Tự bản thân div trông như không có gì: không margin, không viền, không font đặc biệt. Div là phần tử khối (block), nên nó bắt đầu ở dòng mới và trải hết chiều rộng còn trống.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Xóa dòng border trong phần style là các div biến mất: đó là giao diện mặc định của div. Mọi thứ div thể hiện ra mắt người xem đều đến từ CSS.

div class và id

Div thường được gắn một class, là cái tên mà CSS nhắm tới. Các div dùng chung class thì dùng chung kiểu định dạng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card định dạng cả hai khối, còn .card.highlight thêm viền xanh cho div có cả hai class. Dùng id khi bạn cần trỏ tới đúng một div cụ thể, ví dụ làm đích của liên kết (href="#pro"). Trang thuộc tính so sánh class và id chi tiết hơn.

Xếp các div cạnh nhau

Vì div là phần tử khối nên chúng xếp chồng theo chiều dọc. Để đặt chúng thành một hàng, hãy biến phần tử cha thành flex container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex trên .row xếp các phần tử con thành hàng, gap tạo khoảng cách giữa chúng, còn các giá trị flex chia chiều rộng (ở đây là 1 : 2 : 1). Mẫu cha và con này là cách dùng div phổ biến nhất trên các trang web thực tế. Để căn giữa một div, xem cách căn giữa div.

Div lồng nhau

Div có thể chứa div khác ở bất kỳ độ sâu nào. Mỗi cấp là một khối nằm trong một khối, và bạn sẽ thấy rõ điều đó khi cho mỗi div một đường viền và chút padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Hãy giữ số tầng lồng nhau ít nhất mà bố cục cho phép. Mỗi lớp bọc thêm là thêm một khối phải tính đến khi margin hay chiều rộng không chạy như bạn mong đợi.

Dùng div hay thẻ ngữ nghĩa?

Div không nói gì về nội dung bên trong. HTML có những thẻ làm cùng việc nhóm nội dung nhưng còn cho biết nhóm đó là gì:

Các thẻ này trông y hệt div cho đến khi bạn định dạng chúng, nhưng trình đọc màn hình sẽ đọc tên chúng và cho người dùng nhảy qua lại giữa chúng, còn công cụ tìm kiếm thì đọc được cấu trúc trang. Dùng div cho những khối chỉ có mục đích dàn bố cục hoặc định dạng, như lớp bọc .row ở trên. Trang HTML ngữ nghĩa giới thiệu đầy đủ các thẻ này.

Div không phải là nút bấm

Một div có trình xử lý sự kiện click trông như bấm được với người dùng chuột, nhưng người dùng bàn phím không thể tới được nó bằng Tab hay bấm nó bằng Enter, và trình đọc màn hình cũng không đọc nó là một nút:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Dùng <button> cho hành động và <a href> cho điều hướng. Cả hai đều nhận focus và dùng được với bàn phím mà bạn không phải làm thêm gì.

Lỗi thường gặp

• Đặt div bên trong <p>. Đoạn văn bị đóng trước div. Hãy để div làm phần tử bên ngoài, hoặc dùng <span> bên trong đoạn văn.
• Trang toàn div. Một trang chỉ gồm div thì không có cấu trúc nào cho trình đọc màn hình. Thay div bằng <header>, <nav>, <main> và <footer> ở những chỗ phù hợp.
• Div bấm được. Hãy dùng <button> hoặc liên kết thay thế.
• Nghĩ rằng div chỉ rộng bằng chữ bên trong. Div chiếm toàn bộ chiều rộng. Dùng display: inline-block, width: fit-content hoặc <span> nếu bạn muốn nó co lại.
• Dùng lại một id cho nhiều div. Dùng class cho những gì lặp lại.