Thẻ HTML <article>

Hà Nguyễn

Định nghĩa và cách sử dụng

Thẻ <article> chỉ định nội dung độc lập.

Ví dụ, 3 bài báo có nội dung độc lập:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome là trình duyệt được Google phát triển, ra mắt vào năm 2008. Cho đến nay, Chrome là một trong những trình duyệt phổ biến nhất trên thế giới!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox là một trình duyệt web mã nguồn mở, được phát triển bởi Mozilla. Trước tháng 1/2018, Firefox là trình duyệt web phổ biến thứ 2 sau Chrome.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge trình duyệt web của Microsoft, ra mắt vào năm 2015. Microsoft Edge là sự thay thế cho trình duyệt kì cựu Internet Explorer.</p>
</article>

Một bài báo phải tự nó có ý nghĩa và có thể phân phối một cách độc lập với phần còn lại của trang web.

Các nguồn tiềm năng cho phần tử <article>:

Bài đăng trên diễn đàn
Bài viết trên blog
Câu chuyện thời sự

Lưu ý: Phần tử <article> không hiển thị như bất kỳ thứ gì đặc biệt trong trình duyệt. Tuy nhiên, bạn có thể sử dụng CSS để tạo kiểu cho phần tử <article> (xem ví dụ bên dưới).

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho phần tử.

Phần tử <article>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <article>	6.0	9.0	4.0	5.0	11.1

Thuộc tính Global

Thẻ <article> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <article> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Sử dụng CSS để tạo kiểu cho phần tử <article>:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Các trình duyệt web phổ biến nhất hiện nay</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome là trình duyệt được Google phát triển, ra mắt vào năm 2008. Cho đến nay, Chrome là một trong những trình duyệt phổ biến nhất trên thế giới!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox là một trình duyệt web mã nguồn mở, được phát triển bởi Mozilla. Trước tháng 1/2018, Firefox là trình duyệt web phổ biến thứ 2 sau Chrome.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge trình duyệt web của Microsoft, ra mắt vào năm 2015. Microsoft Edge là sự thay thế cho trình duyệt kì cựu Internet Explorer.</p>
  </article>
</article>

</body>
</html>