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ự phân tích về ý nghĩa của từ & cụm từ trong ngôn ngữ.

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

 

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

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

Chẳng hạn về phần tử không đưa ngữ nghĩa: <divvàgt; & <spanvàgt; – Không nói gì về bài viết của nó.

Chẳng hạn về phần tử ngữ nghĩa: <formvàgt;, <tablevàgt;, & <articlevàgt; – Xác nhận bài viết rõ ràng và cụ thể bài viết của nó.

Các phần tử ngữ nghĩa trong HTML5 được suport bởi toàn bộ 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ũ phương pháp để giải quyết các “phần tử lạ”.

 

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

Có nhiều website site chứa mã HTML dạng: <div id=”nav”> <div class=”header”> <div id=”footer”> để nêu ra thanh điều hướng,header, & cuối trang.

HTML5 đem đến các phần tử ngữ nghĩa mới để xác nhận các phần khác nhau của một website:

  • <articlevàgt;
  • <asidevàgt;
  • <detailsvàgt;
  • <figcaptionvàgt;
  • <figurevàgt;
  • <cuối trangvàgt;
  • <headervàgt;
  • <mainvàgt;
  • <markvàgt;
  • <navvàgt;
  • <sectionvàgt;
  • <summaryvàgt;
  • <timevàgt;

Phần tử <sectionvàgt; HTML5

Phần tử <sectionvàgt; định nghĩa một phần của ebook.

Theo ebook 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 home page thường được chia thành các phần cho giới thiệu, bài viết, & thông tin liên lạc.

Xem Thêm  h1[align=right i]

Chẳng hạn

<sectionvàgt;
  <h1vàgt;WWFvàlt;/h1vàgt;
  <pvàgt;The World Wide Fund for Nature (WWF) is....</pvàgt;
</sectionvàgt; 

 

Phần tử <articlevàgt; HTML5

Phần tử <articlevàgt; (nội dung) nêu ra bài viết độc lập.

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

Chẳng hạn nơi phần tử <articlevàgt; có thể được dùng:

  • Forum bài viết
  • Blog bài viết
  • Bài báo

Chẳng hạn

<articlevàgt;
  <h1vàgt;What Does WWF Do?</h1vàgt;
  <pvàgt;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.</pvàgt;
</articlevàgt; 

 

Lồng phần tử <articlevàgt; trong <sectionvàgt; hoặc trái lại?

Phần tử <articlevàgt; nêu ra phần tử có bài viết độc lập.

Phần tử <sectionvàgt; xác nhận một phần của ebook.

Tất cả chúng ta chẳ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 mạng internet, bạn sẽ thấy những trang với phần tử <sectionvàgt; chứa phần tử <articlevàgt;, & phần tử <articlevàgt; chứa phần tử <sectionvàgt;

Chẳng hạn: Trong một bài báo, nội dung(<articlevàgt;) trong mục(<sectionvàgt;) thể thao, có thể có nhiều mục(<sectionvàgt;) trong bài(<articlevàgt;).

 

Phần tử <headervàgt; HTML5

Phần tử <headervàgt; nêu ra một tiêu đề cho trang hoặc một section.

Phần tử <headervàgt; nên được dùng như bộ chứa cho bài viết mở màn.

Có thể có nhiều phần tử <headervàgt; trong một trang.

Chẳng hạn sau xác nhận một tiêu đề cho một nội dung

<articlevàgt;
  <headervàgt;
    <h1vàgt;What Does WWF Do?</h1vàgt;
    <pvàgt;WWF's mission:</pvàgt;
  </headervàgt;
  <pvàgt;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.</pvàgt;
</articlevàgt; 

 

Xem Thêm  Hộp Số Tự Đông 6 Cấp Là Gì, Hộp Số Tự Động 6 Cấp, Vô Cấp Là Gì

Phần tử <cuối trangvàgt; HTML5

Phần tử <cuối trangvàgt; nêu ra phần chân trang cho ebook hoặc một section.

Phần tử <cuối trangvàgt; nên chứa thông tin về phần tử chứa nó.

Một cuối trang thường bao gồm Author của ebook, thông tin bản quyền, link 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ử <cuối trangvàgt; trong một trang

Chẳng hạn

<cuối trangvàgt;
  <pvàgt;Posted by: Hege Refsnesvàlt;/pvàgt;
  <pvàgt;Contact information: <a href="mailto:someone@example.com">
  someone@example.comvàlt;/avàgt;.</pvàgt;
</cuối trangvàgt; 

 

Phần tử <navvàgt; HTML5

Phần tử <navvàgt; xác nhận tập hợp các link điều hướng.

Cảnh báo: Không phải mọi link trong tài liều đều nên đặt bên trong phần tử <navvàgt;. Phần tử <navvàgt; thường giành cho các khối lớn hoặc các link điều hướng.

Chẳng hạn

<navvàgt;
  <a href="/html/">HTMLvàlt;/avàgt; |
  <a href="/css/">CSSvàlt;/avàgt; |
  <a href="/js/">JavaScriptvàlt;/avàgt; |
  <a href="/jquery/">jQueryvàlt;/avàgt;
</navvàgt; 

 

Phần tử <asidevàgt; HTML5

Phần tử <asidevàgt; xác nhận một số bài viết bên cạnh bài viết chính (gần giống thanh bên).

Bài viết <asidevàgt; nên liên quan tới các bài viết xoay quang.

Chẳng hạn

<pvàgt;Tôi & gia đình đã thăm quan trọng điểm Epcot vào mùa hè này.</pvàgt;

<asidevàgt;
  <h4vàgt;Epcot Centervàlt;/h4vàgt;
  <pvàgt;Epcot Center là công viên tiêu khiển ở Disney World, Florida.</pvàgt;
</asidevàgt; 

 

Phần tử <figurevàgt; & <figcaptionvàgt; HTML5

Mục đích của figure caption là để thêm một biểu đạt một hình ảnh.

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

Chẳng hạn

<figurevàgt;
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaptionvàgt;Fig1. - Trulli, Puglia, Italy.</figcaptionvàgt;
</figurevàgt; 

Phần tử <imgvàgt; xác nhận hình ảnh, phần tử <figcaptionvàgt; xác nhận tiêu đề.

Xem Thêm  -attributes-and-apis:the-meta-element"">meta element as an extension of the element's

 

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, cuối trang, danh sách, 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ận chuẩn xác bài viết website.

Với các phần tử mới của HTML5 (<headervàgt; <cuối trangvàgt; <navvàgt; <sectionvàgt; <articlevàgt;), việc này trở nên đơn giản hơn.

Theo W3C, một Website 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

Thẻ

Miêu tả

<articlevàgt;

Xác nhận một nội dung

<asidevàgt;

Xác nhận bài viết lè bên cạnh bài viết trang

<detailsvàgt;

Xác nhận thông tin thêm để người dùng có thể xem hoặc ẩn đi

<figcaptionvàgt;

Xác nhận tiêu đề cho phần tử <figurevàgt;

<figurevàgt;

Xác nhận bài viết độc lập như hình minh họa, biểu đồ, hình ảnh, mục lục cod,v.v…

<cuối trangvàgt;

Xác nhận chân trang cho ebook hoặc section

<headervàgt;

Xác nhận tiêu đề cho ebook hoặc section

<mainvàgt;

Xác nhận bài viết chính cho ebook

<markvàgt;

Xác nhận văn bản được đánh dấu

<navvàgt;

Xác nhận các link điều hướng

<sectionvàgt;

Xác nhận một vùng trong ebook

<summaryvàgt;

Xác nhận một tiêu đề hữu hình(phần tiêu đề có thể chứng kiến) cho phần tử <detailsvàgt;

<timevàgt;

Xác nhận ngày/giờ

 

 

 

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

By ads_php

Trả lời