Tìm hiểu cách sử dụng phần tử HTML <article>.
Thẻ HTML <article> được dùng để định nghĩa các phần tử bài viết cho nội dung tự chứa. Tự chứa nghĩa là nội dung bạn đặt bên trong phần tử article nên hoạt động độc lập với phần còn lại của trang web.
Cách dùng thẻ HTML <article>
Các trường hợp sử dụng cho thẻ <article>:
- Blog
- Tạp chí
- Trang tin tức
Khác với phần tử <main>, cũng là một container nội dung, thẻ <article> có thể được dùng một hoặc nhiều lần trong cùng một tài liệu HTML.
Ví dụ, bạn có thể dùng một phần tử <article> đơn lẻ làm container chính của trang cho bài viết/bài đăng:
<article> <h1>Tiêu đề bài viết của bạn</h1> <p>Đoạn văn</p> <p>Đoạn văn</p> <img href="hình-ảnh-của-bạn.jpg" alt="mô tả hình ảnh" /> <p>Đoạn văn</p> <p>Đoạn văn</p> </article>Trang web bạn đang đọc tuân theo cấu trúc đánh dấu HTML tương tự. Bạn có thể tự kiểm tra bằng cách chuột phải vào trang web này và chọn Kiểm tra (Inspect).
Phần tử <article> cũng có thể 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ử article riêng. Ví dụ, một feed bài viết với liên kết đến các bài đăng riêng lẻ:
<div> <article> <a href="/đường-dẫn-bài-viet-1"> <h3>Bài viết 1</h3> </a> </article> <article> <a href="/đường-dẫn-bài-viet-2"> <h3>Bài viết 2</h3> </a> </article> <article> <a href="/đường-dẫn-bài-viet-3"> <h3>Bài viết 3</h3> </a> </article> </div>Mỗi trong ba bài viết trên được trình duyệt đọc như nội dung độc lập, tự chứa.
Thẻ <article> là một trong nhiều thẻ HTML dùng để định nghĩa các phần tử container. Một số phần tử container HTML thường dùng nhất là:
<section>, <main> , <header>, <footer>,<form>, và <div> (là thẻ chung dùng khi không có thẻ nào khác phù hợp).