[HTML/HTML5] Phần 37: Các phần tử ngữ nghĩa trong HTML5

49 lượt xem

Semantics (ngữ nghĩa học) là một ngành nghiên cứu về ý nghĩa của các từ ngữ và cụm từ trong một ngôn ngữ. Các phần tử semantic (ngữ nghĩa) chính là các phần tử có ý nghĩa.

Phần tử semantic là gì?
Một phần tử semantic mô tả ý nghĩa của nó đối với trình duyệt và nhà phát triển. Ví dụ những phần tử không phải semantic như: div và span. Hai phần tử này không có thể hiện ý nghĩa nào khi nhắc đến. Trái lại, các phần tử ngữ nghĩa như: form, table và article thì lại mô tả đầy đủ ý nghĩa. Table làm người ta hình dùng là 1 cái bảng biểu, form là 1 mẫu đơn, và article là 1 bài viết nào đó.

Tất cả phần tử HTML5 đều được đa số trình duyệt hiện đại hỗ trợ. Hơn nữa, đối với những trình duyệt phiên bản cũ, bạn vẫn có thể định nghĩa định dạng của các phần tử ngữ nghĩa HTML5 mới.

Các phần tử ngữ nghĩa mới trong HTML5
Trước đây, khi xây dựng giao diện website, nhiều lập trình viên thường dùng: <div id=”nav”> <div class=”header”> <div id=”footer”> để mô tả phần thanh menu (navigation – điều hướng), phần tiêu đề, và phần chân trang. HTML5 cung cấp một số phần tử ngữ nghĩa giúp định nghĩa các phần trong một trang và giúp các robot (search engine) hiểu rõ hơn về cấu trúc trang web. Một số phần tử mới như:

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

Phần tử section (phần)
Phần tử này định nghĩa một phần trong một tài liệu HTML. Theo W3C: “Một sectioc là một nhóm nội dung theo chủ đề, thường có một tiêu đề.” Như vậy, một trang chủ (index.html) có thể chia thành các section như giới thiệu, nội dung và thông tin liên hệ. Ví dụ phần giới thiệu về trang web dammio.com.

<section>
  <h1>DAMMIO</h1>
  <p>DAMMIO là một trang web chuyên về mảng công nghệ & ngôn ngữ....</p>
</section>

Phần tử article (bài viết)
Phần tử article định nghĩa một nội dung độc lập và khép kín. Một article có ý nghĩa của riêng nó, và có thể xem độc lập với toàn bộ website. Các ví dụ về các chỗ dùng phần tử article có thể là: bài viết diễn đàn, bài viết blog, hay bài báo tin tức. Ví dụ một bài viết giới thiệu về trang web dammio.com

<article>
  <h1>Giới thiệu về website DAMMIO</h1>
  <p>DAMMIO là một trang web chuyên về mảng công nghệ & ngôn ngữ....</p>
</article>

Lồng phần tử article bên trong section hay ngược lại?
Phần tử article đặc tả nội dung độc lập và khép kín. Trong khi đó, phần tử section định nghĩa một phần trong một tài liệu. Dựa vào hai định nghĩa, liệu chúng ta có thể đưa ra quyết định phần tử nào nên nằm trong phần tử nào? Tất nhiên là không. Trên Internet, đôi lúc bạn sẽ thấy một số trang HTML có phần tử section bên trong article và ngược lại. Tương tự, bạn cũng có thấy các trang với phần tử section nằm bên trong section, article nằm bên trong article. Do đó, việc sử dụng phần tử nào lồng phần tử nào là thuộc về bạn và tùy theo ý thích và sự hợp lý của giao diện web.

Phần tử header
Phần tử header đặc tả phần đầu của một tài liệu. Phần tử này thường dùng là vùng chứa của nội dung mở đầu. Bạn có thể dùng nhiều phần tử header nếu muốn.

<article>
  <header>
    <h1>Thông tin về trang DAMMIO</h1>
    <p>Chức năng:</p>
  </header>
  <p>DAMMIO cung cấp nội dung về công nghệ và ngôn ngữ tới tất cả mọi người đọc và hiểu tiếng Việt...</p>
</article>

Phần tử footer
Phần tử footer mô tả phần chân trang (đáy trang) của một tài liệu hay một phần. Phần tử fotter thường chứa thông tin tác giả của trang web, thông tin bản quyền, liên kết đến điều lệ sử dụng, thông tin liên hệ,… Bạn cũng có thể dùng nhiều footer nếu muốn.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

Phần tử nav
Phần tử nav định nghĩa tập các liên kết điều hướng như menu chính, menu phụ, danh mục,… Lưu ý không phải tất cả các liên kết trong tài liệu đều phải nằm bên trong phần tử nav. Phần tử này chỉ nên dùng cho các liên kết điều hướng chính của website.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">AngularJS</a> |
  <a href="/jquery/">Bootstrap</a>
</nav>

Phần tử aside
Phần tử aside định nghĩa một vài nội dung bên cạnh nội dung chính, chẳng hạn như sidebar (thanh bên hay cột bên). Phần tử aside nên chứa nội dung xoay quanh nội dung chính.

<p>Website dammio.com chứa kiến thức về thiết kế Web, điển hình như ngôn ngữ HTML.</p>

<aside>
  <h4>HTML</h4>
  <p>HTML là một ngôn ngữ đánh dấu văn bản dùng để thiết kế giao diện Web.</p>
</aside>

Phần tử figure và figcaption
Mục đích của một nhãn figure là thêm giải thích có thể thấy được cho một hình ảnh. Trong HTML5, một hình ảnh và một nhãn có thể gom nhóm trong phần tử figure. Ví dụ sau img là phần tử định nghĩa hình ảnh, và phần tử figcaption định nghĩa nhãn mô tả hình ảnh đó.

Logo website
Hình 1. – Logo website dammio.com
<figure>
  <img src="http://www.dammio.com/wp-content/uploads/2017/08/cropped-logo_dammio.png" alt="Logo website" width="300">
  <figcaption>Hình 1. - Logo website dammio.com</figcaption>
</figure>

Tại sao phải dùng phần tử semantic?
Trong HTML4, các nhà phát triển web sử dụng thuộc tính id/class để định nghĩa các vùng: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, … Tuy nhiên, điều này làm các cơ chế tìm kiếm (Google) không thể nhận diện được nội dung và cấu trúc trang dễ dàng. Do đó, HTML5 ra đời và chứa các phần tử ngữ nghĩa giúp giải quyết vấn đề này. Theo W3C, một web ngữ nghĩa: “cho phép dữ liệu được chia sẻ và tái sử dụng ở nhiều ứng dụng, doang nghiệp và cộng đồng”.

Kết luận: Bài này giúp bạn hiểu rõ về các phần tử ngữ nghĩa trong HTML5 và lý do tại sao nên dùng các phần tử này trong thiết kế website. Mời bạn tiếp tục theo dõi bài tiếp theo.

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] [HTML/HTML5] Phần 37: Các phần tử ngữ nghĩa trong HTML5 […]