Semantic Elements là gì?
Sematic element mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển.
Ví dụ về các non-semantic: <div> và <span> - Không cho biết gì về nội dung của nó.
Ví dụ về các semantic: <form>, <table> và <article> - Xác định rõ nội dung của nó.
Semantic Elements trong HTML
Nhiều trang web hiện nay có thể chứa mã HTML như: <div id = "nav"> <div class = "header"> <div id = "footer"> để biểu thị điều hướng, đầu trang và chân trang.
Trong HTML, có một số phần tử ngữ nghĩa có thể được sử dụng để xác định các phần khác nhau của trang web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML <section> Element
Phần tử <section> xác định một phần trong tài liệu.
Theo tài liệu HTML của W3C: "Section là một nhóm nội dung theo chủ đề, thường có một tiêu đề."
Ví dụ về nơi có thể sử dụng phần tử <section>:
- Chương.
- Giới thiệu.
- Các mục tin tức.
- Thông tin liên hệ.
Một trang web thông thường có thể được chia thành các phần: giới thiệu, nội dung và thông tin liên hệ.
Ví dụ
<section> <h1>WWF</h1> <p>World Wide Fund for Nature (WWF) là một tổ chức quốc tế làm việc về các vấn đề liên quan đến bảo tồn, nghiên cứu và phục hồi môi trường, trước đây có tên là World Wildlife Fund. WWF được thành lập vào năm 1961.</p> </section> <section> <h1>WWF's biểu tượng Gấu trúc</h1> <p>Gấu trúc đã trở thành biểu tượng của WWF. Biểu tượng gấu trúc nổi tiếng của WWF có nguồn gốc từ một chú gấu trúc tên là Chi Chi được chuyển từ Sở thú Bắc Kinh đến Sở thú London vào cùng năm thành lập WWF.</p> </section>HTML <article> Element
HTML <article> element chỉ định nội dung độc lập, khép kín.
Một article nên tự nó có ý nghĩa và có thể phân phối nó một cách độc lập với phần còn lại của trang web.
Ví dụ về nơi có thể sử dụng phần tử <article>:
- Bài đăng trên diễn đàn
- Bài đăng trên blog
- Ý kiến người sử dụng
- Thẻ sản phẩm
- Các bài báo
Ví dụ
<article> <h2>Google Chrome</h2> <p>Google Chrome là trình duyệt web do Google phát triển, phát hành năm 2008. Chrome là trình duyệt web phổ biến nhất thế giới hiện nay!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox là một trình duyệt web mã nguồn mở được phát triển bởi Mozilla. Firefox là trình duyệt web phổ biến thứ hai kể từ tháng 1 năm 2018.</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge là một trình duyệt web được phát triển bởi Microsoft, được phát hành vào năm 2015. Microsoft Edge đã thay thế Internet Explorer.</p> </article>
Lồng <article> bên trong <section> hoặc ngược lại?
<article> element chỉ định nội dung độc lập, khép kín.
<section> element xác định phần trong tài liệu.
Chúng ta không thể sử dụng các định nghĩa để quyết định cách lồng các element.
Vì vậy, bạn sẽ tìm thấy các trang HTML có <section> element chứa <article> element và ngược lại.
HTML <header> Element
<header> element đại diện cho một vùng chứa cho nội dung giới thiệu hoặc một tập hợp các link điều hướng.
<header> element thường chứa:
- một hoặc nhiều heading element (<h1> - <h6>)
- logo hoặc biểu tượng
- thông tin về quyền tác giả
Lưu ý: Bạn có thể có nhiều <header> element trong một tài liệu HTML. Tuy nhiên, <header> không thể được đặt trong một <footer> element, <address> hoặc một <header> element khác.
<article> <header> <h1>WWF sẽ làm những gì?</h1> <p>Nhiệm vụ của WWF:</p> </header> <p>Nhiệm vụ của WWF là ngăn chặn sự suy thoái của môi trường tự nhiên trên hành tinh của chúng ta, và xây dựng một tương lai trong đó con người sống hài hòa với thiên nhiên.</p> </article>
HTML <footer> Element
<footer> element xác định chân trang cho một tài liệu hoặc phần.
<footer> element thường chứa:
- thông tin về quyền tác giả
- thông tin bản quyền
- thông tin liên lạc
- sơ đồ trang web
- quay lại liên kết hàng đầu
- tài liệu liên quan
Bạn có thể có nhiều <footer> element trong một tài liệu.
Ví dụ
<footer> <p>Tác giả: Hege Refsnes</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </footer>
HTML <nav> Element
<nav> element xác định một tập hợp các link đ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>
HTML <aside> Element
<aside> element xác định một số nội dung ngoài nội dung mà nó được đặt vào (như một thanh bên).
Nội dung <aside> nên liên quan gián tiếp đến nội dung xung quanh.
<p>Tôi và gia đình đã đến thăm trung tâm The Epcot vào mùa hè này. Thời tiết thật đẹp và Epcot thật tuyệt vời! Tôi đã có một mùa hè tuyệt vời cùng với gia đình của tôi!</p> <aside> <h4>Trung tâm Epcot</h4> <p>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p> </aside>HTML <figure> and <figcaption> Elements
Thẻ <figure> chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã,...
Thẻ <figcaption> xác định phụ đề cho <figure> element.
<figcaption> element có thể được đặt làm element đầu tiên hoặc là element con cuối cùng của <figure> element.
<img> element xác định hình ảnh / hình minh họa thực tế.
<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>Tại sao lại cần Semantic Elements?
Theo W3C: "Web semantic cho phép dữ liệu được chia sẻ và sử dụng lại trên các ứng dụng, doanh nghiệp và cộng đồng."