Ngôn ngữ HTML - Article, section và aside

Thẻ article, section và aside trong HTML5

Sử dụng thẻ article tạo bài viết, phân chia trang HTML5 với section và các thông tin bổ sung từ aside

Thẻ <article>

article là phần tử để bao bọc nội dung độc lập, nó có thể là một bài post của diễn đàn, một bài viết của trang, một bài báo, một bình luận ... hoặc bất kỳ một nội dung độc lập nào.

Thẻ <article> trong HTML5 được dùng thay thế cho thẻ <div> của HTML4.

<article> 
   <h1>Tiêu đề bài viết</h1> 
   <p>Các nội dung bài viết</p>
</article>

Xem ví dụ

Phần tử <article> có thể chứa các <article> khác. Các <article> bên trong trình bày các nội dung liên quan đến <article> bên ngoài.


Thẻ <section>

Thẻ <section> dùng để phân chia một cách logic một trang, một article. Vậy Thẻ <section> dùng để chia nội dung trong một article. Ví dụ như trang chủ có thể có một <section> chứa thông tin giới thiệu về công ty, <section> khác chứa mục tin tức, <section> khác chứa thông tin liên hệ ...

Mỗi <section> là một khối xác định, thường nó có chứa các tiêu đề (h1 - h6) để phân chia <section>

<article>
   <h1>Chào mừng</h1>
   <section>
      <h1>Tiêu đề</h1>
      <p>Nội dung, hình ảnh ...</p>
   </section>
</article>

Xem ví dụ 


Thẻ <aside>

<aside> được hiểu như nội dung thứ cấp của phần nội dung chính của trang. <aside> thường dùng để biểu diễn sidebar. Khi một <aside> sử dụng trong <article> thì nội dung trong <aside> liên quan đến <aside>

<article>
   <h1> Quà tặng cho mọi người </h1>
   <p> Trang web giúp bạn chọn và mua quà tặng </p>
   <aside>
      <p> Quà tặng được chuyển đến khách hàng trong khoảng 24h </p>
   </aside>
</article>

Xem ví dụ