tRikSonic
Tema

HTML article Tag

Terakhir diperbarui : 24 Mei 2018 - 09.48
HTML article Tag - Belajat html <article>, html <article> mempunyai definisi tentang konten yang independent artinya konten yang yang tidak terikat dengan element lainnya dan besifat sebagai konten yang utuh.
background html
Tips :
Element <article> sangat tepat di gunakan untuk :
  1. Posting artikel
  2. Posting Konten pada blog Forum
  3. Komentar, dan
  4. 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

Chrome5
Safari4.1
Firefox4
Opera11
IE9
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera Android11
iOs Safari4.2
Samsung InternetYa

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;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.