HTML5: Các phần tử Cấu trúc/Ngữ nghĩa

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Có nhiều website hiện nay có chứa những mã HTML có dạng như: <div id="nav">, <div class="header"> hoặc <div id="footer"> để thể hiện phần điều hướng (navigation), phần đầu (header) và phần chân trang web (footer). Cấu trúc cũng như khung sườn của trang web có thể nói gần như dựa hoàn toàn vào phần tử <div>.

HTML5 cung cấp những phần tử mới cho phép bạn tạo cấu trúc cho trang web mà không cần sử dụng những mã HTML như trên, đồng thời những phần tử mới này cũng giúp bạn không còn bị phụ thuộc vào phần tử <div> nữa. Ngoài ra, những phần tử này còn là những phần tử ngữ nghĩa bởi lẽ tên của mỗi phần tử nói lên tác dụng của phần tử đó.

HTML5: Các phần tử cấu trúc/ngữ nghĩa

Ngoài ra, việc sử dụng các phần tử cấu trúc/ngữ nghĩa cũng sẽ giúp website của bạn thân thiện hơn với các bộ máy tìm kiếm (Search Engine - SE), và điều này giúp làm tăng thứ hạng trong kết quả tìm kiếm đối với công cụ tìm kiếm này.

Dưới đây là danh sách các phần từ cấu trúc/ngữ nghĩa cơ bản:

  • <article>
  • <aside>
  • <figure> và <figcaption>
  • <footer>
  • <header>
  • <nav>
  • <section>

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Chrome, Safari và Opera đều hỗ trợ những phần tử cấu trúc/ngữ nghĩa.

Khởi tạo các phần tử cấu trúc/ngữ nghĩa

Để cho các phần tử ngữ nghĩa làm việc trên tất cả các trình duyệt bạn nên đặt giá trị của thuộc tính display của các phần tử là 'block' (điều này sẽ đảm bảo các trình duyệt cũ sẽ xác định đúng được các phần tử).

article, aside, figure, figcaption, footer, header, nav, section {display: block;}

<article>

Phần tử (hay thẻ) <article> thường được dùng để đặt làm phần chính của trang web, chẳng hạn như nội dung các bài đăng trên các diễn đàn, blog, các trang tin tức, các bình luận, hoặc bất kỳ một nội dung độc lập nào. Mỗi phần tử <article> nên được xác định, thường là bằng cách dùng các thẻ thiết lập tiêu đề (các thẻ từ <h1> đến <h6>) làm thẻ con của nó.

Lưu ý về cách dùng <article>:

- Khi có phần tử <article> nằm trong một phần tử <article> khác, thì phần tử bên trong thể hiện cho một bài viết liên quan đến phần tử bên ngoài. Chẳng hạn như một bài đăng thường có hai phần là nội dung bài đăng và phần bình luận, hai phần này được đặt trong hai phần tử <article> riêng rẽ, và hai phần tử <article> đó lại được đặt trong một phần tử <article> khác dùng để đặt toàn bộ bài đăng.

- Thông tin về tác giả của một phần tử <article> có thể được đặt trong thẻ <address>, nhưng phần tử <article> đó phải không được đặt trong thẻ <article> nào.

- Ngày xuất bản và thời gian của một thẻ <article> có thể được mô tả bằng cách sử dụng thuộc tính datetime của phần tử <time> (lưu ý rằng thuộc tính pubdate của <time> không còn là một chuẩn của HTML5 3WC nữa).

Dưới đây là ví dụ về phần tử <article>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>
</article>
</body>
</html>

<aside>

Phần tử <aside> thường được dùng để đặt các nội dung nằm bên cạnh (trái hoặc phải) nội dung chính của trang web giống như phần sidebar.

Ví dụ sau đây trình diễn nội dung bên của một trang web dùng thẻ <aside>, trong đó chứa các link về các bài viết nổi bật.

<aside>
  <h3>Bài viết nổi bật</h3>
  <nav>
    <a>Định vị, kéo và thả</a>
    <a>Lưu trữ web</a>
    <a>API IndexedDB</a>
    <a>App Cache</a>
  </nav>
</aside>

<figure> và <figcaption>

Phần tử <figure> thường được dùng để đặt các phần như phần giải nghĩa, sơ đồ, hình ảnh, mã lệnh. Còn phần tử <figcaption> được dùng làm phần chú thích cho nội dung nằm trong  phần tử <figure>, nó có thể được đặt ở vị trí trên hoặc dưới phần tử <figure>. Ví dụ:

<body>
<figure>
  <img src="Nguồn ảnh" />
  <figcaption>Chú thích ảnh</figcaption>
</figure>
<body>

<footer>

<footer> thường được dùng để đặt phần chân của trang web, nó cũng được dùng để đặt phần cuối của một phần nào đó trong trang web.

<footer> thường là nơi đặt những thông tin như tác giả của trang web, thông tin bản quyền, các liên kết, thông tin liên hệ.

Trong một trang web bạn được quyền dùng nhiều phần tử <footer>. Ví dụ:

<body>
<footer>
  <p>Designed by: V1Study</p>
  <p>Copyright: V1Study</p>
  <p>E-mail: contact.v1study@gmail.com</p>
</footer>
</body>

<header>

Phần tử <header> thường được dùng để đặt phần trên cùng của trang web như phần logo, banner, điều hướng. Nó cũng được dùng để chứa các phần tử tiêu đề hoặc một biểu mẫu (form) tìm kiếm trong trang web.

Bạn có thể dùng nhiều phần tử <header> trong một trang web. Ví dụ dưới đây sử dụng phần tử <header> để đặt tiêu đề cho một bài viết:

<body>
<article>
<header>
  <h1>Internet Explorer 9</h1>
  <p><time pubdate datetime="2011-03-14"></time></p>
</header>
<p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>
</article>
</body>

<nav>

Phần tử <nav> thường được dùng để đặt các liên kết điều hướng như là menu ngang, menu dọc.

Lưu ý rằng trong một trang web bạn có thể sử dụng nhiều phần tử <nav>, nhưng không phải tất cả các liên kết trong trang web đều cần phải được đặt trong <nav>, điển hình như phần tử <footer> có chứa nhiều liên kết nhưng không cần phải đặt trong <nav>

Dưới đây là một ví dụ sử dụng phần tử <nav> để đặt các liên kết.

<body>
<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">JavaScript</a> |
  <a href="#">jQuery</a> |
  <a href="#">HTML5</a> |
  <a href="#">CSS3</a> |
  <a href="#">SQL</a> |
  <a href="#">PHP</a>
</nav>
</body>

<section>

<section> thường được dùng để đặt các phần con nằm trong những phần lớn như header, article, aside, footer, hoặc bất kỳ phần tử nào khác. Ví dụ:

<body>
<header>
  <section>Chứa Logo</section>
  <section>Chứa Banner</section>
</header>
</body>

Ví dụ áp dụng

Ví dụ dưới đây sử dụng các phần tử cấu trúc/ngữ nghĩa để tạo khung giao diện cho trang web. Bạn có thể nhấn nút "Demo" ngay phía dưới đoạn mã để xem sự hiển thị thực tế.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
article, aside, footer, header, section{
display:block;
text-align:center;
}
#total{
width:900px;
margin:0px auto;
position:relative;
}
#logo, #banner, aside, article, footer, article header{
border:green thin solid;
box-sizing:border-box;
float:left;
}
#logo,#banner,#total > footer{
height:100px;
padding-top:35px;
}
#logo{
width:25%;
}
#banner{
width:75%;
}
aside,article{
height:200px;
}
aside{
width:20%;
padding-top:90px;
}
article{
width:60%;
}
footer{
width:100%;
}
article header,article footer{
width:100%;
height:50px;
padding-top:15px;
}
article article{
width:100%;
height:100px;
padding-top:40px;
}
</style>
</head>
<body>
<section id="total">
<header><section id="logo">Header>>Section-Logo</section><section id="banner">Header>>Section-Banner</section></header>
<nav></nav>
<section>
<aside>Aside</aside><article><header>Article>>Header</header><article>Article-Article</article><footer>Article>>Footer</footer></article><aside>Aside</aside>
</section>
<footer>Footer</footer>
</section>
</body>
</html>
 
» Tiếp: Thuộc tính mới của FORM & INPUT
« Trước: <input> với các kiểu mới
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!