Semantic Element (Yếu tố ngữ nghĩa) trong HTML5

Yếu tố ngữ nghĩa là gì?

Trong ngôn ngữ học, ngữ nghĩa học là phân tích về ý nghĩa của từ & cụm từ trong ngôn ngữ.

Mỗi yếu tố ngữ nghĩa đều đưa một ý nghĩa riêng. Vậy nên trong HTML, mỗi Semantic Element miêu tả ý nghĩa kết cấu của yếu tố đó so với các trình duyệt & các nhà tiến triển/lập trình viên.

Chẳng hạn về yếu tố non-semantic (yếu tố không có ngữ nghĩa): <divvàgt; & <spanvàgt; – Không có miêu tả cụ thể về bài viết bên trong của nó.

Chẳng hạn về yếu tố semantic (yếu tố có ngữ nghĩa): <formvàgt;, <tablevàgt;, & <imgvàgt; – Đề ra các miêu tả cụ thể về bài viết bên trong yếu tố.

Trình duyệt suport

Google Chrome Mozilla Firefox Mạng internet Explorer Opera Safari

Các yếu tố Semantic trong HTML5 được suport trong toàn bộ các trình duyệt hiện đại.

Không những thế, bạn có thể “dạy” các trình duyệt cũ hơn cách giải quyết các phần tử mới của HTML5.

Các yếu tố Semantic mới trong HTML5

Rất là nhiều website hiện tại vẫn đang kiến trúc dựa vào các mã HTML như <div id=”nav”> <div class=”header”> <div id=”cuối trang”> để tạo giao diện có điều hướng (navigation), đầu trang (header) & footer (cuối trang).

Dưới đây, HTML5 phân phối các yếu tố semantic 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;

Yếu tố <sectionvàgt; trong HTML5

Yếu tố <sectionvàgt; đại diện cho một phần chung có trong ebook hoặc áp dụng.

Rõ ràng hơn, một section là một nhóm các bài viết có cùng đề tài.

Chẳng hạn: trang chính của một website có thể được chia thành các section như giới thiệu, bài viết, thông tin liên lạc, phản hồi…

<sectionvàgt;
<h1vàgt;Giới thiệu Webside Quantrimangvàlt;/h1vàgt;
<pvàgt;Quantrimang là webside chuyên về thủ thuật smartphone, laptop, mạng, học lập trình, fix lỗi laptop, cách sử dụng các software, software chuyên dụng, công nghệ khoa học...</pvàgt;
</sectionvàgt;

<sectionvàgt;
<h1vàgt;Đề tài chính trong Quantrimangvàlt;/h1vàgt;
<pvàgt;Quantrimang có các đề tài thân thiện với cuộc đời được update thường xuyên & liên tục như: Làng Công nghệ, Công nghệ, Khoa học, Cuộc đời, Video, Áp dụng, IPhone/IPad, Android, Lập trình.</pvàgt;
</sectionvàgt;

Kết quả nhận được:

Xem Thêm  hãy ủng hộ mình một ly cà phê nhé.
Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
BIDV: 21510002210466
Vietcombank: 0451000308735
hoặc qua ví điện tử momo

Yếu tố <articlevàgt; trong HTML5

Yếu tố <articlevàgt; được sử dụng cho các bài viết độc lập & chứa bài viết của riêng nó.

Bài viết bên trong <articlevàgt; có ý nghĩa tách biệt & có thể độc lập với các bài viết khác của website.

Chẳng hạn: một số nơi bạn có thể sử dụng <articlevàgt;:

  • Nội dung trên một Forum.
  • Nội dung trên một Blog.
  • Nội dung trên một tờ báo.
<articlevàgt;
<h1vàgt;Giới thiệu về Quantrimang.comvàlt;/h1vàgt;
<pvàgt;Bắt đầu từ một website phân phối tri thức về mạng, server, các thiết bị mạng, thủ thuật laptop. Hiện tại, Quantrimang.com đã biến đổi thành mxh về khoa học công nghệ, mở rộng bài viết để thỏa mãn nhu cầu của các member về nhiều ngành nghề công nghệ hơn hẳn như smartphone, thiết bị thông minh, điện tử, bảo mật laptop,...</pvàgt;
</articlevàgt;

Kết quả nhận được:

Yếu tố <articlevàgt; nằm trong <sectionvàgt; hay trái lại?

Trong HTML5, <articlevàgt; xác nhận một khối các bài viết hoàn chỉnh của nhiều yếu tố liên quan link với nhau.

Yếu tố <sectionvàgt; được sử dụng để tạo nên một nhóm các yếu tố liên quan đến nhau.

Vậy tất cả chúng ta có cần phải dựa theo tính năng các yếu tố để quyết định xem yếu tố nào phải nằm bên trong yếu tố nào hay không? Câu giải đáp là: Không!

Ngày nay trên Mạng internet, bạn có thể tìm ra rất là nhiều các trang web mà yếu tố <sectionvàgt; chứa các yếu tố <articlevàgt; hay yếu tố <articlevàgt; chứa các yếu tố <sectionvàgt;. Tuy nhiên bạn cũng thấy nhiều website sử dụng <sectionvàgt; chứa <sectionvàgt; & <articlevàgt; chứa <articlevàgt;. Chính vì vậy việc xác nhận yếu tố nào nằm trong yếu tố nào là không thiết yếu.

Chẳng hạn về một trang báo mạng: Trong khu vực thể thao bao gồm nhiều nội dung thể thao, trong mỗi nội dung thể thao lại có một khu vực nói về kỹ thuật.

Yếu tố <headervàgt; trong HTML5

Yếu tố <headervàgt; xác nhận phần đầu của một trang ebook hay phần đầu của một đoạn.

Yếu tố <headervàgt; nên được sử dụng như một thùng chứa bài viết giới thiệu.

Bạn có thể sử dụng một hoặc nhiều <headervàgt; trong một ebook.

Xem Thêm  h1[align=justify i]

Chẳng hạn: ta sử dụng một thẻ <headervàgt; bên trong một nội dung:

<articlevàgt;
<headervàgt;
<h1vàgt;Mục tiêu của Quantrimang.com là gì?</h1vàgt;
<pvàgt;Bổ phận dẫn dắt:</pvàgt;
</headervàgt;
<pvàgt;Chúng tôi mong chờ các member của mình luôn chớp được được những thông tin, tri thức, thiên hướng công nghệ tiên tiến nhất, cũng như gỡ rối những vấn đề công nghệ các member gặp phải khi sử dụng laptop, smartphone, các thiết bị điện tử phổ biến khác.</pvàgt;
</articlevàgt;

Kết quả nhận được:

Yếu tố <cuối trangvàgt; trong HTML5

Yếu tố <cuối trangvàgt; xác nhận phần cuối của một trang ebook hay phần cuối của một đoạn.

Yếu tố <cuối trangvàgt; thường chứa thông tin Author của ebook, thông tin bản quyền, link đến đ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 <cuối trangvàgt; trong một ebook.

Chẳng hạn:

<cuối trangvàgt;
<pvàgt;Liên hệ với chúng tôi: Quantrimang.comvàlt;/pvàgt;
<pvàgt;Địa chỉ: Số 56, Phố Duy Tân, Dịch Vọng Hậu, Cầu Giấyvàlt;/pvàgt;
<pvàgt;Thời gian phục vụ: Từ 8h - 17:30h (Thứ 2 đến thứ 6); Từ 8h - 12h00 (Thứ 7)</pvàgt;
<pvàgt;Hotline: 024 2242 6188vàlt;/pvàgt;
<pvàgt;Tin nhắn hộp thư online: <a href="mailto:[email protected]">
[email protected]</avàgt;.</pvàgt;
</cuối trangvàgt;

Kết quả nhận được:

Yếu tố <navvàgt; trong HTML5

Yếu tố <navvàgt; xác nhận một khu vực chứa các backlinks điều hướng.

Ngoài ra, không phải toàn bộ các link điều hướng trong một ebook cần đặt trong <navvàgt;

Chẳng hạn:

<navvàgt;
<a href="/Làng Công nghệ/">Làng Công nghệvàlt;/avàgt; |
<a href="/Khoa học/">Khoa họcvàlt;/avàgt; |
<a href="/Cuộc sống/">Cuộc đờivàlt;/avàgt; |
<a href="/Ứng dụng/">Áp dụngvàlt;/avàgt;
</navvàgt;

Kết quả nhận được:

Yếu tố <asidevàgt; trong HTML5

Yếu tố <asidevàgt; xác nhận bài viết nằm bên cạnh bài viết của trang.

Bài viết bên trong <asidevàgt; liên quan tới bài viết chính.

Chẳng hạn:

<pvàgt;Quantrimang thỏa mãn nhu cầu của các member về nhiều ngành nghề khác nhau như Công nghệ, cuộc đời, áp dụng...</pvàgt;

<asidevàgt;
<h4vàgt;Công nghệvàlt;/h4vàgt;
<pvàgt;Những thiên hướng, tìm tòi, phân tích tiên tiến nhất về khoa học công nghệ sẽ được Quản Trị Mạng update tại đây.</pvàgt;
<h4vàgt;Cuộc đờivàlt;/h4vàgt;
<pvàgt;Tuyệt kỹ sống, tuyệt kỹ công việc, tuyệt kỹ chỉ huy, cách thức vặt cuộc đời, những điều có thể bạn chưa biết, những câu nói hay về cuộc đời, câu nói nổi tiếng của Jack Ma, Bill Gate, Steve Jobs,...</pvàgt;
</asidevàgt;

Kết quả nhận được:

Yếu tố <figurevàgt; & <figcaptionvàgt; trong HTML5

Mục đích của yếu tố <figcaptionvàgt; là giải thích rõ nghĩa thêm cho bức ảnh được thêm vào, cũng giống như các chú giải/chú thích bên dưới tranh ảnh trong các bài báo, sách truyện.

Xem Thêm  brd_c_r""

Trong HTML5, hình ảnh & các chú thích trong <figcaptionvàgt; có thể được đặt bên nhau bên trong yếu tố <figurevàgt;.

Chẳng hạn:

<h2vàgt;Giới thiệu về Quantrimang.comvàlt;/h2vàgt;
<pvàgt;Bắt đầu từ một website phân phối tri thức về mạng, server, các thiết bị mạng, thủ thuật laptop. Hiện tại, Quantrimang.com đã biến đổi thành mxh về khoa học công nghệ, mở rộng bài viết để thỏa mãn nhu cầu của các member về nhiều ngành nghề công nghệ hơn hẳn như smartphone, thiết bị thông minh, điện tử, bảo mật laptop,...</pvàgt;
<figurevàgt;
<img src="quantrimangindex.jpg" alt="Quantrimang" style="width:50%">
<figcaptionvàgt;Home page Quantrimang tại địa chỉ Quantrimang.comvàlt;/figcaptionvàgt;
</figurevàgt; 

Kết quả nhận được:

Vì sao sử dụng các yếu tố Semantic trong HTML5?

Trong HTML4, các lập trình viên thường phải tạo tên các tính chất riêng để kiến trúc các phần như: header, top, bottom, cuối trang, danh sách, navigation, main, container, content, article, sidebar, topnav…

Điều này khiến dụng cụ tìm kiếm không thân thể định bài viết có bên trong website đúng đắn.

Trong HTML5, các phần tử như: <headervàgt; <cuối trangvàgt; <navvàgt; <sectionvàgt; <articlevàgt; khiến cho mọi thứ trở nên đơn giản hơn rất là nhiều.

Yếu tố Semantic trong HTML5

Dưới đây là danh mục các yếu tố semantic mới trong HTML5:

Yếu tố

Ý nghĩa

<articlevàgt;

Xác nhận một nội dung/bài báo

<asidevàgt;

Xác nhận bài viết nằm bên cạnh bài viết của trang

<detailsvàgt;

Xác nhận các cụ thể mà người dùng có thể xem hoặc ẩn

<figcaptionvàgt;

Chú giải cho thẻ <figurevàgt;

<figurevàgt;

Đánh dấu bài viết ảnh trong ebook

<cuối trangvàgt;

Xác nhận phần cuối của một trang ebook hay một đoạn

<headervàgt;

X

ác định phần đầu của một trang ebook hay một đoạn.

<mainvàgt;

Chỉ định các bài viết chính của một ebook

<markvàgt;

Xác nhận vùng đánh dấu/làm nổi trội văn bản

<navvàgt;Xác nhận một khu vực chứa các backlinks điều hướngvàlt;sectionvàgt;Xác nhận một phần trong ebookvàlt;summaryvàgt;Hiển thị tiêu đề cho phần tử <detailsvàgt;<timevàgt;Xác nhận ngày/giờ

Bài trước: Các phần tử mới trong HTML5

Bài tiếp: Cách chuyển từ HTML4 sang HTML5

Viết một bình luận