Bài 6: Semantic HTML và bố cục trang web cơ bản
🎯 Mục tiêu
- Hiểu Semantic HTML là gì và vì sao cần dùng
- Biết các thẻ semantic quan trọng:
header,nav,main,section,article,aside,footer - Tạo được bố cục trang web cơ bản bằng HTML + CSS
- Viết HTML dễ đọc, dễ bảo trì, chuẩn SEO
📘 Lý thuyết ngắn
1) Semantic HTML là gì?
Semantic HTML là cách dùng thẻ HTML có ý nghĩa rõ ràng về nội dung,
thay vì chỉ dùng div.
So sánh
<!-- Không semantic -->
<div class="header">...</div>
<!-- Semantic -->
<header>...</header>
2) Các thẻ semantic thường dùng
header: đầu trang (logo, tiêu đề)nav: menu điều hướngmain: nội dung chínhsection: một khu nội dungarticle: bài viết độc lậpaside: nội dung phụ (sidebar)footer: chân trang
🧱 Sơ đồ bố cục trang web
HEADER
NAV
MAIN
├─ SECTION
│ └─ ARTICLE
└─ ASIDE
FOOTER
💻 Code mẫu (Trang web bố cục semantic)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 6 - Semantic HTML</title>
<style>
body {
margin: 0;
font-family: Arial;
background: #f7f8fa;
line-height: 1.7;
}
header {
background: #111;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: #2563eb;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-weight: 600;
}
main {
max-width: 1100px;
margin: 20px auto;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
padding: 0 16px;
}
section {
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
}
article {
border-bottom: 1px solid #eee;
padding-bottom: 12px;
margin-bottom: 12px;
}
article:last-child {
border-bottom: none;
margin-bottom: 0;
}
aside {
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
height: fit-content;
}
footer {
background: #111;
color: white;
text-align: center;
padding: 16px;
margin-top: 30px;
}
@media (max-width: 800px) {
main {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<h1>Website Web tĩnh</h1>
<p>HTML • CSS • JavaScript</p>
</header>
<nav>
<a href="#">Trang chủ</a>
<a href="#">Giới thiệu</a>
<a href="#">Khóa học</a>
<a href="#">Liên hệ</a>
</nav>
<main>
<section>
<article>
<h2>Bài viết 1</h2>
<p>Đây là nội dung bài viết đầu tiên.</p>
</article>
<article>
<h2>Bài viết 2</h2>
<p>Đây là nội dung bài viết thứ hai.</p>
</article>
</section>
<aside>
<h3>Sidebar</h3>
<p>Nội dung phụ: giới thiệu, quảng cáo, liên kết...</p>
</aside>
</main>
<footer>
© 2026 - Học thiết kế Web tĩnh
</footer>
</body>
</html>
👉 Copy code → lưu thành bai6.html → mở bằng Chrome.
Trang web này đã có bố cục desktop + tự co về mobile.
✍️ Bài tập
- Đổi tiêu đề website thành tên của bạn.
- Thêm 1 mục menu mới trong
nav. - Thêm 1 bài viết mới trong
section. - (Nâng cao) Thêm ảnh vào mỗi
article.
✅ Đáp án gợi ý
<article>
<h2>Bài viết 3</h2>
<img src="https://via.placeholder.com/600x200" alt="Ảnh minh họa">
<p>Nội dung bài viết mới.</p>
</article>
📌 Danh sách bình luận