article | Codingku

Tag <article> digunakan untuk membuat elemen article yang mewakili konten yang independen dari konten lain didalam dokumen HTML.

Seperti yang disebutkan dalam spesifikasi HTML5 di W3C Specification bahwa:

Elemen article mewakili komponen halaman yang terdiri dari komposisi mandiri dalam dokumen, halaman, aplikasi, atau situs dan yang bertujuan untuk digunakan kembali secara mandiri.

Misalnya: posting forum, artikel majalah atau koran, entri blog, komentar yang dikirim pengguna, widget, atau bagian konten lainnya.

Syntax

Tag <article> ditulis seperti <article></article> dengan konten artikel yang disematkan diantara tag pembuka dan penutup.

<article>
  Konten artikel disini ...
</article>

Contoh

Article Tunggal

<article>
  <h1>Belajar HTML lengkap di codingku.id</h1>
  <p>HTML merupakan salah satu bahasa pemrograman website yang harus dipelajari oleh calon web developer.</p>
</article>

`article` didalam elemen `section`

<section>
  <h1>Belajar Pemrograman Website di Codingku.id</h1>
  <p>Sebagai front end designer, ada 3 bahasa yang harus dikuasai.</p>
  <article>
    <h2>HTML</h2>
    <p>HTML adalah bahasa yang digunakan untuk merancang kerangka halaman website.</p>
  </article>
  <article>
    <h2>CSS</h2>
    <p>CSS digunakan untuk memberi style pada dokumen HTML agar tampilannya menarik.</p>
  </article>
  <article>
    <h2>Javascript</h2>
    <p>Javascript digunakan untuk memanipulasi elemen DOM HTML sehingga bisa lebih interaktif.</p>
  </article>
</section>

Header dan Footer

<article>
	<header>
		<h1>Belajar HTML Dasar</h1>
		<p>Published: <time datetime="2-11-2019">2 November 2018</time></p>
	</header>
	<p>Cara paling mudah belajar bahasa HTML yaitu dengan konsep learn by doing.</p>
	 <footer>
		<small>Kategori: html</small>
	</footer>
</article>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <article> dengan pengaturan CSS:

article {
  display: block;
}