Membuat Artikel, Aside, & Section pada HTML

Assalamualaikum wr.wb sobat programmer. Kali ini saya akan memberi materi mengenai cara membuat artikel, aside, dan section pada HTML.

1. Articles

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.

Kode sederhananya seperti dibawah ini :

<articles>
  <h2>HTML</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRkAITL_II056PeVD_54pnuG_FAo5pth7WWARzpKarC3XZg2lf9" alt="html" width="200px">
      <p>Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML</p>
        </articles>
<articles>
  <h2>CSS</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTvTE8ICgE3alhvG_WBGNYEdCiC48pNtRcDB6fb0DdSVXLtIeiC" alt="CSS" width="200px">
      <p>Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.</p>
        </articles>
<articles>
  <h2>JavaScript</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzoFA5w0ANMaqmi2WifPv_xt1Gd-QarniFaPzVs6bISGnlYzB_" alt="javascript" width="200px">
      <p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[3]) adalah bahasapemrograman tingkat tinggi dan dinamis.</p>
        </articles>

Nah hasil dari kode program diatas yaitu seperti berikut ini :

2. 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.

Nah untuk kode sederhananya seperti berikut ini :

<main> 
  <aside>
     <article>
        <header>
           <h2>IPT</h2>
  <p>IT Programmer Tegal</p>
       <figure>
          <img src="https://1.bp.blogspot.com/--sL1M7mKSyk/Xh8w1kOO87I/AAAAAAAAAyk/uMv8udkVZtk1xduXdXQcTS0Oz0mzmelsQCNcBGAsYHQ/s400/20200106_230148.jpg" width="100px">    
   <figcaption>Logo IPT</figcaption>
       </figure>
            </header>
               </article>
                  </aside>
                    </main>

Hasil diweb browser seperti ini :

3. 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.

Kode sederhananya seperti berikut ini :

<section>
 
<articles>

  <h2>HTML</h2>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRkAITL_II056PeVD_54pnuG_FAo5pth7WWARzpKarC3XZg2lf9" alt="html" width="200px">

      <p>Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML</p>

        </articles>

<articles>

  <h2>CSS</h2>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTvTE8ICgE3alhvG_WBGNYEdCiC48pNtRcDB6fb0DdSVXLtIeiC" alt="CSS" width="200px">

      <p>Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.</p>

        </articles>

<articles>

  <h2>JavaScript</h2>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzoFA5w0ANMaqmi2WifPv_xt1Gd-QarniFaPzVs6bISGnlYzB_" alt="javascript" width="200px">

      <p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[3]) adalah bahasapemrograman tingkat tinggi dan dinamis.</p>

        </articles>
          </section>

Hasilnya seperti dibawah ini :

Sejati elemen Articles, section, & Aside dan berdampingan tergantung sang developer membuatnya.

Sekian materi yang dapat saya sampaikan. Semoga bermanfaat.

Wassalamualaikum wr.wb