Html-Css # css # html

Bài 5: Semantic HTML – Thẻ có ý nghĩa (section, article, nav, header, footer)

⏱ 18 phút đọc 👁 60 💬 0 bình luận

Cho đến bây giờ, bạn đã biết cách tạo các thẻ HTML cơ bản. Nhưng hầu hết các trang web hiện đại không chỉ dùng <div> mà còn sử dụng các thẻ “semantic” — những thẻ có ý nghĩa rõ ràng. Thay vì dùng <div> cho tất cả, bạn nên dùng <header>, <nav>, <section>, <article>, <footer>…

Bài này sẽ dạy bạn tại sao semantic HTML quan trọng và cách sử dụng chúng để tạo trang web sạch, dễ bảo trì, và tốt cho SEO.

Semantic HTML là gì?

Semantic HTML là cách viết HTML mà các thẻ không chỉ hiển thị nội dung mà còn mô tả ý nghĩa của nó. Thay vì:

<!-- ❌ Không semantic: tất cả dùng div -->
<div>
  <div>Logo</div>
  <div>
    <a href="/">Trang chủ</a>
    <a href="/about">Về chúng tôi</a>
  </div>
</div>
<div>
  <h1>Bài viết mới nhất</h1>
  <p>Nội dung bài viết...</p>
</div>
<div>
  <p>© 2024 Blog của tôi</p>
</div>

Bạn nên dùng:

<!-- ✅ Semantic: các thẻ có ý nghĩa rõ -->
<header>
  <h1>Logo</h1>
  <nav>
    <a href="/">Trang chủ</a>
    <a href="/about">Về chúng tôi</a>
  </nav>
</header>
<article>
  <h1>Bài viết mới nhất</h1>
  <p>Nội dung bài viết...</p>
</article>
<footer>
  <p>© 2024 Blog của tôi</p>
</footer>

Sự khác biệt là gì? Cả hai đều hiển thị giống nhau, nhưng code thứ hai:

  • 🔍 Dễ hiểu hơn: Đọc code, lập tức biết đâu là header, nav, article, footer
  • ♿ Tốt hơn cho khiếm thị: Trình đọc màn hình biết cấu trúc trang
  • 🔎 Tốt hơn cho SEO: Google hiểu được nội dung chính của trang
  • 🛠️ Dễ bảo trì: Đồng nghiệp bạn dễ dàng hiểu code của bạn

Thẻ Header (header) – Phần đầu trang

Thẻ <header> dùng để bao quanh phần đầu của trang hoặc section. Thường chứa logo, tiêu đề, hoặc thanh điều hướng.

<!-- Header của trang -->
<header>
  <h1>Blog Lập Trình</h1>
  <p>Chia sẻ kiến thức lập trình</p>
</header>

<!-- Header của một bài viết -->
<article>
  <header>
    <h2>Tiêu đề bài viết</h2>
    <p>Tác giả: Nguyễn Văn A | Ngày: 20/12/2024</p>
  </header>
  <p>Nội dung bài viết...</p>
</article>

Thẻ Navigation (nav) – Thanh điều hướng

Thẻ <nav> dùng để bao quanh các liên kết điều hướng chính của trang (menu, breadcrumb…).

<!-- Nav đơn giản -->
<nav>
  <a href="/">Trang chủ</a>
  <a href="/blog">Blog</a>
  <a href="/about">Về chúng tôi</a>
  <a href="/contact">Liên hệ</a>
</nav>

<!-- Nav với danh sách -->
<nav>
  <ul>
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/about">Về chúng tôi</a></li>
    <li><a href="/contact">Liên hệ</a></li>
  </ul>
</nav>

<!-- Breadcrumb (đường dẫn) -->
<nav>
  <a href="/">Trang chủ</a> >
  <a href="/blog">Blog</a> >
  <a href="/blog/html">HTML</a> >
  <span>Bài viết hiện tại</span>
</nav>

💡 Mẹo: Thẻ <nav> dùng cho các liên kết điều hướng chính. Không phải tất cả link đều cần <nav>. Ví dụ, link nằm trong bài viết không cần <nav>.

Thẻ Main (main) – Nội dung chính

Thẻ <main> bao quanh nội dung chính của trang. Mỗi trang chỉ có một <main> duy nhất.

<header>
  <h1>Blog</h1>
  <nav>...</nav>
</header>

<!-- Main chứa nội dung chính -->
<main>
  <article>
    <h2>Bài 1: HTML là gì</h2>
    <p>...</p>
  </article>
  
  <article>
    <h2>Bài 2: Các thẻ HTML</h2>
    <p>...</p>
  </article>
</main>

<footer>...</footer>

Thẻ Section (section) – Phần / Mục

Thẻ <section> dùng để nhóm các nội dung liên quan đến một chủ đề. Mỗi <section> thường có tiêu đề.

<!-- Section 1: Giới thiệu -->
<section>
  <h2>Giới thiệu về HTML</h2>
  <p>HTML là ngôn ngữ đánh dấu cơ bản...</p>
</section>

<!-- Section 2: Lợi ích -->
<section>
  <h2>Lợi ích của HTML</h2>
  <ul>
    <li>Dễ học</li>
    <li>Hỗ trợ rộng rãi</li>
    <li>Là nền tảng của web</li>
  </ul>
</section>

<!-- Section 3: Cách bắt đầu -->
<section>
  <h2>Cách bắt đầu</h2>
  <p>Bước 1: Cài đặt trình soạn thảo...</p>
</section>

Section vs Div – Khi nào dùng cái nào?

ThẻKhi nào dùngVí dụ
<section>Nhóm nội dung liên quan, có tiêu đề riêngPhần giới thiệu, phần tính năng, phần liên hệ
<div>Nhóm nội dung để CSS hóa, không có ý nghĩa semanticTạo layout, nhóm cho flex/grid, trang trí
<!-- ✅ ĐÚNG: Section có tiêu đề và ý nghĩa semantic -->
<section>
  <h2>Tính năng chính</h2>
  <p>...</p>
</section>

<!-- ✅ ĐÚNG: Div để CSS hóa layout -->
<div class="container">
  <div class="row">
    <div class="col">...</div>
  </div>
</div>

<!-- ❌ SAI: Section mà không có tiêu đề -->
<section>
  <p>Nội dung ngẫu nhiên</p>
</section>

Thẻ Article (article) – Bài viết độc lập

Thẻ <article> dùng cho nội dung độc lập, tự đủ — như bài blog, tin tức, bình luận… Nó có thể được chia sẻ, tái sử dụng, hoặc hiển thị riêng.

<!-- Article: một bài blog -->
<article>
  <header>
    <h2>Bài viết: 10 lời khuyên học lập trình</h2>
    <p>Tác giả: Nguyễn Văn A | Ngày: 20/12/2024</p>
  </header>
  
  <p>Nội dung bài viết...</p>
  
  <footer>
    <p>Chia sẻ: <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</article>

<!-- Article: một bình luận -->
<article>
  <header>
    <p><strong>Trần Thị B</strong> - 22/12/2024</p>
  </header>
  <p>Bài viết rất hữu ích! Cảm ơn bạn!</p>
</article>

Article vs Section – Sự khác biệt

ThẻMục đíchVí dụ
<article>Nội dung độc lập, tự đủBài blog, tin tức, bình luận, podcast, video
<section>Nhóm nội dung liên quan cùng chủ đềPhần giới thiệu, phần tính năng, phần liên hệ
<!-- ✅ ĐÚNG: Article cho bài viết độc lập -->
<article>
  <h2>Bài viết: HTML là gì</h2>
  <p>Nội dung...</p>
</article>

<!-- ✅ ĐÚNG: Section để nhóm các mục của một bài viết -->
<article>
  <section>
    <h2>Giới thiệu</h2>
    <p>...</p>
  </section>
  
  <section>
    <h2>Ví dụ</h2>
    <p>...</p>
  </section>
</article>

Thẻ Aside (aside) – Nội dung phụ

Thẻ <aside> dùng cho nội dung liên quan nhưng không phải nội dung chính: sidebar, quảng cáo, thông tin thêm…

<main>
  <article>
    <h2>Bài viết chính</h2>
    <p>Nội dung bài viết...</p>
  </article>
</main>

<!-- Aside: thông tin thêm -->
<aside>
  <h3>Bài viết liên quan</h3>
  <ul>
    <li><a href="#">Bài 1: HTML cơ bản</a></li>
    <li><a href="#">Bài 2: CSS cơ bản</a></li>
    <li><a href="#">Bài 3: JavaScript cơ bản</a></li>
  </ul>
</aside>

<!-- Aside: tiểu sử tác giả -->
<aside>
  <h3>Tiểu sử tác giả</h3>
  <p>Nguyễn Văn A là lập trình viên có 5 năm kinh nghiệm...</p>
</aside>

Thẻ Footer (footer) – Phần cuối trang

Thẻ <footer> dùng cho phần cuối của trang hoặc section. Thường chứa copyright, liên kết liên hệ, hoặc thông tin bổ sung.

<!-- Footer của trang -->
<footer>
  <p>© 2024 Blog Lập Trình. Tất cả quyền được bảo lưu.</p>
  <nav>
    <a href="/privacy">Chính sách riêng tư</a> |
    <a href="/terms">Điều khoản</a> |
    <a href="/contact">Liên hệ</a>
  </nav>
</footer>

<!-- Footer của một bài viết -->
<article>
  <h2>Tiêu đề bài viết</h2>
  <p>Nội dung...</p>
  
  <footer>
    <p><strong>Tags:</strong> HTML, CSS, JavaScript</p>
    <p><strong>Chia sẻ:</strong> <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</article>

Ví dụ trang web hoàn chỉnh với Semantic HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Lập Trình</title>
</head>
<body>

  <!-- Header trang -->
  <header>
    <h1>📚 Blog Lập Trình</h1>
    <p>Chia sẻ kiến thức lập trình từ cơ bản đến nâng cao</p>
  </header>

  <!-- Navigation -->
  <nav>
    <ul>
      <li><a href="/">Trang chủ</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">Về tôi</a></li>
      <li><a href="/contact">Liên hệ</a></li>
    </ul>
  </nav>

  <!-- Nội dung chính -->
  <main>

    <!-- Article 1 -->
    <article>
      <header>
        <h2>HTML là gì? Tại sao cần học HTML?</h2>
        <p>Tác giả: Nguyễn Văn A | Ngày: 20/12/2024</p>
      </header>

      <section>
        <h3>Giới thiệu</h3>
        <p>HTML (HyperText Markup Language) là nền tảng của web...</p>
      </section>

      <section>
        <h3>Tại sao cần học HTML?</h3>
        <ul>
          <li>Là nền tảng của web</li>
          <li>Dễ học, dễ bắt đầu</li>
          <li>Cần thiết cho lập trình web</li>
        </ul>
      </section>

      <section>
        <h3>Cách bắt đầu</h3>
        <p>Bước 1: Cài đặt trình soạn thảo...</p>
      </section>

      <footer>
        <p><strong>Tags:</strong> HTML, Web, Cơ bản</p>
      </footer>
    </article>

    <!-- Article 2 -->
    <article>
      <header>
        <h2>CSS là gì? Cách trang trí website</h2>
        <p>Tác giả: Nguyễn Văn A | Ngày: 22/12/2024</p>
      </header>
      <p>CSS dùng để làm đẹp trang web...</p>
    </article>

  </main>

  <!-- Sidebar -->
  <aside>
    <h3>Bài viết phổ biến</h3>
    <ul>
      <li><a href="#">HTML cơ bản</a></li>
      <li><a href="#">CSS layout</a></li>
      <li><a href="#">JavaScript DOM</a></li>
    </ul>

    <h3>Danh mục</h3>
    <ul>
      <li><a href="#">HTML (5)</a></li>
      <li><a href="#">CSS (8)</a></li>
      <li><a href="#">JavaScript (10)</a></li>
    </ul>
  </aside>

  <!-- Footer trang -->
  <footer>
    <p>© 2024 Blog Lập Trình. Tất cả quyền được bảo lưu.</p>
    <nav>
      <a href="/privacy">Chính sách riêng tư</a> |
      <a href="/terms">Điều khoản</a> |
      <a href="/contact">Liên hệ</a>
    </nav>
  </footer>

</body>
</html>

Tất cả các thẻ Semantic HTML

ThẻChức năngVí dụ sử dụng
<header>Phần đầu trang / sectionLogo, tiêu đề, tác giả
<nav>Thanh điều hướng chínhMenu, breadcrumb
<main>Nội dung chính (chỉ một)Bài viết, danh sách sản phẩm
<section>Nhóm nội dung cùng chủ đềPhần giới thiệu, phần tính năng
<article>Nội dung độc lập, tự đủBài blog, tin tức, bình luận
<aside>Nội dung phụ, liên quanSidebar, quảng cáo, bài liên quan
<footer>Phần cuối trang / sectionCopyright, liên hệ, link

Tại sao Semantic HTML quan trọng?

💡 Lợi ích của Semantic HTML:

  • SEO (Tìm kiếm): Google dễ hiểu cấu trúc và nội dung trang, tăng xếp hạng
  • Khiếm thị: Trình đọc màn hình có thể đọc cấu trúc trang chính xác
  • Bảo trì: Code dễ hiểu, dễ sửa đổi sau này
  • Hiệu suất: Trình duyệt xử lý semantic HTML tốt hơn
  • Đội ngũ: Đồng nghiệp dễ dàng hiểu code của bạn

Tóm tắt

  • ✅ Semantic HTML: Các thẻ có ý nghĩa rõ, không chỉ là <div>
  • ✅ <header>: Phần đầu trang / section
  • ✅ <nav>: Thanh điều hướng chính
  • ✅ <main>: Nội dung chính (chỉ có một)
  • ✅ <section>: Nhóm nội dung cùng chủ đề
  • ✅ <article>: Nội dung độc lập, tự đủ
  • ✅ <aside>: Nội dung phụ, liên quan
  • ✅ <footer>: Phần cuối trang / section
  • ✅ Lợi ích: Tốt cho SEO, khiếm thị, bảo trì, và hiểu code

🎯 Bài tập thực hành

Bài tập 1: Chuyển đổi trang web bất kỳ (sử dụng <div>) thành Semantic HTML:

  • Thay thế <div class="header"> bằng <header>
  • Thay thế <div class="nav"> bằng <nav>
  • Thay thế <div class="content"> bằng <main>
  • Thay thế <div class="article"> bằng <article>
  • Thay thế <div class="footer"> bằng <footer>

Bài tập 2: Tạo trang “Portfolio cá nhân” với Semantic HTML:

  • <header> với tên và tiêu đề nghề nghiệp
  • <nav> với liên kết: Trang chủ, Dự án, Kỹ năng, Liên hệ
  • <main> chứa:
  • <section> “Giới thiệu”
  • <section> “Dự án” (có 2-3 <article>)
  • <section> “Kỹ năng”
  • <aside> với thông tin liên hệ
  • <footer> với copyright

Bài tập 3: Tạo trang “Trang tin tức” với:

  • <header> là tên tờ báo
  • <nav> với các chuyên mục
  • <main> chứa ít nhất 5 <article> (mỗi bài báo một article)
  • Mỗi <article> có <header>, nội dung, và <footer>
  • <aside> với tin liên quan / quảng cáo
  • <footer> trang

Chúc bạn thành công! 🚀

Bài viết liên quan

Để lại bình luận

Email của bạn sẽ không được hiển thị.