Thẻ article, section và aside trong HTML5

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>

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>

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>