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

Semantic HTML là gì?

Dùng đúng thẻ HTML giúp Google hiểu nội dung trang của bạn tốt hơn — từ đó xếp hạng cao hơn và tiếp cận được nhiều người dùng hơn. Nếu bạn đang dùng <div> cho tất cả mọi thứ, bài viết này sẽ thay đổi cách bạn viết HTML.

Semantic HTML là việc dùng các thẻ HTML mô tả ý nghĩa và vai trò của nội dung, thay vì chỉ quan tâm đến 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 điều gì về nội dung bên trong
Thẻ semantic: <header>, <nav>, <article> — mô tả rõ vai trò của nội dung

Các thẻ semantic được giới thiệu từ 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

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

<!-- Cách cũ: toàn dùng div -->
<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 -->
<header>
  <a href="/">VietCode</a>
  <nav>
    <ul>...</ul>
  </nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Trên trình duyệt, cả hai trông giống hệt nhau. Nhưng với Google và phần mềm đọc màn hình, đây là hai thế giới hoàn toàn khác nhau.

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 đề, điều hướng. Có thể xuất hiện nhiều lần trong một trang
<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 cần <nav> — chỉ dùng cho điều hướng quan trọng
<main>: nội dung chính của trang. Mỗi trang chỉ được có một thẻ <main> duy nhất

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. Thử hỏi: "Nội dung này có ý nghĩa nếu tách ra khỏi trang không?" Nếu có thì dùng <article>
<section>: nhóm nội dung theo chủ đề, thường có heading. Khác với <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ờ dạng máy đọc được — dùng thuộc tính datetime để chuẩn hóa định dạng

So sánh nhanh: thẻ nào dùng khi nào?

Thẻ	Dùng khi	Không dùng khi
`<article>`	Nội dung có thể đứng độc lập (bài viết, tin tức)	Nội dung phụ thuộc vào context trang
`<section>`	Nhóm nội dung có chủ đề, kèm heading	Chỉ để thêm style — dùng div thay thế
`<nav>`	Điều hướng chính của trang	Mọi nhóm link thông thường
`<aside>`	Sidebar, bài liên quan, quảng cáo	Nội dung trực tiếp liên quan đến main

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 tốt hơn
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 so với <div> vô danh. Chuỗi heading từ <h1> đến <h3> giúp Google nắm được cấu trúc chủ đề bài viết.

2. Accessibility (Khả năng tiếp cận)
Người dùng khiếm thị dùng screen reader để duyệt web. Khi gặp <nav>, phần mềm thông báo "navigation"; gặp <main> thì thông báo "main content" — giúp họ điều hướng nhanh mà không cần đọc từng dòng.

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

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

Tổng kết

Không cần refactor toàn bộ code cũ ngay — chỉ cần áp dụng semantic HTML cho code mới từ hôm nay:

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ì?