HTML ngữ nghĩa: thẻ, cấu trúc trang và khả năng tiếp cận

HTML ngữ nghĩa là gì

HTML ngữ nghĩa là chọn mỗi thẻ theo đúng bản chất của nội dung: điều hướng nằm trong <nav>, nội dung chính trong <main>, một bài blog trong <article>. Các thẻ này trông như những khối bình thường, nhưng chúng cho trình duyệt, trình đọc màn hình và công cụ tìm kiếm biết mỗi phần của trang làm gì. Đây là một trang hoàn chỉnh dựng từ các thẻ bố cục ngữ nghĩa, mỗi thẻ được viền và gắn nhãn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Xóa phần tử <style> thì trang trông như chữ thường, nhưng cấu trúc vẫn còn đó cho bất kỳ ai đọc code, và cho phần mềm đọc trang mà không nhìn vào điểm ảnh.

Các thẻ bố cục ngữ nghĩa

Mỗi thẻ có trang riêng với nhiều chi tiết hơn: header, nav, section và footer. Trang này nói về cách chúng ghép lại với nhau.

Sao không dùng luôn div

Một trang chỉ dựng từ các phần tử <div> có thể trông y hệt một trang ngữ nghĩa. Khác biệt nằm ở những gì mã HTML nói lên. Nhấn các nút để viền các phần tử mang ý nghĩa trong mỗi phiên bản:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Phiên bản div tìm được 0, phiên bản ngữ nghĩa tìm được 4. Đó là thứ mà công nghệ hỗ trợ nhìn thấy: người dùng trình đọc màn hình có thể nhảy thẳng tới phần điều hướng hoặc nội dung chính trên trang ngữ nghĩa, còn trên trang div thì phải đọc qua mọi thứ. Tên class như class="nav" chẳng có ý nghĩa gì với trình duyệt.

<div> vẫn là lựa chọn đúng cho những khối chỉ dùng để định dạng hoặc dàn bố cục, như lớp bọc flex .cols trong ví dụ đầu tiên.

main, article và aside

<main> bọc phần riêng của trang này và chỉ xuất hiện một lần. Bên trong nó, <article> đánh dấu nội dung vẫn có nghĩa khi được sao chép riêng sang trang web khác, còn <aside> đánh dấu nội dung có liên quan nhưng có thể bỏ đi mà không làm hỏng bài viết:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

Bài viết có <header> và <footer> riêng. Hai thẻ này không chỉ dùng ở cấp trang: mỗi thẻ mở đầu hoặc kết thúc article hay section gần nhất chứa nó. Phần tử <time datetime> cho ngày tháng ở dạng máy đọc được, trong khi vẫn hiển thị ở dạng con người đọc được.

Kiểm tra dàn ý tiêu đề

Tiêu đề là nửa còn lại của cấu trúc. Người dùng trình đọc màn hình thường di chuyển trong trang theo từng tiêu đề, nên các cấp tiêu đề phải đọc như một mục lục và không bỏ cấp nào. Script này in ra dàn ý của trang mà nó chạy trong đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

h4 dưới "Brewing" bỏ qua một cấp. Đổi nó thành h3 và dàn ý sẽ đọc trơn tru. Hãy chọn cấp tiêu đề theo cấu trúc, và đổi cỡ chữ bằng CSS nếu bạn muốn chúng to hơn hay nhỏ hơn.

Các thẻ ngữ nghĩa khác

Ngữ nghĩa không chỉ là chuyện bố cục. Các thẻ cấp văn bản này cũng mang ý nghĩa:

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Rê chuột lên chữ viết tắt "W3C" để thấy dạng đầy đủ trong tooltip.

Lỗi thường gặp

• Dùng một thẻ vì vẻ ngoài của nó. <blockquote> dành cho trích dẫn, không phải để thụt lề; <h3> là một cấp tiêu đề, không phải chữ đậm cỡ vừa. Hãy định dạng bằng CSS.
• Bọc mọi thứ trong <section>. Section nên có tiêu đề và chủ đề. Nếu bạn cần một khối để định dạng, hãy dùng <div>.
• Nhiều hơn một <main> hiển thị. Giữ một main mỗi trang, và đừng bao giờ lồng nó trong <article>, <aside>, <header>, <nav> hay <footer>.
• Đặt mọi danh sách liên kết vào <nav>. Chỉ dùng cho các khối điều hướng chính, như menu của trang web hoặc mục lục. Vài liên kết ở chân trang không cần nav.
• Phần tử <div> bấm được. Một <div onclick> không thể tới được bằng bàn phím. Dùng <button> cho hành động và <a href> cho điều hướng.