<article>, html <article> mempunyai definisi tentang konten yang independent artinya konten yang yang tidak terikat dengan element lainnya dan besifat sebagai konten yang utuh.
Tips :
Element
<article> sangat tepat di gunakan untuk :- Posting artikel
- Posting Konten pada blog Forum
- Komentar, dan
- Posting berita
Contoh :
<article class="article">
<div class="article">
<h2>Apa Arti Blog !!!</h2>
<p><strong>Apa Itu Blog ?</strong>
Blog adalah bentuk Aplikasi Web.
Pada dasarnya merupakan bagian dari situs website
yang dapat diakses secara online yang memiliki fungsi
utama memuat tulisan-tulisan dan gambar (dimuat dalam posting)
pada setiap halaman web. Blog biasanya dikelola oleh pengguna
tunggal (sebagian lainnya oleh beberapa penulis) dibuat sesuai
dengan topik dan tujuan dari si pengguna blog tersebut.
</p>
</div>
</article>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Triksonic</title>
<style>
body{
margin:0 auto;
background:grey;
}
article, aside, footer, header, hgroup, main, nav, section {
display: block;
}
#container-wrap{
max-width: 1100px;
margin:0 auto;
padding: 0 15px;
background:white;
}
h1 {
font-size:200%
}
article{
text-align:justify;
}
#header {
border-bottom: 4px double #adadad;
}
ul {
margin:0;
padding:0;
list-style-type: none;
}
#nav {
width: 100%;
background: black;
display: block;
height: 40px;
}
#nav ul li {
float: left;
color: white;
padding: 10px;
border-right: 1px solid white;
}
.data-title {
text-align: center;
width: 100%;
}
.data-title h1 {
color: red;
}
#my-content {
width: 100%;
max-width: 65%;
float: left;
}
.article h2{
text-align:center;
color:blue;
}
ul.related {
list-style-type: disc;
margin-left: 15px;
}
#sidebar1 {
float: right;
width: 100%;
max-width: 30%;
}
#sidebar1 ul {
margin-left:10px
}
#sidebar1 ul li {
border-bottom:1px dotted grey;
margin: 15px 0;
}
#sidebar1 h2{
font-size:85%;
color:black;
border-bottom:1px solid red;
display:inline-block;
padding-top:5px
}
.iklan {
background: beige;
height: 105px;
}
#footer {
background: #222225;
font-family: arial;
color: #ffffff;
width: 100%;
overflow: hidden;
clear: both;
padding: 10px 0;
line-height: 18px;
float: none;
text-align: center;
font-size: 11px;
margin: 0 auto;
line-height: 2em;
}
@media screen and (max-width:800px){#my-content,#sidebar1{max-width: 100% !important}}
@media screen and (max-width:350px){h1{font-size:100%;}}
</style>
</head>
<body>
<div id="container-wrap">
<header id="header">
<nav id="nav">
<ul class="navigasi">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
<div class="data-title">
<h1>Triksonic.Blogspot.com</h1>
</div>
</header>
<div id="my-content">
<main id="content">
<article class="article">
<div class="article">
<h2>Apa Arti Blog !!!</h2>
<p>
<strong>Apa Itu Blog ?
</strong> Blog adalah bentuk Aplikasi Web. Pada dasarnya merupakan bagian dari situs website yang dapat diakses secara online yang memiliki fungsi utama memuat tulisan-tulisan dan gambar (dimuat dalam posting) pada setiap halaman web. Blog biasanya dikelola oleh pengguna tunggal (sebagian lainnya oleh beberapa penulis) dibuat sesuai dengan topik dan tujuan dari si pengguna blog tersebut.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet eros tristique gravida. Vestibulum non consequat sapien. Duis rhoncus purus risus, ut mollis tortor tincidunt cursus. Sed dictum egestas erat, malesuada consectetur metus convallis eget. Duis non lacus lorem. Curabitur iaculis dictum lorem non maximus. Curabitur ut justo sagittis, viverra dolor in, consectetur nisi. Integer vitae interdum purus. Integer vitae libero vitae libero tristique sodales eu eu lorem. Aliquam purus mi, sagittis tempor mauris vel, elementum convallis turpis. Etiam faucibus leo mi, sed eleifend nunc luctus in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet eros tristique gravida. Vestibulum non consequat sapien. Duis rhoncus purus risus, ut mollis tortor tincidunt cursus. Sed dictum egestas erat, malesuada consectetur metus convallis eget. Duis non lacus lorem. Curabitur iaculis dictum lorem non maximus. Curabitur ut justo sagittis, viverra dolor in, consectetur nisi. Integer vitae interdum purus. Integer vitae libero vitae libero tristique sodales eu eu lorem. Aliquam purus mi, sagittis tempor mauris vel, elementum convallis turpis. Etiam faucibus leo mi, sed eleifend nunc luctus in.
</p>
<hr/>
<h3><small>Related Post:</small></h3>
<ul class="related">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Nulla fermentum felis sit amet eros tristique gravida</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Nulla fermentum felis sit amet eros tristique gravida</li>
</ul>
<hr/>
<article>
<div class="article">
<h4><small>Komentator 1</small></h4>
<p>
<em><time datetime="2016-06-06T06:00">06 Juni 2016, pkl. 06:00</time></em>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet eros tristique gravida. Vestibulum non consequat sapien
</p>
</div>
</article>
<hr/>
<article>
<div class="article">
<h4><small>Komentator 2</small></h4>
<p>
<em><time datetime="2016-07-07T07:00">07 Juli 2016, pkl. 07:00</time></em>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet eros tristique gravida. Vestibulum non consequat sapien
</p></div>
</article>
</div>
</article>
</main>
</div>
<aside id="sidebar1">
<h2>Popular Post</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
</ul>
<h2>Iklan kami</h2>
<div class="iklan"></div>
</aside>
<div class="clear"></div>
<footer id="footer">
<p>Copyright ©
<script>
var creditsyear = new Date();
document.write(creditsyear.getFullYear());
</script>
Triksonic.blogspot.com
</p>
</footer>
</div>
</body>
</html>
Browser Support :
Desktop
| Chrome | 5 |
|---|---|
| Safari | 4.1 |
| Firefox | 4 |
| Opera | 11 |
| IE | 9 |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | 11 |
| iOs Safari | 4.2 |
| Samsung Internet | Ya |
Global Attributes:
Element
<article> mencakup Global Attributes HTML.
Event Attributes:
Element
<article> mencakup Event Attributes HTML.
Default CSS :
Browser yang support dengan element
<article>, biasanya mempunyai nilai default :
article {
display: block;
}