HTML Semantic

Trong HTML, Semantic (ngữ nghĩa) không chỉ là đặt thẻ cho đẹp mà còn là cách giúp trình duyệt, công cụ tìm kiếm và người dùng hiểu nội dung. Việc viết HTML đúng ngữ nghĩa giúp code dễ bảo trì, hỗ trợ SEO và cải thiện khả năng truy cập (Accessibility).

HTML Semantic là gì?

• HTML Semantic là tập hợp các thẻ có ý nghĩa rõ ràng, thể hiện vai trò của nội dung.
• Khi nhìn vào tên thẻ, chúng ta có thể đoán được nội dung của nó là gì: tiêu đề, đoạn văn, hình ảnh, danh sách...

Ví dụ, một đoạn văn bản không ngữ nghĩa:

Cà phê giúp bạn tỉnh táo và tăng khả năng tập trung.

Ví dụ có ngữ nghĩa:

<p>Cà phê giúp bạn tỉnh táo và tăng khả năng tập trung.</p>
<!-- hoặc -->
<h1>Cà phê giúp bạn tỉnh táo và tăng khả năng tập trung.</h1>

Một số thẻ HTML có ngữ nghĩa phổ biến

• h1 – h6: Tiêu đề các cấp
• p: Đoạn văn
• img: Hình ảnh
• strong: Nhấn mạnh sự quan trọng
• em: Nhấn mạnh trọng âm, ý nghĩa
• ... và nhiều thẻ khác

Các thẻ Semantic trong HTML5

• <header>: Phần đầu trang hoặc đầu của một section/article, thường chứa logo, tiêu đề, menu.

<header>
  <h1>Blog Lập Trình</h1>
  <nav>...</nav>
</header>

• <nav>: Khu vực điều hướng (menu liên kết chính).

<nav>
  <ul>
    <li><a href="/">Trang chủ</a></li>
  </ul>
</nav>

• <main>: Nội dung chính của trang (chỉ 1 lần mỗi trang). Không gồm header, footer hay menu phụ.

<main>
  <h1>Bài viết chính</h1>
  <p>...</p>
</main>

• <article>: Nội dung độc lập, có thể tách ra và vẫn có ý nghĩa riêng (bài viết, post blog, tin tức).

<article>
  <h2>Bài viết A</h2>
  <p>...</p>
</article>

• <section>: Nhóm nội dung có chủ đề liên quan trong trang hoặc trong article.

<section>
  <h3>Giới thiệu khóa học</h3>
  <p>...</p>
</section>

• <aside>: Nội dung phụ, không phải nội dung chính (sidebar, quảng cáo, liên kết phụ).

<aside>
  <h3>Bài viết liên quan</h3>
</aside>

• <footer>: Phần chân trang hoặc chân section/article. Thường chứa bản quyền, thông tin liên hệ.

<footer>
  <p>&copy; 2025 Công ty ABC</p>
</footer>

• <figure>: Dùng để gói hình ảnh, biểu đồ, video... cùng chú thích.

<figure>
  <img src="https://placehold.co/300x200" alt="Ảnh minh họa HTML Semantic" />
  <figcaption>Minh họa HTML Semantic</figcaption>
</figure>

• <figcaption>: Chú thích cho nội dung trong <figure>.

<figcaption>Minh họa HTML Semantic</figcaption>

• <mark>: Đánh dấu hoặc highlight một đoạn văn bản.

<p>Sản phẩm này đang <mark>giảm giá</mark> 50%.</p>

HTML có thẻ không mang ngữ nghĩa?

Có. <div> và <span> chỉ đóng vai trò bao bọc, không thể hiện ý nghĩa cụ thể.

Vì sao phải dùng HTML đúng ngữ nghĩa?

• Dễ đọc – dễ bảo trì: Bạn và đồng nghiệp hiểu code nhanh hơn.
• SEO tốt hơn: Công cụ tìm kiếm dễ hiểu nội dung trang.
• Accessibility: Hỗ trợ trình đọc màn hình, người khuyết tật tiếp cận web.

Ưu tiên Styles hay Semantics?

• Đúng ngữ nghĩa trước, style sau.
• Không dùng thẻ heading (h1 – h6) chỉ để làm chữ to hay đậm.
• Nếu cần chữ lớn mà không phải tiêu đề → dùng CSS hoặc <p>.
• Trong tiêu đề có từ khóa quan trọng → có thể bọc bằng <strong> để tăng ngữ nghĩa.

Ví dụ:

<h1>Khóa học <strong>HTML</strong> cơ bản cho người mới</h1>
<p class="intro">
  Đây là đoạn giới thiệu <strong>rất quan trọng</strong> của khóa học.
</p>

Kết luận