Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Phần tử Semantic HTML5

Tại sao cần Semantic HTML?

Semantic HTML là dùng các thẻ mang ý nghĩa ngữ nghĩa rõ ràng thay vì chỉ dùng <div> và <span> cho mọi thứ.

Lợi ích:

  • Khả năng tiếp cận (Accessibility): Trình đọc màn hình dùng ngữ nghĩa để điều hướng (bỏ qua nav, đến main, v.v.).
  • SEO: Công cụ tìm kiếm hiểu cấu trúc nội dung tốt hơn — <article> quan trọng hơn <div>.
  • Dễ bảo trì: Người đọc code hiểu ngay vai trò của từng phần mà không cần đọc hết CSS.

Các thẻ semantic quan trọng

Thẻ Vai trò
<header> Phần đầu trang hoặc đầu một section (logo, tiêu đề, nav)
<nav> Nhóm các liên kết điều hướng chính
<main> Nội dung chính của trang — chỉ có một trên mỗi trang
<article> Nội dung độc lập, có thể tái sử dụng (bài viết, bình luận)
<section> Nhóm nội dung có liên quan, thường có tiêu đề
<aside> Nội dung phụ (sidebar, quảng cáo, ghi chú liên quan)
<footer> Phần cuối trang hoặc cuối một section
<figure> Hình ảnh, biểu đồ kèm chú thích
<figcaption> Chú thích cho <figure>
<time> Ngày giờ (dùng datetime để máy đọc được)
<address> Thông tin liên hệ

<div> và <span> — phi semantic

  • <div> — block container không có ngữ nghĩa (dùng để nhóm phần tử cho CSS/JS)
  • <span> — inline container không có ngữ nghĩa

Khi nào dùng <div>/<span>? Khi không có thẻ semantic phù hợp — ví dụ cần bọc nhiều phần tử chỉ để áp CSS.

Thẻ <time> và <address>

<time datetime="2024-09-01">1 tháng 9, 2024</time>

<address>
  Liên hệ: <a href="mailto:info@example.com">info@example.com</a><br>
  123 Đường Lê Lợi, TP. Hồ Chí Minh
</address>

So sánh — Không semantic vs Có semantic

<!-- Không semantic -->
<div id="header">
  <div id="nav">...</div>
</div>
<div id="main">
  <div class="post">...</div>
  <div id="sidebar">...</div>
</div>
<div id="footer">...</div>

<!-- Có semantic -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Ví dụ — Layout trang với semantic HTML

    Kết quả 
    <header>
  <h1>Blog Lập Trình</h1>
</header>

<nav>
  <a href="#">Trang chủ</a>
  <a href="#">Bài viết</a>
  <a href="#">Giới thiệu</a>
  <a href="#">Liên hệ</a>
</nav>

<main>
  <article>
    <h2>Giới thiệu về HTML5</h2>
    <p>
      Bài đăng vào <time datetime="2024-03-15">15 tháng 3, 2024</time>.
    </p>
    <p>HTML5 mang đến nhiều thẻ semantic giúp cấu trúc trang web rõ ràng hơn...</p>
    <section>
      <h3>Các thẻ mới trong HTML5</h3>
      <p>HTML5 giới thiệu các thẻ như article, section, aside, header, footer...</p>
    </section>
  </article>

  <aside>
    <h3>Bài viết liên quan</h3>
    <ul>
      <li><a href="#">CSS Flexbox cơ bản</a></li>
      <li><a href="#">JavaScript ES6+</a></li>
      <li><a href="#">Responsive Design</a></li>
    </ul>
  </aside>
</main>

<footer>
  <address>
    Liên hệ: <a href="mailto:blog@example.com">blog@example.com</a>
  </address>
  <p>&copy; 2024 Blog Lập Trình</p>
</footer>

    * { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; }

header {
  background: #333;
  color: white;
  padding: 1rem;
}

nav {
  background: #555;
  padding: 0.5rem 1rem;
}

nav a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

main {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

article {
  flex: 2;
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 4px;
}

aside {
  flex: 1;
  background: #e9e9e9;
  padding: 1rem;
  border-radius: 4px;
}

aside h3 {
  margin-top: 0;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.9rem;
}

footer a {
  color: #adf;
}

    Bình luận