💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
HTML ngữ nghĩa (Semantic)
📌
Kết luận
Sử dụng <header>, <main>, <footer> để thể hiện cấu trúc trang web
📝 Mã thực tế tại đây
<header>Phần đầu trang</header>
<main>Nội dung chính</main>
<footer>Phần chân trang</footer>Semantic HTML là gì?
"Semantic" có nghĩa là "có ý nghĩa". Dù bạn dùng thẻ<div> thì vẻ ngoài có thể không đổi, nhưng khi dùng các thẻ ngữ nghĩa, bạn đang thông báo cho trình duyệt và công cụ tìm kiếm biết: "Đây là đầu trang", "Đây là nội dung chính".
| Thẻ | Vai trò |
|---|---|
<header> | Phần đầu trang (logo, menu điều hướng) |
<main> | Nội dung chính của trang web |
<footer> | Phần chân trang (bản quyền, liên kết phụ) |
<nav> | Menu điều hướng |
<article> | Một bài viết độc lập |
<section> | Một phần nội dung liên quan |
Tại sao nên sử dụng?
- **SEO**: Giúp Google hiểu đúng cấu trúc trang web. - **Khả năng truy cập**: Giúp các phần mềm đọc màn hình nắm bắt được cấu trúc trang. - **Khả năng bảo trì**: Giúp mã nguồn dễ đọc và dễ hiểu hơn cho lập trình viên.Tổng kết
- Hãy dùng thẻ ngữ nghĩa thay cho thẻ<div> khi có thể
- Bộ ba <header>, <main>, <footer> là cấu trúc cơ bản nhất
- Giúp cải thiện SEO và khả năng truy cập
Hãy thử trong phần bài tập
Hãy thử tạo cấu trúc cơ bản của một trang web với header, main và footer nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy tạo cấu trúc cơ bản sử dụng các thẻ header, main, footer. Nội dung bên trong main bạn có thể viết tùy ý.
Gợi ý khi gặp khó khăn
header ở trên cùng, main ở giữa và footer ở dưới cùng.