Membuat dan Bekerja dengan Sectioning

Saat mendesain web modern, selalu gunakanlah tehnik sectioning atau membagi konten. Gunakan tag untuk sectioning di awal tahap desain. Tag-tag sectioning berfungsi untuk mengelompokan konten halaman web agar lebih terstruktur. Tag-tag ini bersifat semantic,karena penamaannya disesuaikan dengan fungsinya.

section

Sectioning merupakan suatu bagian dari kerangka web, yang letaknya berada terpisah-pisah namun memiliki kesatuan dalam desain web. Sectioning sangat membantu pembuatan outline halaman web. Untuk memahami tehnik sectioning, berikut contoh potongan kodenya di elemen body:

<!DOCTYPE html>  
<html>  
 <head>  
  <title>Membuat Sectioning</title>
  <!-- Isi Metadata -->
 </head>  
 <body>
  <header>
  Logo, nama website atau deskripsi
  <nav>kategori 1 - kategori 2 - kategori 3</nav>
  </header>
   <main role="main">
    <h1>Judul Utama</h1>
    Paragraf utama
  
    <article>
    <h2>Judul Artikel Pertama</h2>
    Isi artikel pertama
    </article>
    <article>
    <h2>Judul Artikel Kedua</h2>
    Isi artikel kedua
    </article>
    <article>
    <h2>Judul Artikel Ketiga</h2>
    Isi artikel ketiga
    </article>
  
  <section>
   <h3>Sub Judul Pertama</h3>
   <!-- Isi sub artikel pertama -->
  </section>
  <section>
   <h3>Sub Judul Kedua</h3>
   <!-- Isi sub artikel kedua -->
  </section>
  <section>
   <h3>Sub Judul Ketiga</h3>
   <!-- Isi sub artikel ketiga -->
  </section>
 </main>
 <aside>
  Konten terkait
 </aside>
 <footer>
  Hak cipta - link informasi - dsb
   <address>Jl. Website no 404</address>
 </footer>

</body>  
</html>

Jika di ilustrasikan, kode di atas akan menghasilkan outline halaman web seperti berikut:

Outline halaman web dengan sectioning

Melalui gambar ilustrasi diatas, sekilas kita sudah bisa melihat fungsi dan manfaat sectioning bagi tugas web desain. Untuk penjelasan dari fungsi tag sectioning dapat di cek pada artikel selanjutnya, atau klik disini: Penjelasan fungsi tag sectioning