Thẻ span trong HTML: định dạng một phần chữ, div và span

Thẻ span làm gì

<span> bọc một đoạn chữ bên trong một dòng để bạn định dạng nó hoặc tìm nó bằng JavaScript. Nó là bản inline của <div>: không có ý nghĩa, không có giao diện mặc định, và không bắt đầu dòng mới.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

Câu vẫn nằm trên một dòng. Chỉ những từ được bọc là thay đổi.

div và span

Hai thẻ này có cùng mục đích (một khối chứa không mang ý nghĩa) và khác nhau ở cách chúng nằm trên trang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

Div chia câu thành ba dòng và trải dài hết trang; span nằm yên trong câu và chỉ ôm sát chữ của nó.

Thêm một khác biệt: <div> không được đặt bên trong <p>, và trình duyệt sẽ đóng đoạn văn sớm nếu bạn thử, còn span thì đặt được ở bất cứ đâu có chữ. Xem thêm ở trang div.

Định dạng span: cái gì có tác dụng, cái gì không

Màu, font, nền và padding theo chiều ngang đều có tác dụng trên span. Kích thước thì không: phần tử inline bỏ qua width, height và margin trên, dưới. Đổi nó thành inline-block để đặt kích thước mà vẫn giữ nó trong dòng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Span đầu tiên chỉ rộng bằng các chữ của nó. Span thứ hai rộng đúng 120 và cao 40 pixel mà vẫn nằm trong câu.

Span với JavaScript

Span là chỗ giữ chỗ quen thuộc cho một giá trị do script điền vào, như bộ đếm hay tên người dùng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Chỉ con số thay đổi; phần còn lại của câu giữ nguyên.

Khi nào một thẻ cụ thể tốt hơn span

Span không có ý nghĩa, nên trình đọc màn hình đọc nó như chữ thường. Khi các từ có một vai trò, hãy dùng thẻ dành cho vai trò đó và định dạng tùy ý:

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

Trang chữ đậm giải thích sự khác nhau giữa <strong>, <b>, <em> và <i>.

Lỗi thường gặp

• Đặt width cho span thường. Giá trị này bị bỏ qua. Hãy dùng display: inline-block.
• Đặt div hoặc đoạn văn bên trong span. HTML không hợp lệ và làm ngắt dòng. Đổi span bên ngoài thành div.
• Span bấm được. Giống div, span có onclick không thể tới được bằng bàn phím. Hãy dùng <button> hoặc liên kết.
• Mỗi kiểu định dạng một span. Nếu cả đoạn văn hay cả phần cần định dạng, hãy đặt class lên chính <p> hoặc khối chứa thay vì bọc chữ bên trong bằng span.