Khi bắt đầu học HTML, nhiều người thường sử dụng rất nhiều thẻ <div> để xây dựng giao diện. Tuy nhiên, HTML5 đã giới thiệu Semantic HTML – tập hợp các thẻ có ý nghĩa giúp mô tả rõ cấu trúc của một trang web.

Một số thẻ Semantic phổ biến gồm:

• <header>: Phần đầu của trang hoặc một khu vực.
• <nav>: Thanh điều hướng chứa các liên kết.
• <main>: Nội dung chính của trang.
• <section>: Một nhóm nội dung có cùng chủ đề.
• <article>: Một bài viết hoặc nội dung độc lập.
• <aside>: Nội dung bổ sung như quảng cáo hoặc bài viết liên quan.
• <footer>: Phần cuối của trang web.

Vì sao nên sử dụng Semantic HTML?

✔ Tăng khả năng SEO: Công cụ tìm kiếm như Google dễ hiểu cấu trúc trang web hơn, từ đó cải thiện khả năng lập chỉ mục.

✔ Hỗ trợ người khuyết tật: Các trình đọc màn hình (Screen Reader) có thể xác định đúng từng khu vực trên trang, giúp người dùng dễ dàng truy cập nội dung.

✔ Mã nguồn dễ đọc và bảo trì: Thay vì chỉ nhìn thấy hàng loạt thẻ <div>, lập trình viên có thể nhanh chóng nhận biết chức năng của từng phần trong website.

✔ Tuân thủ tiêu chuẩn HTML5: Việc sử dụng đúng các thẻ ngữ nghĩa giúp website chuyên nghiệp và dễ mở rộng trong tương lai.

Ví dụ

<header>
    <h1>My Blog</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

<main>
    <article>
        <h2>Semantic HTML là gì?</h2>
        <p>Semantic HTML giúp mô tả rõ ý nghĩa của từng phần trên trang web.</p>
    </article>
</main>

<footer>
    <p>&copy; 2026 My Website</p>
</footer>

Kết luận

Semantic HTML không chỉ giúp website đẹp về mặt cấu trúc mà còn cải thiện SEO, tăng khả năng truy cập và giúp việc phát triển, bảo trì trở nên dễ dàng hơn. Nếu bạn đang học HTML5, hãy tập thói quen sử dụng các thẻ Semantic thay vì lạm dụng <div>, vì đây là một trong những kỹ năng quan trọng của lập trình web hiện đại.