HTML elemen tag <article> merupakan elemen yang digunakan pada membentuk konten yang berdiri sendiri (stand alone) yang tidak terkait dengan konten pada elemen lainnya di dalam halaman web. Misalnya seperti isi artikel, postingan forum, postingan blog, ataupun untuk komentar. Di dalam elemen <article> ini dapat berisikan berbagai kumpulan elemen lainnya seperti DIV (division), P (paragraf), IMG (image), dan lainnya.
Pada suatu halaman HTML, jumlah elemen <article> tidak dibatasi hanya satu buah namun dapat dibuat sesuai dengan kebutuhan. Hal ini berfungsi saat kita membutuhkan beberapa kelompok elemen <article> dengan bagian-bagian yang berlainan. Misalnya artikel utama, kemudian artikel pendukung dan bagian postingan komentar.
Penulisan elemen <article> dibuka dengan tag <article> dan ditutup dengan </article>. Jika dilihat dari segi gaya tampilan, HTML tag elemen <article> ini sebenarnya sama seperti HTML elemen tag <div>. Namun elemen <article> lebih dekat pada arti semantic yang berguna untuk memberikan informasi yang lebih lengkap pada screen reader, mesin penjelajah web.
Berikut ini contoh penggunaan HTML tag elemen <article> :
Berikut ini contoh penggunaan elemen <article> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen tag HTML article</title>
<style>
h1{
color:#B93160;
}
article{
color:#5800FF;
}
section{
color:#EF5B0C;
text-align:right;
margin-right:10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class='judul'>Medan Magnet Planet</h1>
<article>
<p>Masing-masing Planet punya kekuatan Medan Magnet yang berbeda-beda. Ini bisa dipengaruhi oleh banyak hal seperti Ukuran planet, Aktifitas inti planet dll. Misalnya Medan Magnet Bumi kita lebih besar daripada Mars, ini karena inti Bumi kita masih aktif dan terus berotasi sedangkan mars, sebagian intinya sudah mengalami pendinginan bahkan ilmuan menduga inti planet mars sudah mengalami pembekuan.</p>
<p>Di tata surya kita, Planet-planet dengan ukuran besar seperti Jupiter, Neptunus dan uranus mempunyai medan magnet yang sangat besar dan ini ikut menjaga aktifitas dan iklim di permukaan planet-planet tersebut.</p>
<p>Tanpa Medan Magnet, mungkin Badai ekstrim di Jupiter akan berubah atau bahkan musnah. Begitu pula cincin Satusnus bisa saja hilang karena terjangan radiasi Matahari.</p>
</article>
<section>
<p>Penulis : Bayu</p>
<time datetime="2020-06-27T11:17+07:00">27 Juni 2020</time>
</section>
</div>
</body>
</html>
Jika kode tersebut dijalankan maka hasilnya sebagai berikut :
HTML elemen tag <article> dapat diletakan di dalam elemen <article> yang lainnya atau sebagai nested article, dengan catatan elemen ini masih ada kaitan dengan elemen induknya.
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <article> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <article> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <article> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <article> pada HTML :
CSS
1
2
3
Previous Pagearticle{
display : block;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
