HTML5 Semantic

Thẻ Semantic là gì?

Thẻ semantic có tên có ý nghĩa với cả trình duyệt và các nhà phát triển.

Ví dụ các thẻ không có ý nghĩa: non-semantic: <div> và <span> tên của nó không có ý nghĩa gì liên quan đến nội dung của nó.

Ví dụ các thẻ có ý nghĩa semantic: <form>, <table>, và <img> -thẻ nêu lên được nội dung sẽ chứa.

nhiều trang web có chưa  HTML code giống như: <div id=”nav”> <div class=”header”> <div id=”footer”>
tương ứng là navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:  

HTML5 Semantic

• Thẻ HTML5 <header>

  Thẻ <header> là thẻ chứa phần HEADER của văn bản.
  Thẻ <header> thường dùng để chứa phần giới thiệu nội dung.
  Bạn có thể có nhiều thẻ  <header> trong một tài liệu web.
  Dưới đây là ví dụ về thẻ <header>.
• Thẻ HTML5 <section> 

Thẻ <section> định nghĩa các khối của tài liệu web.Theo W3C’s HTML5: “Một section là một nhóm chuyên về nội dung, thường có thẻ tiêu đề heading” A Web site’s home page could be split into sections for introduction, content, and contact information.

• Thẻ HTML5 <article>

  Thẻ <article> độc lập với phần nội dung khác của trang web
  Thẻ <artical> xác định phần nội dung chính của trang web. và phần đó có thể đọc độc lập với các phần còn lại của trang web.
  Ví dụ có thể sử dụng thẻ <article>ở:
  • Forum post
  • Blog post
  • Newspaper article

• Thẻ HTML5 <footer>

  Thẻ <footer> chỉ rõ footer của tài liệu hoặc một khối section.
  Thẻ footer chuẩn chứa thông tin về tác giả, bản quyền, link liên kết điều khoản sử dụng, thông tin liên hệ, vv.
  Bạn có thể có nhiều <footer>trong một trang web.

• Thẻ HTML5 <nav>

  Thẻ<nav> định nghĩa khu vực thiết lập các menu điều hướng.
  Thẻ <nav> bao gồm tập hợp các link điều hướng.tuy nhiên không nhất thiết tất cả các điều hướng phải nằm trong thẻ <nav>!

• Thẻ HTML5 <aside>

  Thẻ <aside> định nghĩa những nội dung bên ngoài nội dung chính.
  Nội dung của nó sẽ có liên quan đến nội dung chính

• HTML5 thẻ <figure> và<figcaption>

  ở sách và các trang báo thường có tiêu đề của ảnh.
  Mục đích của nó là đưa ra lời chú thích cho hình ảnh.
  Ở HTML5, images và tiêu đề có thể nhóm chung vào thẻ <figure>:

Vì sao nên dùng các thẻ có ý nghĩa?

Ở HTML4, Các nhà phát triển thường dùng các thuộc tính tên như:

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

Nó không có ý nghĩa với các bộ máy tìm kiếm để định nghĩa đúng nội dung tìm kiếm.

Thẻ HTML5 như: <header> <footer> <nav> <section> <article>, rất thân thiện với các bộ máy tìm kiếm