HTML5 语义元素

Ngữ nghĩa học (gốc rễ từ Hy Lạp cổ đại) có thể được định nghĩa là nghiên cứu về ý nghĩa của ngôn ngữ.

Các element nghĩa là các element có nghĩa.

Điều gì là element nghĩa?

Các element nghĩa mô tả rõ ràng ý nghĩa của chúng cho trình duyệt và nhà phát triển.

Không nghĩaVí dụ về element: <div> và <span> - không thể cung cấp thông tin về nội dung của chúng.

NghĩaVí dụ về element: <form>, <table> và <img> - định nghĩa rõ ràng nội dung của chúng.

Hỗ trợ trình duyệt

Yes Yes Yes Yes Yes

Tất cả các trình duyệt hiện đại đều hỗ trợ các element nghĩa trong HTML5.

Ngoài ra, bạn có thể “giúp đỡ” trình duyệt cũ xử lý “element không biết”.

Học thêm về chương này trong trình duyệt HTML5.

Các element nghĩa mới trong HTML5

Nhiều trang web chứa mã HTML để chỉ dẫn điều hướng, tiêu đề và chân trang, chẳng hạn như: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 cung cấp các element nghĩa mới để định nghĩa các phần khác nhau của trang.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 语义元素

HTML5 语义元素

Element <section> trong HTML5

Định nghĩa phần (section) trong tài liệu.

Theo tài liệu HTML của W3C: “Phần (section) là nhóm nội dung có chủ đề, thường có tiêu đề”.

Có thể phân chia trang chủ của trang web thành các phần như giới thiệu, nội dung, thông tin liên hệ và vân vân.

Mô hình

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Thử ngay lập tức

Thẻ <article> trong HTML5

Thẻ <article> quy định nội dung tự bao gồm độc lập.

Tài liệu có ý nghĩa riêng và có thể được đọc độc lập khỏi nội dung khác của trang web.

Ứng dụng của thẻ <article>:

  • Diễn đàn
  • Blog
  • Tin tức

Mô hình

<article>
   <h1>WWF làm gì?</h1>
   <p>Mission của WWF là ngăn chặn sự suy giảm môi trường tự nhiên của hành tinh của chúng ta,</p>
  và xây dựng một tương lai mà con người sống hòa thuận với tự nhiên.</p>
</article>

Thử ngay lập tức

Các yếu tố ngữ nghĩa được嵌套

Trong tiêu chuẩn HTML5, thẻ <article> được định nghĩa là khối yếu tố tự bao gồm liên quan.

Thẻ <section> được định nghĩa là khối yếu tố liên quan.

Chúng ta có thể sử dụng định nghĩa này để quyết định cách嵌套 các yếu tố không? Không, chúng ta không thể!

Trên internet, bạn sẽ thấy các trang HTML chứa thẻ <section> và thẻ <article>, cũng như các trang chứa thẻ <sections> và thẻ <article>.

Bạn cũng sẽ thấy thẻ <section> chứa thẻ <section>, và thẻ <article> chứa thẻ <article>.

Thẻ <header> trong HTML5

Thẻ <header> quy định tiêu đề trang cho tài liệu hoặc phần.

Thẻ <header> nên được sử dụng như một bộ chứa nội dung giới thiệu.

Một tài liệu có thể có nhiều thẻ <header>.

Dưới đây là ví dụ về một bài viết định nghĩa tiêu đề trang:

Mô hình

<article>
   <header>
     <h1>WWF làm gì?</h1>
     <p>Mission của WWF:</p>
   </header>
   <p>Mission của WWF là ngăn chặn sự suy giảm môi trường tự nhiên của hành tinh của chúng ta,</p>
  và xây dựng một tương lai mà con người sống hòa thuận với tự nhiên.</p>
</article>

Thử ngay lập tức

Thẻ <footer> trong HTML5

Thẻ <footer> quy định chân đề cho tài liệu hoặc phần.

Thẻ <footer> nên cung cấp thông tin về các yếu tố chứa trong nó.

Chân đề thường chứa thông tin tác giả tài liệu, thông tin bản quyền, liên kết điều khoản sử dụng, thông tin liên hệ và nhiều thứ khác.

Bạn có thể sử dụng nhiều thẻ <footer> trong một tài liệu.

Mô hình

<footer>
   <p>Đăng bởi: Hege Refsnes</p>
   <p>Thông tin liên hệ: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Thử ngay lập tức

Yếu tố <nav> của HTML5

Yếu tố <nav> định nghĩa bộ sưu tập liên kết điều hướng.

Yếu tố <nav> nhằm mục đích định nghĩa khối liên kết điều hướng lớn. Tuy nhiên, không phải tất cả các liên kết trong tài liệu nên nằm trong yếu tố <nav>!

Mô hình

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Thử ngay lập tức

Yếu tố <aside> của HTML5

<aside> là yếu tố chứa một số nội dung bên ngoài nội dung chính trang (ví dụ: thanh bên).

Nội dung của aside nên liên quan đến nội dung xung quanh.

Mô hình

<p>Gia đình tôi và tôi đã đến thăm Epcot Center vào mùa hè này.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center là một khu vui chơi giải trí trong Disney World, Florida.</p>
</aside>

Thử ngay lập tức

Yếu tố <figure> và <figcaption> của HTML5

Trong sách và báo, tiêu đề đi kèm với hình ảnh rất phổ biến.

Công dụng của tiêu đề (caption) là thêm giải thích hiển thị cho hình ảnh.

Bằng HTML5, hình ảnh và tiêu đề có thể được kết hợp trong <figure> Trong yếu tố:

Mô hình

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Thử ngay lập tức

<img> Yếu tố định nghĩa hình ảnh,<figcaption> Yếu tố định nghĩa tiêu đề.

Tại sao sử dụng yếu tố HTML5?

Nếu sử dụng HTML4, nhà phát triển sẽ sử dụng tên thuộc tính yêu thích của họ để thiết lập phong cách cho các yếu tố trang web:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

Như vậy, trình duyệt sẽ không thể nhận biết nội dung trang web chính xác.

Và thông qua các phần tử HTML5 như: <header> <footer> <nav> <section> <article>, vấn đề này được giải quyết một cách dễ dàng.

Theo W3C, mạng ngữ nghĩa:

“Cho phép chia sẻ và tái sử dụng dữ liệu giữa các ứng dụng, doanh nghiệp và tổ chức.”

Các phần tử ngữ nghĩa trong HTML5

Dưới đây là danh sách các phần tử ngữ nghĩa mới của HTML5 được sắp xếp theo thứ tự字母.

Những liên kết này dẫn đến Hướng dẫn tham khảo HTML đầy đủ.

Thẻ Mô tả
<article> Định nghĩa bài viết.
<aside> Định nghĩa nội dung ngoài nội dung trang.
<details> Định nghĩa chi tiết bổ sung mà người dùng có thể xem hoặc ẩn.
<figcaption> Định nghĩa tiêu đề của phần tử <figure>.
<figure> Định nghĩa nội dung không thuộc nội dung trang.
<footer> Định nghĩa chân trang của tài liệu hoặc phần.
<header> Định nghĩa tiêu đề trang hoặc phần của tài liệu.
<main> Định nghĩa nội dung chính của tài liệu.
<mark> Định nghĩa văn bản quan trọng hoặc được nhấn mạnh.
<nav> Định nghĩa liên kết điều hướng.
<section> Định nghĩa phần của tài liệu.
<summary> Định nghĩa tiêu đề nhìn thấy được của phần tử <details>.
<time> Định nghĩa ngày/giờ.