HTML Semantic là gì? Tại sao cần dùng thẻ đúng ngữ nghĩa?

Semantic HTML là gì?

Bạn có biết rằng Google đọc HTML của bạn để hiểu trang web nói về điều gì không? Và cách bạn đặt tên cho các thẻ HTML ảnh hưởng trực tiếp đến thứ hạng tìm kiếm?

Semantic HTML là việc sử dụng các thẻ HTML mô tả ý nghĩa và mục đích của nội dung, không chỉ là cách trình bày. "Semantic" có nghĩa là "liên quan đến ngữ nghĩa".

Thẻ non-semantic: <div>, <span> — không nói lên gì về nội dung bên trong
Thẻ semantic: <header>, <nav>, <article> — rõ ràng mô tả vai trò của nội dung

Các thẻ semantic được giới thiệu trong HTML5 (2014) và hiện đã được hỗ trợ đầy đủ trên mọi trình duyệt hiện đại.

Thẻ semantic vs thẻ non-semantic

Xem sự khác biệt giữa hai cách viết HTML cho cùng một trang:

<!-- Cách cũ: chỉ dùng div (không nên) -->
<div class="header">
  <div class="logo">VietCode</div>
  <div class="nav">
    <div class="nav-links">...</div>
  </div>
</div>
<div class="main-content">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- Cách đúng: dùng thẻ semantic (nên làm) -->
<header>
  <a href="/">VietCode</a>
  <nav>
    <ul>...</ul>
  </nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Cả hai trông giống nhau trên trình duyệt, nhưng khác hoàn toàn về ý nghĩa đối với công cụ tìm kiếm và screen reader.

Các thẻ semantic HTML5 quan trọng nhất

header, nav, main

<header>: phần đầu của trang hoặc section — thường chứa logo, tiêu đề, navigation. Có thể xuất hiện nhiều lần trong một trang (ví dụ: header của article cũng dùng được)
<nav>: chứa các liên kết điều hướng chính. Không phải mọi nhóm link đều là nav — chỉ dùng cho navigation quan trọng
<main>: nội dung chính của trang. Chỉ được có một thẻ <main> duy nhất trên mỗi trang

article, section, aside

<article>: nội dung độc lập, có thể tồn tại riêng biệt — bài blog, tin tức, bình luận, card sản phẩm. Câu hỏi kiểm tra: "Nội dung này có ý nghĩa nếu tách ra khỏi trang không?" Nếu có, dùng article
<section>: nhóm nội dung theo chủ đề, thường có heading. Khác article: section không nhất thiết phải có ý nghĩa khi đứng độc lập
<aside>: nội dung phụ, liên quan gián tiếp đến nội dung chính — sidebar, quảng cáo, bài viết liên quan

footer, figure, time

<footer>: phần cuối của trang hoặc section — thường chứa copyright, liên kết, thông tin liên hệ
<figure> + <figcaption>: hình ảnh, biểu đồ, hoặc code block kèm chú thích
<time>: ngày/giờ có thể đọc bằng máy — dùng thuộc tính datetime cho định dạng chuẩn

Ví dụ layout trang web với semantic HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>VietCode - Học lập trình tiếng Việt</title>
</head>
<body>

  <header>
    <a href="/" class="logo">VietCode</a>
    <nav>
      <ul>
        <li><a href="/articles">Bài viết</a></li>
        <li><a href="/lo-trinh">Lộ trình</a></li>
        <li><a href="/about">Giới thiệu</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Python là gì? Tại sao nên học Python</h1>
        <time datetime="2026-04-27">27 tháng 4, 2026</time>
      </header>

      <section>
        <h2>Python là gì?</h2>
        <p>Python là ngôn ngữ lập trình bậc cao...</p>
        <figure>
          <img src="python-logo.png" alt="Logo Python">
          <figcaption>Logo chính thức của ngôn ngữ Python</figcaption>
        </figure>
      </section>

      <section>
        <h2>Ứng dụng thực tế của Python</h2>
        <p>Python được dùng trong...</p>
      </section>
    </article>

    <aside>
      <h2>Bài viết liên quan</h2>
      <ul>
        <li><a href="/articles/ham-trong-python">Hàm trong Python</a></li>
        <li><a href="/articles/vong-lap-python">Vòng lặp Python</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 VietCode. All rights reserved.</p>
    <address>
      Liên hệ: <a href="mailto:contact@vietcode.io">contact@vietcode.io</a>
    </address>
  </footer>

</body>
</html>

Lợi ích của semantic HTML

1. SEO (Search Engine Optimization)
Công cụ tìm kiếm như Google đọc cấu trúc semantic để hiểu nội dung trang. Nội dung trong <article> và <main> được đánh giá cao hơn trong <div> ngẫu nhiên. Heading hierarchy (<h1> đến <h3>) giúp Google hiểu cấu trúc chủ đề của bài viết.

2. Accessibility (Khả năng tiếp cận)
Người dùng khiếm thị dùng screen reader (phần mềm đọc màn hình) để duyệt web. Screen reader thông báo khi gặp <nav> ("navigation"), <main> ("main content"), <article>... giúp người dùng hiểu cấu trúc và điều hướng dễ dàng hơn.

3. Code dễ đọc và bảo trì
Developer khác đọc code của bạn sẽ lập tức hiểu cấu trúc trang mà không cần đọc class name. CSS cũng sạch hơn: header { } thay vì .wrapper-header-div { }.

4. Tương thích tốt hơn
Trình duyệt hiểu semantic tags và áp dụng default styles phù hợp, giúp responsive design hoạt động tốt hơn trên nhiều thiết bị.

Tổng kết

Bắt đầu dùng semantic HTML ngay từ hôm nay — không cần refactor toàn bộ code cũ, chỉ cần áp dụng cho code mới:

Thay <div class="header"> bằng <header>
Thay <div class="nav"> bằng <nav>
Thay <div class="content"> bằng <main> hoặc <article>
Thay <div class="footer"> bằng <footer>

Xem thêm: HTML là gì? Hướng dẫn HTML cơ bản | Các thẻ HTML cơ bản | CSS là gì?