Thứ Tư, 25 tháng 12, 2013
HTML5 ngữ nghĩa yếu tố
Các yếu tố ngữ nghĩa = yếu tố có ý nghĩa.
Các yếu tố ngữ nghĩa là gì?
Một yếu tố ngữ nghĩa rõ ràng mô tả ý nghĩa của nó cho cả hai trình duyệt và các nhà phát triển.
Ví dụ về các phi ngữ nghĩa các yếu tố: <div> và <span> - Nói gì về nội dung của nó.
Ví dụ về ngữ nghĩa yếu tố: <form>, <table>, và <img> - Rõ ràng định nghĩa nội dung của nó.
Hỗ trợ trình duyệt
Internet Explorer 9 +, Firefox, Chrome, Safari và Opera hỗ trợ các yếu tố ngữ nghĩa được mô tả trong chương này.
Lưu ý: Internet Explorer 8 và trước đó không hỗ trợ các yếu tố này. Tuy nhiên, có một giải pháp. Nhìn vào phần cuối của chương này.
Các yếu tố ngữ nghĩa mới trong HTML5
Nhiều người trong số các trang web hiện nay chứa HTML code như thế này: <div id="nav">, <div class="header">, hoặc <div id="footer">, để chỉ chuyển hướng liên kết, tiêu đề, và footer.
HTML5 cung cấp các yếu tố ngữ nghĩa mới để xác định rõ ràng các phần khác nhau của một trang web:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
HTML5 <section> tử
Các yếu tố <section> định nghĩa một phần trong một tài liệu.
Theo tài liệu HTML5 W3C: "Một phần là một nhóm chuyên đề của nội dung, đặc biệt với một tiêu đề."
Ví dụ
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Thử nó cho mình »
HTML5 <article> tử
Các yếu tố <article> định độc lập, nội dung khép kín.
Một bài báo nên có ý nghĩa riêng của nó và nó phải có khả năng phân phối độc lập với phần còn lại của trang web.
Ví dụ về nơi một yếu tố <article> có thể được sử dụng:
- Forum post
- Blog post
- News story
- Comment
Ví dụ
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Thử nó cho mình »
HTML5 <nav> tử
Các yếu tố <nav> định nghĩa một tập hợp các liên kết điều hướng.
Các yếu tố <nav> dành cho khối lượng lớn các liên kết điều hướng. Tuy nhiên, không phải tất cả các liên kết trong một tài liệu nên được bên trong một yếu tố <nav>!
Ví dụ
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Thử nó cho mình »
HTML5 <aside> tử
Các yếu tố <aside> xác định một số nội dung ngoài nội dung nó được đặt trong (giống như một bên).
Nội dung sang một bên nên được liên quan đến các nội dung xung quanh.
Ví dụ
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Thử nó cho mình »
HTML5 <header> tử
Các yếu tố <header> định một tiêu đề cho một tài liệu hoặc phần.
Các yếu tố <header> nên được sử dụng như là một container cho nội dung giới thiệu.
Bạn có thể có một số yếu tố <header> trong một tài liệu.
Ví dụ sau định nghĩa một tiêu đề cho một bài viết:
Ví dụ
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Thử nó cho mình »
HTML5 <footer> tử
Các yếu tố <footer> định một chân cho một tài liệu hoặc phần.
Một yếu tố <footer> nên chứa thông tin về phần tử có chứa nó.
Một chân thường có chứa các tác giả của tài liệu, thông tin bản quyền, liên kết với các điều khoản sử dụng, thông tin liên lạc, vv
Bạn có thể có một số yếu tố <footer> trong một tài liệu.
Ví dụ
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Thử nó cho mình »
HTML5 <figure> và yếu tố <figcaption>
Thẻ <figure> quy định cụ thể nội dung khép kín, như hình minh họa, sơ đồ, hình ảnh, danh sách mã, vv
Trong khi nội dung của phần tử <figure> là liên quan đến dòng chảy chính, vị trí của nó là độc lập với dòng chảy chính, và nếu gỡ bỏ nó không ảnh hưởng đến dòng chảy của các tài liệu.
Thẻ <figcaption> định nghĩa một chú thích cho một yếu tố <figure>.
Các yếu tố <figcaption> có thể được đặt như đứa trẻ đầu tiên hoặc cuối cùng của phần tử <figure>.
Ví dụ
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
Thử nó cho mình »
Chúng ta có thể bắt đầu sử dụng những yếu tố ngữ nghĩa?
Các yếu tố giải thích ở trên là những yếu tố khối (trừ <figcaption>).
Để có được những yếu tố này để làm việc đúng trong tất cả (cũ) trình duyệt, thiết lập thuộc tính hiển thị để chặn trong bảng phong cách của bạn (điều này gây ra các trình duyệt cũ để vẽ lại những yếu tố này một cách chính xác):
header, section, footer, aside, nav, article, figure
{
display: block;
}
{
display: block;
}
Vấn đề với trình duyệt Internet Explorer 8 và Đầu
IE8 và trước đó không biết làm thế nào để làm cho CSS trên các yếu tố mà nó không nhận ra. Bạn không thể tạo kiểu <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, hoặc các yếu tố HTML5 mới khác.
Rất may, Sjoerd Visscher đã phát hiện ra một cách giải quyết khác được gọi là JavaScript HTML5
Shiv ; để cho phép kiểu dáng của các yếu tố HTML5 trong các phiên bản của Internet Explorer trước khi phiên bản 9.
Bạn có thể tải về và đọc thêm về HTML5 Shiv tại: http://code.google.com/p/html5shiv/
Để kích hoạt HTML5 Shiv (sau khi tải về), chèn đoạn mã sau vào phần tử <head>:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<script src="html5shiv.js"></script>
<![endif]-->
Mã trên là một nhận xét rằng chỉ có IE đọc, cho các phiên bản sớm hơn so với IE9. Nó phải được đặt trong các yếu tố <head> bởi vì Internet Explorer cần phải biết về các yếu tố khi nó làm cho họ.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét