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

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

Ngữ nghĩa học là sự nghiên cứu về ý nghĩa của từ và cụm từ trong ngôn ngữ.

Phần tử ngữ nghĩa = phần tử mang ý nghĩa.

Phần tử nghữ nghĩa là gì?

Một phần tử ngữ nghĩa mô tả rõ ràng ý nghĩa của nó cho cả trình duyệt và lập trình viên.

Ví dụ về phần tử không mang ngữ nghĩa: <div> và <span> - Không nói gì về nội dung của nó.

Ví dụ về phần tử ngữ nghĩa: <form>, <table>, và <article> - Xác định nội dung rõ ràng nội dung của nó.

Các phần tử ngữ nghĩa trong HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Thêm vào đó, bạn có thể “dạy” các trình duyệt cũ cách để xử lý các “phần tử lạ”.

Các phần tử nghữ nghĩa mới trong HTML5

Có nhiều web site chứa mã HTML dạng: <div id="nav"> <div class="header"> <div id="footer"> để chỉ ra thanh điều hướng,header, và footer.

HTML5 mang đến các phần tử ngữ nghĩa mới để xác định các 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> HTML5

Phần tử <section> định nghĩa một phần của tài liệu.

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

Một trang chủ thường được chia thành các phần cho giới thiệu, nội dung, và thông tin liên lạc.

Ví dụ

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

Phần tử <article> HTML5

Phần tử <article> (bài viết) chỉ ra nội dung độc lập.

Một bài viết nên có nội dung riêng và có thể đọc độc lập với phần còn lại của trang web.

Ví dụ nơi phần tử <article> có thể được dùng:

• Forum post
• Blog post
• Bài báo

Ví dụ

<article>
  <h1>What Does WWF Do?</h1>
  <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> 

Lồng phần tử <article> trong <section> hoặc ngược lại?

Phần tử <article> chỉ ra phần tử có nội dung độc lập.

Phần tử <section> xác định một phần của tài liệu.

Chúng ta không thể dùng định nghĩa để quyết định cách lồng những phần tử này.

Vậy nên, trên internet, bạn sẽ thấy những trang với phần tử <section> chứa phần tử <article>, và phần tử <article> chứa phần tử <section>

Ví dụ: Trong một bài báo, bài viết(<article>) trong mục(<section>) thể thao, có thể có nhiều mục(<section>) trong bài(<article>).

Phần tử <header> HTML5

Phần tử <header> chỉ ra một tiêu đề cho trang hoặc một section.

Phần tử <header> nên được dùng như bộ chứa cho nội dung mở đầu.

Có thể có nhiều phần tử <header> trong một trang.

Ví dụ sau xác định một tiêu đề cho một bài viết

<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ử <footer> HTML5

Phần tử <footer> chỉ ra phần chân trang cho tài liệu hoặc một section.

Phần tử <footer> nên chứa thông tin về phần tử chứa nó.

Một footer thường bao gồm tác giả của tài liệu, thông tin bản quyền, liên kết tới điều khoản sử dụng, thông tin liên lạc,v.v...

Có thể có nhiều phần tử <footer> trong một trang

Ví dụ

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer> 

Phần tử <nav> HTML5

Phần tử <nav> xác định tập hợp các liên kết điều hướng.

Lưu ý: Không phải mọi liên kết trong tài liều đều nên đặt bên trong phần tử <nav>. Phần tử <nav> thường dành cho các khối lớn hoặc các liên kết điều hướng.

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> HTML5

Phần tử <aside> xác định một số nội dung bên cạnh nội dung chính (gần giống thanh bên).

Nội dung <aside> nên liên quan tới các nội dung xung quanh.

Ví dụ

<p>Tôi và gia đình đã thăm quan trung tâm Epcot vào mùa hè này.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>Epcot Center là công viên giải trí ở Disney World, Florida.</p>
</aside> 

Phần tử <figure> và <figcaption> HTML5

Mục đích của figure caption là để thêm một diễn tả một hình ảnh.

Trong HTML5, một hình ảnh và tiêu đề có thể được nhóm chung trong một phần tử <figure>

Ví dụ

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure> 

Phần tử <img> xác định hình ảnh, phần tử <figcaption> xác định tiêu đề.

Sao lại có phần tử ngữ nghĩa?

Với HTML4, các lập trình viên đã sử dụng tên id/class của chúng để style các phần tử: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, v.v...

Điều này giúp các bộ tìm kiếm có khả năng xác định chính xác nội dung trang web.

Với các phần tử mới của HTML5 (<header> <footer> <nav> <section> <article>), việc này trở nên dễ dàng hơn.

Theo W3C, một Web ngữ nghĩa: “Cho phép dữ liệu được chia sẻ và tái sử dụng giữa các ứng dụng, doanh nghiệp, và cộng đồng.”

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

Trích nguồn từ: (https://www.w3schools.com/html/html5_semantic_elements.asp)