Login

HTML ngữ nghĩa (semantic HTML) là gì và vì sao bạn nên dùng

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Nhiều người mới học web viết cả trang bằng thẻ div, trang vẫn hiển thị đẹp nên nghĩ vậy là đủ. Nhưng trình duyệt, công cụ tìm kiếm và trình đọc màn hình không nhìn thấy "đẹp", chúng đọc cấu trúc. Đó là lý do HTML ngữ nghĩa tồn tại.

HTML ngữ nghĩa là gì?

HTML ngữ nghĩa là việc chọn thẻ theo ý nghĩa của nội dung thay vì chỉ theo hình thức. Thẻ <nav> nói rằng đây là khu vực điều hướng, thẻ <article> nói rằng đây là một bài viết độc lập. Trong khi đó <div> và <span> không mang ý nghĩa gì, chúng chỉ là các hộp chứa chung.

Hãy so sánh hai đoạn mã sau. Đoạn đầu dùng toàn div:

<div class='header'>
  <div class='menu'>...</div>
</div>
<div class='content'>...</div>
<div class='footer'>...</div>

Đoạn thứ hai dùng thẻ ngữ nghĩa:

<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Giao diện có thể giống hệt nhau, nhưng đoạn thứ hai tự giải thích được cấu trúc của trang mà không cần đọc tên class.

Các thẻ ngữ nghĩa thường gặp

  • header: phần đầu của trang hoặc của một khối nội dung, thường chứa logo và tiêu đề.
  • nav: nhóm liên kết điều hướng chính.
  • main: nội dung chính của trang, chỉ nên có một thẻ main trên mỗi trang.
  • section: một phần có chủ đề riêng, nên đi kèm tiêu đề h2 hoặc h3.
  • article: nội dung có thể đứng độc lập, như bài blog hoặc một bình luận.
  • aside: nội dung phụ liên quan, ví dụ thanh bên hoặc ghi chú.
  • footer: phần chân trang hoặc chân khối nội dung.
  • figure và figcaption: hình ảnh kèm chú thích.

Lợi ích thực tế

1. Hỗ trợ SEO

Công cụ tìm kiếm phân tích cấu trúc trang để hiểu đâu là nội dung chính, đâu là phần phụ. Cấu trúc rõ ràng giúp việc này dễ hơn, dù đây không phải là "công thức thần kỳ" để lên top.

2. Khả năng tiếp cận

Người dùng trình đọc màn hình có thể nhảy thẳng đến vùng main hoặc nav, thay vì nghe lần lượt toàn bộ trang. Nếu chỉ dùng div, họ gần như mất công cụ này.

3. Mã dễ đọc, dễ bảo trì

Khi đọc lại mã sau vài tháng hoặc bàn giao cho đồng nghiệp, cấu trúc ngữ nghĩa giúp bạn hiểu ngay trang được tổ chức thế nào. Bạn cũng đỡ phải đặt tên class cho mọi thứ.

4. Tính năng có sẵn của trình duyệt

Thẻ <button> tự có hành vi focus bằng bàn phím và kích hoạt bằng phím Enter hoặc Space. Nếu bạn dùng <div onclick> làm nút, bạn phải tự viết lại toàn bộ những điều đó, và rất dễ thiếu sót.

Những lỗi hay gặp

  1. Dùng sai thẻ chỉ vì kiểu dáng mặc định: ví dụ dùng h3 cho chữ nhỏ trong khi nó không phải tiêu đề. Kiểu dáng hãy để CSS lo.
  2. Nhảy cấp tiêu đề: đang ở h2 mà nhảy sang h4. Hãy giữ thứ tự h1, h2, h3 hợp lý như đề cương của một cuốn sách.
  3. Có nhiều h1: trang thường chỉ nên có một h1 mô tả chủ đề chính.
  4. Lạm dụng section: nếu chỉ cần một hộp để căn chỉnh bố cục thì div mới là lựa chọn phù hợp.
  5. Dùng thẻ a làm nút bấm: liên kết dùng để chuyển trang, nút bấm dùng để thực hiện hành động. Hãy chọn đúng loại.

Cách tập thói quen

Trước khi viết thẻ, hãy tự hỏi: "Nội dung này là gì?" thay vì "Tôi muốn nó trông thế nào?". Nếu có thẻ phù hợp với câu trả lời, hãy dùng nó. Nếu không có, div hoặc span là hoàn toàn bình thường. Bạn cũng có thể thử tắt CSS của trang bằng công cụ dành cho nhà phát triển: một trang ngữ nghĩa tốt vẫn đọc được thứ tự và cấu trúc hợp lý ngay cả khi không có kiểu dáng.

Ví dụ: một bài viết hoàn chỉnh

Hãy xem một khối bài viết dùng thẻ ngữ nghĩa. Bạn sẽ thấy mỗi thẻ có đúng một vai trò, và không cần thêm class nào để giải thích:

<article>
  <header>
    <h2>Học HTML trong một tuần</h2>
    <p>Đăng ngày <time datetime='2025-01-15'>15/01/2025</time></p>
  </header>
  <p>Nội dung bài viết...</p>
  <figure>
    <img src='so-do.png' alt='Sơ đồ cấu trúc trang'>
    <figcaption>Sơ đồ cấu trúc một trang web</figcaption>
  </figure>
</article>

Chú ý thẻ time với thuộc tính datetime giúp máy hiểu chính xác ngày tháng, còn thuộc tính alt của ảnh giúp người dùng không nhìn được ảnh vẫn nắm nội dung.

Một thói quen tốt khác là đọc tài liệu về HTML trên các trang tra cứu uy tín như MDN Web Docs khi chưa chắc về một thẻ. Việc tra cứu đều đặn sẽ giúp bạn nhớ lâu hơn nhiều so với học thuộc lòng danh sách thẻ.

Kết luận

HTML ngữ nghĩa không khó, chỉ cần bạn đổi cách nghĩ từ "trông thế nào" sang "là cái gì". Cái giá phải trả gần như bằng không, còn lợi ích về SEO, khả năng tiếp cận và bảo trì thì kéo dài suốt vòng đời dự án.

Nếu muốn nắm vững nền tảng HTML, CSS rồi tiến tới dự án thực tế, bạn có thể xem lộ trình học có hướng dẫn trong các khóa học trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment