HTML5 Semantics (Ngữ nghĩa) - Các thẻ ngữ nghĩa

HTML5 Semantics đề cập đến các thẻ mang ý nghĩa ngữ nghĩa, mô tả ý nghĩa nội dung chứ không chỉ giao diện. Giúp SEO, accessibility (độ truy cập), và maintainability.

So sánh

• Non-semantic: <div>, <span> - chỉ container vô nghĩa
• Semantic: <header>, <footer>, <article>, <section>, <nav>, <aside>, <main>, <figure>, <figcaption>, <details>, <summary>, <mark>, <time>...

Bảng thẻ ngữ nghĩa HTML5 phổ biến

Ví dụ cấu trúc trang semantic

<!DOCTYPE html>
<html>
<style>
  * { box-sizing: border-box; }
  body { font-family: sans-serif; line-height: 1.6; margin: 0; background: #f5f5f5; }
  header { background: #2c3e50; color: white; padding: 1rem; text-align: center; }
  nav { background: #34495e; padding: 1rem; }
  nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; justify-content: center; }
  nav a { color: white; text-decoration: none; }
  .container { display: flex; max-width: 1200px; margin: 0 auto; padding: 1rem; gap: 1rem; }
  main { flex: 3; background: white; padding: 1rem; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  aside { flex: 1; background: white; padding: 1rem; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  article { border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1rem; }
  article:last-child { border: none; }
  footer { background: #2c3e50; color: white; text-align: center; padding: 1rem; margin-top: 1rem; }
  figure { margin: 1rem 0; text-align: center; }
  figcaption { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }
  mark { background: #ffeb3b; padding: 0 0.2em; }
</style>
<body>
<header>
  <h1>Blog Công Nghệ</h1>
  <p>Chia sẻ kiến thức lập trình</p>
</header>
<nav>
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</nav>
<div class="container">
  <main>
    <article>
      <h2>Tìm hiểu HTML5 Semantics</h2>
      <p>Sử dụng thẻ ngữ nghĩa giúp cải thiện SEO và accessibility đáng kể.</p>
      <figure>
        <svg width="300" height="150" viewBox="0 0 300 150">
          <rect x="10" y="10" width="280" height="130" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2" rx="5"/>
          <text x="150" y="40" text-anchor="middle" fill="#2c3e50" font-size="16"><header></text>
          <text x="150" y="75" text-anchor="middle" fill="#3498db" font-size="14"><nav> | <main> | <aside></text>
          <text x="150" y="110" text-anchor="middle" fill="#2c3e50" font-size="16"><footer></text>
        </svg>
        <figcaption>Hình 1: Cấu trúc trang web semantic tiêu chuẩn</figcaption>
      </figure>
    </article>
    <article>
      <h2>Lợi ích chính</h2>
      <ul>
        <li>SEO: Google hiểu cấu trúc nội dung tốt hơn</li>
        <li>Accessibility: Screen reader đọc đúng ngữ cảnh</li>
        <li>Maintainability: Code dễ đọc, dễ bảo trì</li>
        <li>Developer Experience: Team hiểu nhau qua tên thẻ</li>
      </ul>
    </article>
  </main>
  <aside>
    <h3>Bài viết liên quan</h3>
    <ul style="list-style:none; padding:0">
      <li style="margin:0.5rem 0"><a href="#">HTML5 New Elements</a></li>
      <li style="margin:0.5rem 0"><a href="#">ARIA & Accessibility</a></li>
      <li style="margin:0.5rem 0"><a href="#">SEO Best Practices</a></li>
    </ul>
  </aside>
</div>
<footer>
  © 2024 Blog Công Nghệ. Mọi quyền được bảo lưu.
</footer>
</body>
</html>

Kết quả

Một trang web có cấu trúc semantic rõ ràng: header, nav, main (chứa articles), aside, footer. Screen reader và search engine hiểu được ý nghĩa từng vùng.

Best practice: Luôn dùng thẻ semantic khi có thể. Chỉ dùng <div>/<span> khi không có thẻ semantic phù hợp (chỉ để style/layout).