HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có ý nghĩa hơn — không chỉ cho lập trình viên mà còn cho trình duyệt và các công nghệ hỗ trợ như trình đọc màn hình.
Nếu bạn chưa chắc khi nào nên dùng <main>, <section>, <article>, <header>, <footer>, hoặc <aside>, thì bài viết này là dành cho bạn. Hãy cùng tìm hiểu chúng là gì, khi nào nên dùng và những điều nên tránh.
1. <main>
Định nghĩa nội dung chính của trang — phần làm cho trang trở nên đặc biệt.
Sử dụng cho:
- Bài viết blog, danh sách sản phẩm, bảng điều khiển
- Bất kỳ nội dung nào là trung tâm của trang
Không dùng cho:
- Header, footer, menu điều hướng, thanh bên
- Mỗi trang chỉ nên có một thẻ
<main>duy nhất.
2. <section>
Nhóm các nội dung có chủ đề chung, lý tưởng là có tiêu đề (<h1>–<h6>).
Sử dụng cho:
- Mục “Bài viết mới nhất”
- Mục Câu hỏi thường gặp (FAQ)
- Một trang được chia thành nhiều phần hợp lý
Mẹo: Dùng aria-label hoặc thêm tiêu đề để cải thiện khả năng truy cập.
3. <article>
Một khối nội dung độc lập, có thể tái sử dụng — nó nên có ý nghĩa ngay cả khi đứng một mình.
Sử dụng cho:
- Một bài blog hoặc bài báo
- Một bình luận hoặc đánh giá người dùng
Không dùng để:
- Gói các thành phần không liên quan chỉ vì chúng được hiển thị gần nhau về mặt hình ảnh.
4. <header>
Giới thiệu một phần hoặc toàn bộ trang. Có thể bao gồm:
- Tiêu đề
- Logo
- Menu điều hướng
Sử dụng:
- Một lần ở đầu trang
- Bên trong
<section>hoặc<article>như phần giới thiệu
5. <footer>
Kết thúc một phần hoặc cả trang. Có thể bao gồm:
- Thông tin tác giả
- Liên kết liên quan
- Bản quyền
Sử dụng:
- Ở cuối trang
- Bên trong
<article>để hiển thị metadata như ngày tháng hoặc thẻ
6. <aside>
Biểu thị nội dung có liên quan nhưng không thiết yếu đối với nội dung chính.
Sử dụng cho:
- Thanh bên
- Bài viết liên quan
- Trích dẫn, mẹo nhỏ hoặc quảng cáo
Kết luận
HTML ngữ nghĩa giúp mã nguồn của bạn dễ truy cập, dễ bảo trì và dễ hiểu hơn — không chỉ với bạn mà còn với tất cả những ai tương tác với trang web.
Cảm ơn bạn đã dành thời gian đọc bài viết.
Nguồn: viblo.asia