HTML article tag | belajar <article> element
Referensi Belajar HTML article tag. Tutorial dan panduan mengenai element <article></article>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <article>.
Deskripsi
Penjelasan HTML article
article merupakan tag yang ditulis sebagai element HTML dalam format <article>..</article>, digunakan untuk memberi mark up sebuah independent content, artinya element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan konten lain (element lain). Contoh: sebuah postingan blog, komentar blog, postingan forum, sebuah review item tertentu, berita atau sebuah interaktif widget dapat ditulis dan diapit menggunakan element <article> </article> .
Element <article> boleh disisipkan di dalam element <article> yang lain (nested), asalkan konten dari article tersebut berkaitan dengan induk article element yang menaunginya.
Global Attributes
Atribut Secara Global (Keseluruhan)
<article> tag mencakup global attributes.
Event Attributes
Atribut event (Peristiwa)
<article> tag mencakup event attributes.
Attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <article> element
<article>
<h2>Mengenal Web Standard</h2>
<p>
Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em> (smartphone, tablet, desktop dan lain sebagainya).
</p>
</article>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mengenal Web Standard</title>
<style>
body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin:0 auto;
padding: 1em;
font-size: 100%;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.875em;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:hover {
border-bottom: 1px solid blue;
}
ul {
margin:0;
padding:0;
list-style:none;
}
#header ul li {
display:inline-block;
padding: .5em;
}
#content{
width: 70%;
float: left;
}
#content section {
margin-top: 2em;
border-top: 2px solid #ccc;
}
#sidebar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
float: right;
padding-left: 1em;
}
section h3+p {
border-bottom: 1px solid #ccc;
padding-bottom: 1em;
}
section article {
border-bottom: 1px solid #ccc;
line-height:normal;
}
#footer {
clear:both;
text-align:center;
padding-top: 1em;
}
</style>
</head>
<body>
<!-- <header> untuk <body> element - header utama -->
<header id="header" role="banner">
<h1>Belajar Bersama dul</h1>
<!-- <nav> navigasi -->
<nav role="navigation">
<ul>
<li><a href="#">Artikel Terbaru</a></li>
<li><a href="#">Artikel Populer</a></li>
<li><a href="#">Penulis</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</nav>
</header>
<!-- <main> element -->
<main id="content" class="group">
<!-- <article> element -->
<article id="post">
<!-- <header> untuk <article> element -->
<header>
<h2>Mengenal Web Standard</h2>
<p>Ditulis oleh: dul,
<time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time>
</p>
</header>
<p>
Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em> (smartphone, tablet, desktop dan lain sebagainya).
</p>
<p>
Web yang dibangun sesuai standard (web standard) juga harus mempertimbangkan beberapa aspek diantaranya adalah harus mengedapankan kode yang bersih (clean), valid dan dapat digunakan kembali, dapat diakses oleh semua orang baik penyandang cacat, buta warna dan semacamnya (accessible), juga bersahabat dengan search engine (search engine friendly).
</p>
<!-- <aside> untuk <article> element -->
<aside>
<h3>Istilah Kata:</h3>
<dl>
<dt>W3C</dt>
<dd>World Wide Web Consortium. Organisasi dunia yang mengelola dan membakukan web standard.</dd>
</dl>
<dl>
<dt>Device</dt>
<dd>Alat. Alat yang dimaksud adalah semua teknologi yang digunakan untuk mengakses internet/web.</dd>
</dl>
</aside>
<!-- <section> untuk <article> element -->
<section>
<h3>Komentar</h3>
<p>Berkomentarlah dengan bijak!</p>
<!-- article> pada <section> element - komentar user menggunakan <article> -->
<article>
<!-- article header -->
<header>
<h4>Halwa Fadhilah</h4>
<p><em><time datetime="2015-03-07T16:00">07 Maret 2015, pkl. 16:00</time></em></p>
</header>
<p>Terima Kasih. Web standar memang penting, supaya bisa dinikmati semua orang, bahkan yang cacat sekalipun. Sebagai tambahan, W3C bisa dikunjungi di w3.org</p>
<!-- article footer -->
<footer>
<p><a href="#" rel="nofollow">Halwa Blog</a></p>
</footer>
</article>
<!-- <article> pada <section> element - komentar user menggunakan <article> -->
<article>
<header>
<h4>Rodi4h Design</h4>
<p><em><time datetime="2015-03-07T20:00">07 Maret 2015, pkl. 20:00</time></em></p>
</header>
<p>W3C terbuka untuk siapapun diseluruh penjuru dunia. Kita bisa bergabung dan berbagi bersama.</p>
<footer>
<p><a href="#" rel="nofollow">Rodiah Blog</a></p>
</footer>
</article>
</section>
</article>
</main>
<!-- <aside> pada <body> element -->
<aside id="sidebar" role="complementary">
<h3>Arsip</h3>
<ul>
<li><a href="#">Maret 2015</a></li>
<li><a href="#">Februari 2015</a></li>
<li><a href="#">Januari 2015</a></li>
<li><a href="#">Desember 2014</a></li>
<li><a href="#">November 2014</a></li>
</ul>
</aside>
<!-- <footer> pada <body> element -->
<footer id="footer" role="contentinfo">
<p>© 2015 Fadlullah Fadul. All Rights Reserved.</p>
<ul>
<li><a href="https://www.apacara.com">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/copyright.html">Copyright</a></li>
<li><a href="/p/privacy.html">Privacy</a></li>
</ul>
</footer>
</body>
</html>
SHARE