Tanda <article> HTML

Definisi dan penggunaan

<article> Tag atur konten yang terpisah dan terkandung.

Sebuah artikel seharusnya dapat diartikan secara mandiri dan dapat di distribusikan secara mandiri dari situs seluruhnya.

<articel> Sumber potensial elemen termasuk:

  • Topik Forum
  • Artikel Blog
  • Berita
  • Komentar Pengguna

Perhatian:Dalam browser,<article> Elemen sendiri tidak akan menampilkan gaya khusus apapun. Tetapi, Anda dapat menggunakan gaya CSS untuk <article> Elemen (lihat contoh di bawah).

Lihat pula:

Panduan Referensi DOM HTML:Objek Artikel

Contoh

Contoh 1

Tiga konten artikel yang berbeda dan terpisah:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome adalah peramban web yang dibangun oleh Google, dirilis pada tahun 2008. Chrome adalah peramban web yang paling populer di dunia saat ini!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox adalah peramban web yang dibangun oleh Mozilla. Sejak Januari 2018, Firefox selalu menjadi peramban web yang paling populer kedua.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge adalah peramban internet yang dikembangkan oleh Microsoft, dirilis pada tahun 2015. Microsoft Edge menggantikan Internet Explorer.</p>
</article>

Coba Sendiri

Contoh 2

Gunakan CSS untuk menata gaya elemen <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>Peramban Terpopuler Terbanyak</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome adalah peramban web yang dibangun oleh Google, dirilis pada tahun 2008. Chrome adalah peramban web yang paling populer di dunia saat ini!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox adalah peramban web yang dibangun oleh Mozilla. Sejak Januari 2018, Firefox selalu menjadi peramban web yang paling populer kedua.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge adalah peramban internet yang dikembangkan oleh Microsoft, dirilis pada tahun 2015. Microsoft Edge menggantikan Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Coba Sendiri

Atribut Global

<article> Tag ini juga mendukung Atribut Global di HTML.

Atribut Acara

<article> Tag ini juga mendukung Atribut Acara di HTML.

Pengaturan CSS Standar

Sebagian besar browser akan menampilkan nilai standar berikut <article> Elemen:

article {
  display: block;
}

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung elemen ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1