Bài 32: Các phần tử Semantic trong HTML5
Trong ngôn ngữ học, ngữ nghĩa học là nghiên cứu về ý nghĩa của từ và cụm từ trong ngôn ngữ.
Mỗi phần tử Semantic (phần tử ngữ nghĩa) đều mang một ý nghĩa riêng.
Bài học này sẽ giúp chúng ta hiểu rõ hơn về các phần tử Semantic và có thể giúp bạn thiết kế cấu trúc/giao diện của một trang web đẹp và rõ ràng hơn.
Nội dung
- Phần tử Semantic là gì?
- Trình duyệt hỗ trợ
- Các phần tử Semantic mới trong HTML5
- Phần tử<section> trong HTML5
- Phân tử <article> trong HTML5
- Các phần tử Semantic lồng nhau
- Phần tử <header> trong HTML5
- Phần tử <footer> trong HTML5
- Phần tử <nav> trong HTML5
- Phần tử <aside> trong HTML5
- Phần tử <figure> và <figcaption> trong HTML5
- Tại sao sử dụng các phần tử Semantic trong HTML5?
- Phần tử Semantic trong HTML5
Phần tử Semantic là gì?
Phần tử semantic là mô tả rõ ràng ý nghĩa về cấu trúc của phần tử đó đối với các trình duyệt và lập trình viên.
Ví dụ về phần tử non-semantic (phần tử không có ngữ nghĩa): <div> và <span> – Không có mô tả rõ ràng về nội dung bên trong phần tử.
Ví dụ về phần tử semantic (phần tử có ngữ nghĩa) : <form>, <table>, và <img> – Đưa ra các mô tả rõ ràng về nội dung bên trong phần tử .
Trình duyệt hỗ trợ
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
Các phần tử semantic trong HTML5 được hỗ trợ hầu hết bởi các trình duyệt hiện đại
Bên cạnh đó, bạn có thể “dạy” cho các trình duyệt cũ có thể hiểu hiểu và thể xử lí các phần tử mới của HTML5.
Xem thêm các trình duyệt hỗ trợ HTML5.
Các phần tử Semantic mới trong HTML5
Hiện nay có rất nhiều website vẫn đang thiết kế dựa trên các mã HTML như sau: <div id=”nav”> <div class=”header”> <div id=”footer”> để tạo giao diện có menu điều hướng (nav), đầu trang (header) và cuối trang (footer).
Dưới đây, HTML5 cung cấp các phần tử semantic mới để xác định từng phần khác nhau của một trang web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Phần tử<section> trong HTML5
Phần tử <section> xác định một phần có trong tài liệu.
Dựa theo tài liệu về HTML5 của W3C thì: “Một section là một nhóm các nội dung giống nhau có cùng chủ đề.”
Trang chủ của một trang web có thể được chia thành nhiều phần khác nhau: giới thiệu, nội dung, thông tin liên lạc…
Ví dụ:
<section>
<h1>WWF</h1>
<p>Quỹ Quốc Tế Bảo Vệ Thiên nhiên (WWF) là....</p>
</section>
Phân tử <article> trong HTML5
Phần tử <article> được sử dụng cho các nội dung độc lập và chứa nội dung của riêng nó.
Nội dung bên trong phần tử <article> có ý nghĩa riêng biệt và có thể độc lập với các nội dung khác của trang web.
Ví dụ một số chỗ bạn có thể sử dụng được phần tử <article>:
- Bài viết của một diễn đàn
- Bài viết của một Blog
- Bài viết của một tờ báo
Ví dụ:
<article>
<h1>WWF làm gì?</h1>
<p>Sứ mệnh của WWF là ngăn chặn sự xuống cấp môi trường tự nhiên của hành tinh chúng ta và xây dựng một tương lai trong đó con người sống hài hòa với thiên nhiên.</p>
</article>
Các phần tử Semantic lồng nhau
Trong chuẩn HTML5, phần tử <article>xác định một khối các nội dung hoàn chỉnh của nhiều phần tử liên quan liên kết với nhau.
Phần tử <section> được sử dụng để tạo ra một nhóm các phần tử liên quan đến nhau.
Vậy chúng ta có cần phải dựa vào chức năng các phần tử để quyết định xem phần tử nào phải nằm bên trong phần tử nào hay không? Câu trả lời là: Không!
Trên mạng Internet, bạn có thể tìm thấy rất nhiều các trang web sử dụng phần tử <section> để chứa các phần tử <article> và ngược lại.
Bên cạnh đó bạn cũng thấy nhiều trang web sử dụng phần tử <section> chứa phần tử<section>và phần tử <article> chứa phần tử <article>.
VD về một trang báo mạng: Trong khu vực thể thao bao gồm nhiều bài viết thể thao, trong mỗi bài viết thể thao lại có một khu vực nói về kỹ thuật.
Phần tử <header> trong HTML5
Phần tử <header> xác định phần đầu của một trang tài liệu hay phần đầu của một đoạn.
Phần tử <header> nên được sử dụng như một containter chứa nội dung giới thiệu hoặc mở đầu.
Bạn có thể sử dụng một hoặc nhiều phần tử <header> trong một tài liệu.
Trong ví dụ dưới đây sử dụng một thẻ <header> bên trong một bài viết:
Ví dụ:
<article>
<header>
<h1>WWF làm gì?</h1>
<p>Sứ mệnh của WWF:</p>
</header>
<p>Sứ mệnh của WWF là ngăn chặn sự xuống cấp môi trường tự nhiên của hành tinh chúng ta và xây dựng một tương lai trong đó con người sống hài hòa với thiên nhiên.</p>
</article>
Phần tử <footer> xác định phần cuối của một trang tài liệu hay phần cuối của một đoạn.
Phần tử <footer> nên chứa thông tin như thông tin về tác giả, thông tin bản quyền, liên kết kết tới điều khoản sử dụng, thông tin liên hệ…
Bạn có thể sử dụng một hoặc nhiều phần tử <footer> trong một tài liệu.
Ví dụ:
<footer>
<p>Tác giả: Lê Văn A</p>
<p>Thông tin liên hệ: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Phần tử <nav> được sử dụng để định nghĩa một tập các liên kết điều hướng trong trang như menu.
Các phần tử <nav> được dùng cho một khối lượng lớn các liên kết điều hướng. Tuy nhiên, không phải tất cả các liên kết điều hướng trong một tài liệu cần đặt trong phần tử <nav>!
Ví dụ:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Phần tử <aside> trong HTML5
Phần tử <aside> Xác định nội dung nằm bên cạnh nội dung của trang.
Nội dung bên trong phần tử<aside> nên liên quan tới nội dung chính.
Ví dụ:
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Phần tử <figure> và <figcaption> trong HTML5
Nếu bạn để ý trong tất cả những cuốn sách, báo hay truyện thường hay có ghi chú ở dưới các bức ảnh.
Mục đích của ghi chú này là giải thích rõ nghĩa thêm cho bức ảnh đó.
Trong HTML5, hình ảnh và các ghi chú có thể được đặt cùng nhau bên trong phần tử <figure>.
Phần tử <img> định nghĩa các hình ảnh, phần tử <figcaption> định nghĩa các chú thích cho các hình ảnh.
Tại sao sử dụng các phần tử Semantic trong HTML5?
Trong HTML4, các lập trình viên thường phải tạo tên các thuộc tính riêng và dùng CSS để thiết kế các phần như:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …
Điều này có thể khiến các công cụ tìm kiếm không thể xác định chính xác nội dung có bên trong website.
Trong HTML5, các phần tử như: <header> <footer> <nav> <section> <article> làm cho mọi chuyện trở nên dễ dàng hơn rất nhiều với cả lập trình viên và các công cụ tìm kiếm.
Phần tử Semantic trong HTML5
Dưới đây là danh sách các phần tử semantic mới trong HTML5 được sắp xếp thứ tự theo bảng chữ cái:
| Thẻ | Mô tả |
|---|---|
| <article> | Định nghĩa một bài báo |
| <aside> | Xác định nội dung nằm bên cạnh nội dung của trang |
| <details> | Xác định các chi tiết khác mà người dùng có thể xem hoặc ẩn |
| <figcaption> | Định nghĩa một chú thích cho thẻ <figure> |
| <figure> | Chỉ đánh dấu một ảnh trong tài liệu. |
| <footer> | Định nghĩa phần footer cho một tài liệu hoặc một đoạn |
| <header> | Định nghĩa một tiêu đề cho một tài liệu hoặc phần |
| <main> | Chỉ định các nội dung chính của một tài liệu |
| <mark> | Định nghĩa đánh dấu/làm nổi bật văn bản |
| <nav> | Định nghĩa liên kết điều hướng |
| <section> | Định nghĩa một phần trong một tài liệu |
| <summary> | Hiển thị tiêu đề cho phần tử <details> |
| <time> | Định nghĩa ngày/giờ |
1 phản hồi
[…] <aside> […]