Trong hành trình trở thành một lập trình viên Front-End hoặc Full Stack, nhiều người thường chỉ quan tâm đến việc giao diện có đẹp hay không.
Tuy nhiên, với các dự án thực tế, đặc biệt là website doanh nghiệp, thương mại điện tử, CRM hay Dashboard, điều quan trọng hơn là cấu trúc HTML phải rõ ràng, chuẩn và có ý nghĩa.
Đó chính là lý do Semantic HTML5 luôn là bài học đầu tiên.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ hiểu được:
Semantic HTML là gì?
Tại sao Google thích Semantic HTML?
Vì sao Screen Reader cần Semantic HTML?
Cách tổ chức bố cục website chuẩn Enterprise.
Khi nào dùng
<section>và khi nào dùng<article>.Những lỗi Semantic phổ biến mà người mới thường mắc phải.
Semantic HTML là gì?
Semantic nghĩa là "mang ý nghĩa".
Thay vì viết toàn bộ website bằng:
<div>
<div>
<div>
<div>
HTML5 cung cấp những thẻ mô tả đúng chức năng của từng khu vực.
Ví dụ:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Chỉ cần nhìn vào source code cũng hiểu được bố cục của trang.
Vì sao phải dùng Semantic HTML?
1. Dễ đọc source
Ví dụ:
<header>
thay vì
<div class="header">
người khác sẽ hiểu ngay đây là phần đầu trang.
2. SEO tốt hơn
Google không nhìn website giống con người.
Google đọc HTML.
Ví dụ:
<article>
Google hiểu đây là một bài viết.
<nav>
Google hiểu đây là menu điều hướng.
<footer>
Google hiểu đây là phần cuối trang.
Semantic giúp công cụ tìm kiếm hiểu nội dung nhanh và chính xác hơn.
3. Accessibility
Người khiếm thị sử dụng Screen Reader.
Screen Reader sẽ đọc:
Header
Navigation
Main Content
Footer
Nếu website chỉ dùng <div> thì trải nghiệm sẽ kém hơn rất nhiều.
4. Code dễ bảo trì
Một website có thể tồn tại nhiều năm và được nhiều lập trình viên cùng phát triển.
Semantic HTML giúp:
dễ đọc
dễ sửa
dễ mở rộng
giảm nhầm lẫn khi làm việc nhóm
Những thẻ Semantic quan trọng
| Thẻ | Ý nghĩa |
|---|---|
<header> | Đầu trang |
<nav> | Thanh điều hướng |
<main> | Nội dung chính |
<section> | Một khu vực nội dung |
<article> | Một bài viết độc lập |
<aside> | Nội dung phụ |
<footer> | Chân trang |
Cấu trúc website chuẩn
<body>
<header>
Logo
</header>
<nav>
Menu
</nav>
<main>
<section>
<article>
Nội dung bài viết
</article>
</section>
<aside>
Sidebar
</aside>
</main>
<footer>
Copyright
</footer>
</body>
Đây là bố cục được sử dụng trong rất nhiều website doanh nghiệp.
Ý nghĩa từng khu vực
Header
Thông thường chứa:
Logo
Hotline
Search
Login
Banner
Ví dụ:
<header>
<h1>Lớp Học Vi Tính</h1>
</header>
Nav
Chứa menu.
<nav>
<ul>
<li>Trang chủ</li>
<li>Khóa học</li>
<li>Blog</li>
<li>Liên hệ</li>
</ul>
</nav>
Main
Mỗi trang chỉ nên có một thẻ <main>.
Ví dụ:
<main>
...
</main>
Section
Section là một nhóm nội dung có cùng chủ đề.
Ví dụ:
<section>
<h2>Khóa học nổi bật</h2>
...
</section>
Article
Article là nội dung có thể đứng độc lập.
Ví dụ:
bài blog
bài báo
bài hướng dẫn
tin tức
sản phẩm
<article>
<h2>Semantic HTML là gì?</h2>
<p>...</p>
</article>
Aside
Nội dung phụ.
Ví dụ:
quảng cáo
bài viết liên quan
tag
category
widget
<aside>
Bài viết mới
</aside>
Footer
Thông thường gồm:
Copyright
Chính sách
Liên hệ
Social
<footer>
© 2026
</footer>
Section khác Article như thế nào?
Đây là phần rất nhiều người nhầm.
Section
Là một khu vực.
Ví dụ:
Khóa học nổi bật
bên trong có nhiều khóa học.
Article
Là một nội dung độc lập.
Ví dụ:
Bài 01
Bài 02
Bài 03
Mỗi bài đều là một Article.
Ví dụ
<section>
<h2>Tin mới</h2>
<article>
Tin số 1
</article>
<article>
Tin số 2
</article>
</section>
Section chứa nhiều Article.
Những lỗi Semantic phổ biến
❌ Dùng <div> cho mọi thứ.
❌ Không có <main>.
❌ Có nhiều <main> trên cùng một trang.
❌ Đặt <footer> bên trong <article> khi không cần thiết.
❌ Dùng <section> nhưng không có tiêu đề.
❌ Chỉ dùng <br> để tạo khoảng cách thay vì CSS.
Thực hành
Tạo bố cục sau:
Header
Menu
Banner
Giới thiệu
Khóa học
Tin tức
Sidebar
Footer
Yêu cầu:
sử dụng Semantic HTML
không dùng
<div>nếu có thể thay thế bằng thẻ Semanticmỗi khu vực có tiêu đề rõ ràng
Tổng kết
Semantic HTML không làm website đẹp hơn, nhưng giúp website chuyên nghiệp hơn.
Một cấu trúc HTML chuẩn sẽ mang lại nhiều lợi ích:
SEO tốt hơn
Dễ bảo trì
Dễ mở rộng
Thân thiện với công cụ tìm kiếm
Hỗ trợ người dùng sử dụng Screen Reader
Tạo nền tảng vững chắc cho CSS, JavaScript và các framework hiện đại
Trong các bài tiếp theo, chúng ta sẽ tiếp tục xây dựng trên nền tảng này để tạo nên những giao diện doanh nghiệp hiện đại, dễ bảo trì và sẵn sàng mở rộng.
📌 Kiến thức đạt được
✅ Hiểu Semantic HTML5 là gì.
✅ Biết cách sử dụng các thẻ
header,nav,main,section,article,aside,footer.✅ Phân biệt được
sectionvàarticle.✅ Biết cách xây dựng bố cục website chuẩn Enterprise.
✅ Nắm được những lỗi Semantic HTML thường gặp và cách tránh.
➡️ Bài tiếp theo: Bài 02 — Form Enterprise: Xây dựng biểu mẫu chuyên nghiệp với HTML5.
Không có nhận xét nào:
Đăng nhận xét