<article>: The Article Contents element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <article> trong HTML biểu diễn một bài viết khép kín trong một tài liệu, trang, ứng dụng hoặc trang web, được thiết kế để có thể phân phối hoặc tái sử dụng một cách độc lập (ví dụ, trong syndication). Các ví dụ bao gồm: bài đăng trên diễn đàn, bài báo tạp chí hoặc báo, hoặc bài blog, thẻ sản phẩm, bình luận do người dùng gửi, tiện ích hoặc gadget tương tác, hoặc bất kỳ mục nội dung độc lập nào khác.
Try it
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eeeeee;
}
.forecast > h1,
.day-forecast {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}
.day-forecast {
background: right/contain content-box border-box no-repeat
url("/shared-assets/images/examples/rain.svg") white;
}
.day-forecast > h2,
.day-forecast > p {
margin: 0.2rem;
font-size: 1rem;
}
Một tài liệu có thể có nhiều bài viết; ví dụ, trên một blog hiển thị văn bản của từng bài viết lần lượt khi người đọc cuộn, mỗi bài đăng sẽ được chứa trong một phần tử <article>, có thể với một hoặc nhiều <section> bên trong.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Ghi chú sử dụng
- Mỗi
<article>phải được xác định, thường bằng cách bao gồm phần tử tiêu đề (<h1>-<h6>) làm phần tử con của phần tử<article>. - Khi một phần tử
<article>được lồng nhau, phần tử bên trong biểu diễn một bài viết liên quan đến phần tử bên ngoài. Ví dụ, các bình luận của bài blog có thể là các phần tử<article>được lồng trong<article>biểu diễn bài blog. - Thông tin về tác giả của phần tử
<article>có thể được cung cấp thông qua phần tử<address>, nhưng nó không áp dụng cho các phần tử<article>được lồng nhau. - Ngày và giờ xuất bản của phần tử
<article>có thể được mô tả bằng thuộc tínhdatetimecủa phần tử<time>.
Ví dụ
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<h3>User reviews</h3>
<article class="user_review">
<h4>Too scary!</h4>
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<h4>Love the dinos!</h4>
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung flow, nội dung sectioning, nội dung palpable |
|---|---|
| Nội dung được phép | Nội dung flow. |
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép |
Bất kỳ phần tử nào chấp nhận
nội dung flow. Lưu ý rằng phần tử <article> không được là
phần tử con của phần tử <address>.
|
| Vai trò ARIA ngầm định |
article
|
| Vai trò ARIA được phép |
application, document,
feed, main,
none, presentation,
region
|
| Giao diện DOM | HTMLElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-article-element |