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.


  1. <article>

  2.    <h2>Sejarah</h2>

  3.    <img src="img/history.jpg">

  4.    <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava

  5.        Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>

  6. </article>

  7. <article>

  8.    <h2>Geografis</h2>

  9.    <img src="img/geografis.jpg">

  10.    <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok

  11.        raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat..</p>

  12. </article>

  13. <article>

  14.    <h2>Wisata</h2>

  15.    <img src="img/farm-house.jpg">

  16.    <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan

  17.        akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya...</p>

  18. </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. 


  1. <main>

  2.    <article>

  3.        ......

  4.    </article>

  5.    <aside>

  6.        <article>

  7.            <header>

  8.                <h2>Kota Bandung</h2>

  9.                <p>Kota Kembang Paris van Java</p>

  10.                <figure>

  11.                    <img src="img/bandung-badge.png">

  12.                    <figcaption>Lambang</figcaption>

  13.                </figure>

  14.            </header>

  15.        </article>

  16.    </aside>

  17. </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.


  1. <article>

  2.    <section>

  3.        <h2 >Wisata</h2>

  4.        <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan

  5.            akhir

  6.            pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,

  7.            kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>

  8.    </section>

  9.    <section>

  10.        <h3>Farm House Lembang</h3>

  11.        <img src="img/farm-house.jpg">

  12.        <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok

  13.            raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada

  14.            ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan

  15.            ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan

  16.            ketinggian 675 meter di atas permukaan laut.</p>

  17.    </section>

  18.    <section>

  19.        <h3>Observatorium Bosscha</h3>

  20.        <img src="img/bosscha.jpg">

  21.        <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,

  22.            Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk

  23.            meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut

  24.            harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket. Namun, bagi yang ingin

  25.            menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan

  26.            jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.

  27.        </p>

  28.    </section>

  29. </article>


Avatar photo

By clasnet

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *