Khi mới học HTML, bạn thường dùng thẻ <div> để chia mọi phần trong trang. Tuy nhiên, HTML5 cung cấp các thẻ ngữ nghĩa (semantic tags) giúp bạn xác định rõ vai trò từng phần, vừa dễ đọc, vừa tốt cho SEO và khả năng tiếp cận.
1. Semantic HTML là gì?
Semantic nghĩa là “có ý nghĩa”.
Semantic HTML là cách viết HTML dùng đúng thẻ cho đúng chức năng, thay vì chỉ dùng <div> hoặc <span> cho mọi thứ.
Ví dụ:
- Dùng
<header>thay vì<div class="header"> - Dùng
<nav>thay vì<div class="menu">
2. Các thẻ ngữ nghĩa phổ biến
| Thẻ | Vai trò |
|---|---|
<header> | Phần đầu trang hoặc phần đầu của một khu vực |
<nav> | Phần điều hướng – chứa menu, liên kết |
<main> | Nội dung chính – duy nhất một thẻ trên mỗi trang |
<section> | Một khu vực nội dung có liên quan |
<article> | Một nội dung độc lập (bài viết, bài blog,…) |
<aside> | Nội dung phụ như quảng cáo, liên kết ngoài |
<footer> | Phần chân trang hoặc chân của khu vực |
3. Ví dụ cấu trúc trang chuẩn
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trang tin tức</title>
</head>
<body>
<header>
<h1>Trang Tin Tức</h1>
</header>
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thế giới</a></li>
<li><a href="#">Thể thao</a></li>
</ul>
</nav>
<main>
<article>
<h2>Bài viết chính</h2>
<p>Nội dung bài viết...</p>
</article>
<aside>
<h3>Tin phụ</h3>
<p>Quảng cáo hoặc liên kết khác...</p>
</aside>
</main>
<footer>
<p>Bản quyền © 2025</p>
</footer>
</body>
</html>
4. So sánh: dùng div vs dùng semantic tag
| Cách cũ (chưa semantic) | Cách mới (semantic) |
|---|---|
<div class="header"> | <header> |
<div class="nav"> | <nav> |
<div class="content"> | <main> |
<div class="footer"> | <footer> |
Lợi ích của semantic HTML:
- Giúp Google hiểu rõ nội dung trang.
- Giúp người lập trình đọc và bảo trì dễ dàng.
- Hỗ trợ trình đọc màn hình cho người khiếm thị.
5. Một số lưu ý
- Trong một trang chỉ nên có một thẻ
<main>duy nhất - Các thẻ như
<section>và<article>có thể lồng nhau khi cần - Không nên lạm dụng
<div>nếu có thể dùng thẻ semantic tương ứng
6. Ghi nhớ
| Thẻ | Mô tả ngắn |
|---|---|
<header> | Phần đầu – có thể chứa logo, tiêu đề |
<nav> | Menu điều hướng |
<main> | Nội dung chính duy nhất của trang |
<article> | Một bài viết hoặc mục độc lập |
<aside> | Nội dung phụ, bên lề |
<footer> | Phần cuối trang hoặc cuối khu vực |
Thảo luận