Cách sử dụng phần tử HTML

Tìm hiểu cách sử dụng HTML <article> phần tử.

HTML <article> được sử dụng để xác định các phần tử bài viết cho khép kín Nội dung. Độc lập có nghĩa là nội dung bạn đưa vào bên trong phần tử bài viết phải hoạt động độc lập với phần còn lại của trang web của bạn.

Cách sử dụng thẻ HTML

Các trường hợp sử dụng cho <article> thẻ:

• Blog
• Tạp chí
• Trang web tin tức

Không giống như <main> , cũng là phần tử chứa nội dung, <article> thẻ có thể được sử dụng một lần hoặc nhiều lần trong cùng một tài liệu HTML.

Ví dụ:bạn có thể sử dụng một <article> làm phần tử vùng chứa trang chính, cho các bài báo / bài đăng:

<article>
  <h1>Title of your post</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <img href="your-image.jpg" alt="description of image" />
  <p>Paragraph</p>
  <p>Paragraph</p>
</article>

Trang web bạn đang đọc bên phải tuân theo một cấu trúc đánh dấu HTML tương tự. Bạn có thể tự mình thấy điều đó nếu bạn nhấp chuột phải vào trang web này và nhấp vào Kiểm tra.

<article> cũng có thể được sử dụng để hiển thị danh sách các nội dung khác nhau, mỗi nội dung bên trong phần tử bài viết của riêng chúng. Ví dụ:nguồn cấp dữ liệu bài viết với các liên kết đến các bài đăng riêng lẻ:

<div>
  <article>
    <a href="/path-to-blog-post-1">
      <h3>Blog post 1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>Blog post 2</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-3">
      <h3>Blog post 3</h3>
    </a>
  </article>
</div>

Mỗi bài viết trong số ba bài viết trên được trình duyệt web đọc dưới dạng nội dung độc lập, khép kín.

<article> thẻ là một trong nhiều thẻ HTML được sử dụng để xác định các phần tử vùng chứa. Một số phần tử vùng chứa HTML được sử dụng phổ biến nhất là:

<section> , <main> , <header> , <footer> , <form> và <div> (là thẻ chung mà chúng tôi sử dụng nếu không có thẻ nào khác áp dụng).