Elemen Semantik HTML Part 1: Membangun Struktur Web yang Cerdas (Foto: Elemen Semantik HTML Part 1: Membangun Struktur Web yang Cerdas)

Elemen Semantik HTML Part 2: Mengorganisir Konten secara Logis

Setelah memahami struktur besar website (<header>, <main>, <footer>), langkah selanjutnya adalah memahami bagaimana mengelola konten di dalam bagian utama tersebut. HTML5 menyediakan tag yang sangat spesifik untuk membantu mesin pencari memahami hierarki informasi Anda.

Menggunakan elemen semantik yang tepat seperti <article>, <section>, <aside>, dan <figure> bukan hanya soal kerapian kode, tetapi soal memberikan konteks pada data Anda.

1. <article>: Konten Mandiri

Tag <article> digunakan untuk membungkus konten yang dapat berdiri sendiri dan tetap bermakna meskipun dipisahkan dari halaman tersebut.

• Fungsi: Menandai konten yang bisa disebarluaskan (didistribusikan) secara independen.

• Contoh: Postingan blog, artikel berita di SatuMedia, komentar pengguna, atau kartu produk.

• Logika: Jika konten tersebut cocok dimasukkan ke dalam RSS Feed, maka gunakanlah <article>.

2. <section>: Kelompok Tematik

Tag <section> digunakan untuk mengelompokkan konten yang memiliki tema atau topik yang sama di dalam sebuah dokumen.

• Fungsi: Membagi halaman menjadi beberapa bagian pembahasan.

• Aturan Emas: Sebuah <section> idealnya selalu memiliki judul (Heading). Jika Anda hanya butuh pembungkus untuk mengatur gaya (styling) CSS tanpa arti tematik, gunakanlah <div> biasa alih-alih <section>.

• Contoh: Bagian "Fitur Unggulan", "Tim Kami", atau "Kontak" pada halaman landing page.

3. <aside>: Konten Pelengkap

Tag <aside> berisi konten yang berkaitan secara tidak langsung dengan konten utama di sekitarnya.

• Fungsi: Sering digunakan untuk sidebar, kotak kutipan (pull quotes), iklan, atau daftar postingan populer.

• Logika: Jika konten di dalam <aside> dihapus, konten utama harus tetap bisa dipahami dengan sempurna.

4. <figure> & <figcaption>: Media dan Keterangan

Tag <figure> digunakan untuk membungkus konten media seperti foto, diagram, atau cuplikan kode. Sedangkan <figcaption> digunakan untuk memberikan deskripsi atau keterangan tertulis pada media tersebut.

• Keunggulan SEO: Membantu Google Images memahami konteks gambar Anda melalui teks di dalam <figcaption>.

Tutorial: Implementasi Struktur Konten Profesional

Berikut adalah contoh penerapan elemen semantik ini dalam sebuah halaman berita teknologi:

<main> <article> <header> <h2>Masa Depan AI di Indonesia</h2> </header> <p>Artikel ini membahas perkembangan AI di tahun 2026...</p> <section> <h3>Penerapan di Sektor Publik</h3> <p>Sistem seperti Kolak Pisang mulai mengimplementasikan otomatisasi...</p> <figure> <img src="diagram-ai.jpg" alt="Diagram Alur AI Lokal"> <figcaption>Gambar 1: Alur pemrosesan data pada LLM lokal.</figcaption> </figure> </section> </article> <aside> <h3>Artikel Terkait</h3> <ul> <li><a href="#">Cara Setting Laravel Herd di M4</a></li> <li><a href="#">Belajar Docker untuk Pemula</a></li> </ul> </aside>
</main>

Tabel Perbandingan Penggunaan

Kesimpulan

Dengan menguasai <article>, <section>, <aside>, dan <figure>, Anda telah bertransformasi dari sekadar "pengetik kode" menjadi seorang "arsitek informasi". Struktur ini memastikan bahwa website Anda tidak hanya ramah bagi mata manusia, tetapi juga sangat optimal bagi mesin pencari dan teknologi asisten (seperti screen reader).