Pengertian Articles, Aside, dan Section HTML

Elemen <article> bertindak sebagai container untuk independen content pada sebuah halaman, artinya konten utuh yang tidak terkait dengan konten lain, bisa saja sebuah artikel blog, komentar, forum post dan konten lainnya.

Jika sebuah halaman terdapat beberapa artikel, maka tiap artikel tersebut seharusnya berada pada elemen article-nya masing-masing.

<article>
   <h2>Sejarah</h2>
   <img src="img/history.jpg">
   <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava
       Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
</article>
<article>
   <h2>Geografis</h2>
   <img src="img/geografis.jpg">
   <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
       raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat..</p>
</article>
<article>
   <h2>Wisata</h2>
   <img src="img/farm-house.jpg">
   <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan
       akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya...</p>
</article>

Elemen <article> dapat berada pada elemen <article> lainnya (nested) selama artikel tersebut berkaitan dengan induk elemen <article> yang menampungnya.

Aside

Elemen <aside> memiliki dua tujuan, tergantung kita menempatkannya di dalam sebuah elemen <article> atau tidak.

Ketika elemen ini ditempatkan di dalam elemen <article>, pada elemen ini dapat berisikan informasi yang berhubungan dengan artikel tersebut, tetapi bukan bagian dari konten artikelnya itu sendiri (dipisahkan dari konten utama). 

Ketika elemen ini ditempatkan di luar dari elemen <article>, pada elemen ini dapat berisikan informasi yang berhubungan pada keseluruhan halaman.

Elemen <aside> biasanya terletak di samping dari sebuah elemen yang menampungnya. 

<main>
   <article>
       ......
   </article>
   <aside>
       <article>
           <header>
               <h2>Kota Bandung</h2>
               <p>Kota Kembang Paris van Java</p>
               <figure>
                   <img src="img/bandung-badge.png">
                   <figcaption>Lambang</figcaption>
               </figure>
           </header>
       </article>
   </aside>
</main>

Section

Sebuah elemen yang memiliki kesamaan konten dan memiliki sebuah heading di dalamnya dapat dikelompokkan dengan menggunakan elemen <section>. Dengan begitu elemen ini dapat digunakan pada sebuah elemen <article> yang memiliki konten panjang dan berpotensi untuk dikelompokkan.

Di dalam sebuah <section> sebaiknya terdapat elemen heading (h1 - h6), yang menjadi elemen pertama yang dituliskan pada sebuah section untuk menunjukkan judul atau tema dari bagian konten yang dikelompokkan.

<article>
   <section>
       <h2 >Wisata</h2>
       <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan
           akhir
           pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,
           kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
   </section>
   <section>
       <h3>Farm House Lembang</h3>
       <img src="img/farm-house.jpg">
       <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
           raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
           ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan
           ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan
           ketinggian 675 meter di atas permukaan laut.</p>
   </section>
   <section>
       <h3>Observatorium Bosscha</h3>
       <img src="img/bosscha.jpg">
       <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
           Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk
           meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut
           harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket. Namun, bagi yang ingin
           menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan
           jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.
       </p>
   </section>
</article>