Phần tử ngữ nghĩa HTML
Các yếu tố ngữ nghĩa = các yếu tố có một ý nghĩa.
Các yếu tố ngữ nghĩa là gì?
Phần tử ngữ nghĩa mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển.
Ví dụ về các yếu tố phi ngữ nghĩa : <div>và <span>- Không cho biết gì về nội dung của nó.
Ví dụ về các yếu tố ngữ nghĩa:,<form> và <table>- <article>Xác định rõ ràng nội dung của nó.
Các phần tử ngữ nghĩa trong HTML
Nhiều trang web chứa mã HTML như: <div id = "nav"> <div class = "header"> <div id = "footer"> để biểu thị điều hướng, đầu trang và chân trang.
Trong HTML, có một số phần tử ngữ nghĩa có thể được sử dụng để xác định các phần khác nhau của trang web:
- <hạt>
- <bên ngoài>
- <chi tiết>
- <figcaption>
- <cấu hình>
- <footer>
- <header>
- <chính>
- <dấu>
- <nav>
- <phần>
- <sơ lược>
- <thời gian>
Phần tử <section> HTML
Phần <section>tử xác định một phần trong tài liệu.
Theo tài liệu HTML của W3C: "Phần là một nhóm nội dung theo chủ đề, thường có tiêu đề."
Ví dụ về nơi một <section>phần tử có thể được sử dụng:
- Chương
- Giới thiệu
- Mục tin tức
- Thông tin liên lạc
Một trang web thông thường có thể được chia thành các phần để giới thiệu, nội dung và thông tin liên hệ.
Thí dụ
Hai phần trong một tài liệu:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
Phần tử HTML <article>
Phần <article>tử chỉ định nội dung độc lập, khép kín.
Một bài báo nên tự nó có ý nghĩa và có thể phân phối nó một cách độc lập với phần còn lại của trang web.
Ví dụ về nơi <article>có thể sử dụng phần tử:
- Bài đăng trên diễn đàn
- Bài đăng trên blog
- Ý kiến người sử dụng
- Thẻ sản phẩm
- Các bài báo
Thí dụ
Ba bài báo có nội dung độc lập, khép kín:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Ví dụ 2
Sử dụng CSS để tạo kiểu cho phần tử <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Lồng <article> trong <section> hay Vice Versa?
Phần <article>
tử chỉ định nội dung độc lập, khép kín.
Phần <section>tử xác định phần trong tài liệu.
Chúng ta có thể sử dụng các định nghĩa để quyết định cách lồng các phần tử đó không? Không chúng tôi không thể!
Vì vậy, bạn sẽ tìm thấy các trang HTML có <section>phần tử chứa <article>phần tử và <article>phần tử chứa <section>phần tử.
Phần tử HTML <header>
Phần <header>tử đại diện cho một vùng chứa cho nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng.
Một <header>phần tử thường chứa:
- một hoặc nhiều phần tử tiêu đề (<h1> - <h6>)
- logo hoặc biểu tượng
- thông tin về quyền tác giả
Lưu ý: Bạn có thể có nhiều <header>phần tử trong một tài liệu HTML. Tuy nhiên, không <header>thể được đặt trong một hoặc một phần tử khác.<footer><address><header>
Thí dụ
Tiêu đề cho một <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Phần tử HTML <footer>
Phần <footer>tử xác định chân trang cho tài liệu hoặc phần.
Một <footer>phần tử thường chứa:
- thông tin về quyền tác giả
- Thông tin bản quyền
- thông tin liên lạc
- sơ đồ trang web
- quay lại liên kết hàng đầu
- tài liệu liên quan
Bạn có thể có nhiều <footer>phần tử trong một tài liệu.
Thí dụ
Phần chân trang trong tài liệu:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Phần tử HTML <nav>
Phần <nav>tử xác định một tập hợp các liên kết điều hướng.
Lưu ý rằng KHÔNG phải tất cả các liên kết của một tài liệu phải nằm bên trong một <nav>phần tử. Phần
<nav>tử chỉ dành cho khối liên kết điều hướng chính.
Các trình duyệt, chẳng hạn như trình đọc màn hình cho người dùng bị vô hiệu, có thể sử dụng phần tử này để xác định xem có bỏ qua hiển thị ban đầu của nội dung này hay không.
Thí dụ
Một tập hợp các liên kết điều hướng:
<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ử HTML <aside>
Phần <aside>tử xác định một số nội dung ngoài nội dung mà nó được đặt trong (như một thanh bên).
Nội <aside>dung cần liên quan gián tiếp đến nội dung xung quanh.
Thí dụ
Hiển thị một số nội dung ngoài nội dung mà nó được đặt trong:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Ví dụ 2
Sử dụng CSS để tạo kiểu cho phần tử <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Phần tử HTML <figure> và <figcaption>
Thẻ <figure>chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.
Thẻ <figcaption>xác định chú thích cho một <figure>phần tử. Phần <figcaption>tử có thể được đặt làm con đầu tiên hoặc con cuối cùng của một <figure>phần tử.
Phần <img>tử xác định hình ảnh / hình minh họa thực tế.
Thí dụ
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Tại sao lại là yếu tố ngữ nghĩa?
Theo W3C: "Web ngữ nghĩa cho phép dữ liệu được chia sẻ và sử dụng lại giữa các ứng dụng, doanh nghiệp và cộng đồng."
Các phần tử ngữ nghĩa trong HTML
Dưới đây là danh sách một số thành phần ngữ nghĩa trong HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .