Bài 1.3: Semantic HTML và tầm quan trọng

Chào mừng các bạn quay trở lại với chuỗi bài viết về Lập trình Web Front-end! Trong Bài 1.1 và 1.2, chúng ta đã làm quen với cấu trúc cơ bản của một trang HTML và cách thêm nội dung đơn giản. Hôm nay, chúng ta sẽ đi sâu vào một khía cạnh cực kỳ quan trọng, đó là Semantic HTML và vì sao nó lại cần thiết đến vậy trong thế giới web hiện đại.

Bạn có bao giờ nghĩ rằng, ngoài việc làm cho trang web trông đẹp mắt bằng CSS, thì bản thân cấu trúc HTML cũng có thể truyền tải ý nghĩa của nội dung không? Đó chính là lúc Semantic HTML phát huy tác dụng!

Semantic HTML là gì?

Đơn giản mà nói, Semantic HTML là việc sử dụng các thẻ HTML sao cho chúng truyền đạt ý nghĩa (semantic meaning) của nội dung mà chúng bao bọc, thay vì chỉ đơn thuần là định dạng cách hiển thị.

Hãy nghĩ về sự khác biệt giữa:

  • Một thẻ <div> với class class="tieu-de-chinh"
  • Một thẻ <h1>

Cả hai đều có thể được CSS để trông giống hệt nhau trên trình duyệt. Tuy nhiên:

  • Thẻ <div> không nói cho trình duyệt, công cụ tìm kiếm hay các công nghệ hỗ trợ (như trình đọc màn hình) biết rằng nội dung bên trong nó là một tiêu đề quan trọng của trang. Nó chỉ là một "hộp" chung chung.
  • Thẻ <h1> ngay lập tức thông báo rằng nội dung bên trong nó là tiêu đề chính, quan trọng nhất của trang. Nó mang ý nghĩa sẵn có của một tiêu đề cấp 1.

Các thẻ HTML truyền thống như <div>, <span> là các thẻ non-semantic (không mang ý nghĩa ngữ nghĩa). Chúng được sử dụng chủ yếu để nhóm các phần tử hoặc tạo điểm neo cho CSS/JavaScript.

Ngược lại, các thẻ semantic bao gồm những thẻ như <article>, <aside>, <nav>, <header>, <footer>, <main>, <section>, <figure>, <figcaption>, <time>, <strong>, <em> và rất nhiều thẻ khác. Mỗi thẻ này đều có một mục đích cụ thể, mô tả loại nội dung mà nó chứa đựng.

Tại sao Semantic HTML lại quan trọng đến thế?

Sử dụng Semantic HTML không chỉ là một "mẹo hay", nó là một nguyên tắc cơ bản để xây dựng các trang web chất lượng cao. Dưới đây là những lý do chính:

  1. Khả năng tiếp cận (Accessibility): Đây là lợi ích quan trọng hàng đầu. Người dùng sử dụng các công nghệ hỗ trợ như trình đọc màn hình (screen readers) dựa vào cấu trúc ngữ nghĩa của trang để hiểu nội dung và điều hướng. Ví dụ, trình đọc màn hình có thể thông báo "Điều hướng chính" khi gặp thẻ <nav>, hoặc "Bắt đầu bài viết" khi gặp thẻ <article>. Nếu bạn chỉ dùng <div>, trình đọc màn hình sẽ khó khăn hơn nhiều trong việc giải thích cấu trúc cho người dùng khiếm thị.

    <!-- Non-semantic, khó cho screen reader -->
<div class="menu">
  <ul>...</ul>
</div>

<!-- Semantic, screen reader hiểu đây là điều hướng -->
<nav>
  <ul>...</ul>
</nav>

    Giải thích: Thẻ <nav> cung cấp ngữ cảnh rõ ràng về mục đích của khối nội dung, giúp người dùng khiếm thị dễ dàng bỏ qua hoặc truy cập phần điều hướng.

  2. SEO (Tối ưu hóa Công cụ Tìm kiếm): Các công cụ tìm kiếm như Google, Bing sử dụng bots để "đọc" và lập chỉ mục nội dung trên website của bạn. Semantic HTML giúp các bots này hiểu rõ hơn cấu trúc và ngữ cảnh của nội dung, từ đó xếp hạng trang web của bạn chính xác hơn cho các truy vấn tìm kiếm liên quan. Một trang web có cấu trúc ngữ nghĩa tốt thường được đánh giá cao hơn.

    <!-- Non-semantic, bots khó hiểu phần nào là nội dung chính -->
<div id="main-content">
  <h2>Tiêu đề phụ</h2>
  <div>Nội dung chính của trang...</div>
</div>

<!-- Semantic, bots dễ dàng xác định nội dung chính -->
<main>
  <h2>Tiêu đề phụ</h2>
  <p>Nội dung chính của trang...</p>
</main>

    Giải thích: Thẻ <main> chỉ rõ phần nội dung chính của trang, giúp công cụ tìm kiếm tập trung vào phần này.

  3. Dễ bảo trì và đọc hiểu: Khi làm việc trong một nhóm hoặc xem lại code của chính mình sau một thời gian, mã HTML ngữ nghĩa dễ đọc và dễ hiểu hơn rất nhiều. Thay vì phải đoán xem một <div> với class nào đó có ý nghĩa gì, tên thẻ semantic đã nói lên tất cả. Điều này giúp quá trình phát triển và bảo trì nhanh chóng và ít lỗi hơn.

    <!-- Khó hiểu mục đích của div nếu không xem CSS/JS -->
<div class="sidebar">...</div>

<!-- Rõ ràng đây là phần phụ trợ -->
<aside>...</aside>

    Giải thích: Ai đọc code cũng biết ngay <aside> là một phần phụ trợ (sidebar, quảng cáo, liên kết liên quan...), không cần phải xem class sidebar.

  4. Tương thích tương lai (Future-proofing): Khi các công nghệ web mới xuất hiện hoặc các trình duyệt cập nhật cách diễn giải HTML, cấu trúc ngữ nghĩa có khả năng được hiểu và xử lý chính xác hơn các cấu trúc dựa trên <div> và <span> thuần túy.

Các Thẻ Semantic HTML phổ biến và cách sử dụng

Hãy cùng xem xét một vài thẻ semantic quan trọng và ví dụ cách dùng chúng:

  • <header>: Đại diện cho phần giới thiệu hoặc nhóm các thành phần điều hướng (như logo, tiêu đề trang, menu điều hướng, form tìm kiếm) cho một trang hoặc một phần cụ thể trong trang (<article>, <section>).

    <header>
  <h1>Tên Website</h1>
  <nav><!-- Menu điều hướng --></nav>
</header>

    Giải thích: Phần đầu của trang web hoặc một khối nội dung cụ thể.

  • <nav>: Đại diện cho một phần của trang chứa các liên kết điều hướng chính đến các trang khác hoặc các phần khác trên cùng trang.

    <nav>
  <ul>
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/blog">Bài viết</a></li>
  </ul>
</nav>

    Giải thích: Chứa các liên kết điều hướng quan trọng.

  • <main>: Đại diện cho nội dung chính và duy nhất trên một trang. Chỉ nên có một thẻ <main> trên mỗi trang. Nội dung bên trong <main> nên là nội dung độc lập, không lặp lại trên các trang khác (ví dụ: không bao gồm header, footer, sidebar).

    <main>
  <h2>Tiêu đề của nội dung chính</h2>
  <p>Đây là nội dung quan trọng nhất của trang này...</p>
</main>

    Giải thích: Bao bọc phần nội dung chính, khác biệt của trang hiện tại.

  • <article>: Đại diện cho một phần nội dung độc lập, có thể phân phối lại hoặc sử dụng lại một cách riêng rẽ. Ví dụ: một bài viết blog, một bình luận, một widget tin tức. Một trang có thể có nhiều thẻ <article>.

    <article>
  <h3>Tiêu đề bài blog</h3>
  <p>Nội dung tóm tắt...</p>
  <footer>Ngày đăng: <time datetime="2023-10-27">27/10/2023</time></footer>
</article>

    Giải thích: Mỗi <article> là một đơn vị nội dung độc lập.

  • <section>: Đại diện cho một phần chung của tài liệu, thường có tiêu đề. Sử dụng <section> khi không có thẻ semantic chuyên biệt nào khác phù hợp hơn (<article>, <nav>, <aside>). Không sử dụng <section> chỉ để tạo điểm neo cho CSS/JS; hãy dùng <div> cho mục đích đó.

    <section>
  <h2>Giới thiệu về dịch vụ của chúng tôi</h2>
  <p>Mô tả chi tiết...</p>
</section>

    Giải thích: Nhóm các nội dung có liên quan logic dưới một tiêu đề.

  • <aside>: Đại diện cho một phần của trang mà nội dung của nó chỉ liên quan một cách gián tiếp đến nội dung chính của tài liệu. Thường được dùng cho các thanh bên (sidebars), khối quảng cáo, hoặc các khối liên kết liên quan.

    <aside>
  <h3>Các bài viết liên quan</h3>
  <ul>
    <li><a href="...">Bài viết A</a></li>
    <li><a href="...">Bài viết B</a></li>
  </ul>
</aside>

    Giải thích: Nội dung phụ, không phải là trọng tâm chính của trang.

  • <footer>: Đại diện cho phần chân trang (footer) của một tài liệu hoặc một phần cụ thể trong tài liệu (<article>, <section>). Thường chứa thông tin về tác giả, bản quyền, liên kết liên quan, v.v.

    <footer>
  <p>© 2023 Tên Công ty. Mọi quyền được bảo lưu.</p>
</footer>

    Giải thích: Phần cuối của trang hoặc một khối nội dung.

  • <figure> và <figcaption>: Thẻ <figure> đại diện cho nội dung tự chứa, thường là hình ảnh, biểu đồ, đoạn code, v.v., có thể di chuyển đến một vị trí khác trong tài liệu mà không ảnh hưởng đến ý nghĩa chung. Thẻ <figcaption> cung cấp chú thích cho nội dung trong <figure>.

    <figure>
  <img src="anh-vi-du.jpg" alt="Một ví dụ minh họa">
  <figcaption>Hình 1: Mô tả ngắn về ảnh.</figcaption>
</figure>

    Giải thích: Bao bọc hình ảnh hoặc nội dung đa phương tiện cùng với chú thích của nó.

  • <time>: Đại diện cho một thời điểm cụ thể hoặc khoảng thời gian. Có thể cung cấp thuộc tính datetime ở định dạng máy đọc hiểu được.

    <p>Sự kiện bắt đầu vào <time datetime="2024-01-01T10:00:00Z">ngày 1 tháng 1 năm 2024 lúc 10 giờ sáng UTC</time>.</p>

    Giải thích: Đánh dấu thông tin thời gian để máy móc có thể xử lý.

  • <strong> và <em>: Đây là những thẻ semantic cho inline text.

    • <strong> dùng để chỉ ra văn bản có tầm quan trọng mạnh mẽ. (Mặc định hiển thị in đậm, nhưng ý nghĩa là quan trọng).
    • <em> dùng để chỉ ra văn bản có sự nhấn mạnh (emphasis), thường là để thay đổi ngữ điệu khi đọc. (Mặc định hiển thị in nghiêng, nhưng ý nghĩa là nhấn mạnh).
    • Hãy phân biệt với <b> (bold) và <i> (italic) chỉ mang tính chất trình bày, không có ý nghĩa ngữ nghĩa. Dùng <strong> và <em> khi bạn muốn truyền tải ý nghĩa quan trọng hoặc nhấn mạnh, dùng <b> và <i> khi bạn chỉ muốn thay đổi kiểu chữ mà không có ý nghĩa đặc biệt.
      <p>Đây là đoạn văn bản bình thường.</p>
<p>Đây là đoạn văn bản có phần <strong>rất quan trọng</strong>.</p>
<p>Đây là đoạn văn bản có phần <em>cần được nhấn mạnh</em> khi đọc.</p>
<p>Đây chỉ đơn giản là văn bản <b>in đậm</b> và <i>in nghiêng</i> vì mục đích thẩm mỹ.</p>
      Giải thích: <strong> và <em> mang ý nghĩa về tầm quan trọng/nhấn mạnh, còn <b> và <i> chỉ là về kiểu chữ.

Xây dựng Cấu trúc Trang với Semantic HTML

Thay vì sử dụng <div> tràn lan cho mọi thứ, hãy bắt đầu suy nghĩ về cấu trúc trang của bạn theo các khối ngữ nghĩa:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tiêu đề trang web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>Tên Trang Web Của Tôi</h1>
    <nav>
      <ul>
        <li><a href="/">Trang Chủ</a></li>
        <li><a href="/gioi-thieu">Giới Thiệu</a></li>
        <li><a href="/lien-he">Liên Hệ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Phần 1: Các bài viết mới nhất</h2>
      <article>
        <h3>Bài viết về Semantic HTML</h3>
        <p>Khám phá lý do nên sử dụng thẻ semantic...</p>
        <time datetime="2023-10-27">27/10/2023</time>
      </article>
      <article>
        <h3>Bài viết về CSS Grid</h3>
        <p>Hướng dẫn sử dụng CSS Grid layout...</p>
        <time datetime="2023-10-25">25/10/2023</time>
      </article>
    </section>

    <section>
      <h2>Phần 2: Giới thiệu dịch vụ</h2>
      <p>Chúng tôi cung cấp các dịch vụ web...</p>
    </section>

    <aside>
      <h3>Quảng cáo / Liên kết ngoài</h3>
      <p>Nội dung quảng cáo...</p>
    </aside>
  </main>

  <footer>
    <p>© 2023 Tên Công ty. <a href="/chinh-sach">Chính sách bảo mật</a>.</p>
  </footer>

</body>
</html>

Giải thích: Đây là một cấu trúc trang web điển hình sử dụng nhiều thẻ semantic. <header> chứa tiêu đề và điều hướng chính. <main> bao bọc toàn bộ nội dung độc lập của trang. Bên trong <main>, các <section> nhóm các phần nội dung liên quan. Mỗi bài viết riêng lẻ được bọc trong <article>. <aside> dùng cho nội dung phụ. Cuối cùng, <footer> chứa thông tin chân trang.

Lời khuyên khi sử dụng Semantic HTML

  • Luôn ưu tiên thẻ semantic: Trước khi dùng <div> hoặc <span>, hãy tự hỏi liệu có thẻ semantic nào phù hợp hơn với ý nghĩa của nội dung bạn đang đặt vào không.
  • Không lạm dụng: Không phải mọi thứ đều cần một thẻ semantic phức tạp. <div> và <span> vẫn có vai trò quan trọng trong việc nhóm các phần tử chỉ để định kiểu hoặc thao tác với JavaScript khi không có ý nghĩa ngữ nghĩa cụ thể.
  • Kiểm tra và xác thực: Sử dụng các công cụ xác thực HTML để đảm bảo bạn đang sử dụng các thẻ đúng cách theo tiêu chuẩn.
  • Nghĩ về người dùng: Luôn nhớ rằng Semantic HTML không chỉ dành cho máy móc mà còn giúp con người (đặc biệt là những người dùng công nghệ hỗ trợ) tương tác tốt hơn với trang web của bạn.

Việc nắm vững và áp dụng Semantic HTML là bước quan trọng để trở thành một nhà phát triển front-end chuyên nghiệp. Nó không chỉ cải thiện chất lượng kỹ thuật của website mà còn thể hiện sự quan tâm đến trải nghiệm người dùng và khả năng tiếp cận.

Comments

There are no comments at the moment.