Thẻ ngữ nghĩa (Semantic HTML)

Thẻ ngữ nghĩa cho biết ý nghĩa của nội dung: đây là đầu trang, bài viết, menu hay chân trang. Dùng đúng giúp website thân thiện với Google, trình đọc màn hình và dễ bảo trì.

25 phútCơ bản
Bạn sẽ học được
  • Hiểu thế nào là HTML ngữ nghĩa
  • Dùng header, nav, main, article, section, aside, footer
  • Dùng figure, time, details, summary
  • Thay div bằng thẻ phù hợp

Khái niệm và lý thuyết

So sánh <div id="menu"> với <nav>: cả hai trông giống nhau, nhưng nav nói rõ với máy móc “đây là điều hướng”. Người dùng trình đọc màn hình có thể nhảy thẳng tới nav, main; Google hiểu đâu là nội dung chính để xếp hạng.

ThẻÝ nghĩa
headerPhần đầu trang hoặc đầu bài viết
navNhóm liên kết điều hướng
mainNội dung chính, duy nhất mỗi trang
articleNội dung độc lập: bài viết, tin, bình luận
sectionMột phần có chủ đề, thường có đề mục
asideNội dung phụ, liên quan
footerChân trang, chân bài
timeNgày giờ máy đọc được

Cấu trúc một bài viết

<main>
  <article>
    <header>
      <h1>Mùa hoa ban Tây Bắc</h1>
      <p>Đăng ngày <time datetime="2026-03-15">15/3/2026</time></p>
    </header>
    <section>
      <h2>Thời điểm ngắm hoa</h2>
      <p>...</p>
    </section>
    <footer>Tác giả: Tự Học Tin</footer>
  </article>
  <aside>Bài viết liên quan</aside>
</main>

details và summary

<details>
  <summary>HTML ngữ nghĩa có làm trang đẹp hơn không?</summary>
  <p>Không trực tiếp. Nó làm trang dễ hiểu hơn với máy, còn giao diện vẫn do CSS quyết định.</p>
</details>
Kết quả hiển thị
HTML ngữ nghĩa có làm trang đẹp hơn không?

Không trực tiếp. Nó làm trang dễ hiểu hơn với máy, còn giao diện vẫn do CSS quyết định.

Bấm vào câu hỏi để mở/đóng: hộp hỏi đáp (FAQ) không cần JavaScript.

Mẹo hay

Cài tiện ích Accessibility Insights hoặc dùng Lighthouse trong DevTools để kiểm tra trang có dùng landmark (header, nav, main) đúng không.

Thực hành
  1. Viết lại một trang dùng toàn div sang thẻ ngữ nghĩa.
  2. Tạo trang tin có 3 article, mỗi article có header, time.
  3. Làm mục Câu hỏi thường gặp bằng details/summary.
Tóm tắt bài học
  • Thẻ ngữ nghĩa nói lên ý nghĩa nội dung.
  • Lợi ích: SEO, trợ năng, dễ bảo trì.
  • details/summary tạo nội dung thu gọn không cần JS.