Pertemuan 9-10: Layout Semantik & Responsif

Membangun Struktur Web Modern yang Bermakna

Pengertian

HTML Semantik adalah penggunaan tag HTML yang sesuai dengan makna atau tujuan dari konten yang dibungkusnya. HTML5 memperkenalkan banyak tag semantik baru seperti <header>, <nav>, <main>, <article>, <section>, <aside>, dan <footer>. Penggunaan tag ini sangat penting untuk SEO (Search Engine Optimization) dan aksesibilitas. Desain Responsif adalah pendekatan yang memastikan layout web dapat beradaptasi dengan baik di berbagai ukuran layar, yang dimulai dengan tag <meta name="viewport">.

Analogi

Analogi: Dokumen Resmi
Menggunakan <div> untuk semua bagian layout itu seperti menulis laporan panjang tanpa judul, sub-judul, atau nomor halaman. Sedangkan menggunakan tag semantik adalah seperti menyusun laporan dengan struktur yang jelas: ada kop surat (<header>), daftar isi (<nav>), isi utama (<main>), dan catatan kaki (<footer>). Dokumen menjadi jauh lebih mudah dibaca dan dipahami oleh siapa pun.

Contoh Kode & Hasil

1. Struktur Layout Blog Semantik

Header
Konten Utama
Footer
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

2. Tag <article> untuk Konten Mandiri

Judul Postingan

Isi postingan...

<article>
  <h2>Judul Postingan</h2>
  <p>Isi postingan...</p>
</article>

3. Tag <section> untuk Mengelompokkan Konten

Tentang Kami

...

Visi Misi

...

<section>
  <h2>Tentang Kami</h2>
  <p>...</p>
</section>
<section>
  <h2>Visi Misi</h2>
  <p>...</p>
</section>

4. Tag <aside> untuk Konten Sampingan

Konten utama...

<main>
  <p>Konten utama...</p>
</main>
<aside>
  <p>Ini adalah sidebar atau info tambahan.</p>
</aside>

5. Meta Tag Viewport untuk Responsif

Tag ini wajib ada di dalam <head> agar website Anda dapat menyesuaikan diri dengan layar perangkat mobile.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Latihan Mandiri

Tugas: Membuat Struktur Halaman Berita

  1. Buat file berita.html.
  2. Gunakan <header> untuk menampung nama portal berita dan <nav> untuk kategori berita (Olahraga, Teknologi, dll).
  3. Gunakan <main> untuk membungkus konten utama.
  4. Di dalam main, buat dua buah <article>, masing-masing berisi judul berita (<h2>) dan beberapa paragraf.
  5. Tambahkan <aside> di samping artikel untuk "Berita Terpopuler".
  6. Terakhir, tambahkan <footer> yang berisi informasi hak cipta.

Kesimpulan

Menggunakan tag HTML semantik bukan lagi sebuah pilihan, melainkan sebuah praktik terbaik dalam pengembangan web modern. Ini tidak hanya membuat kode kita lebih bersih dan mudah dibaca, tetapi juga memberikan manfaat besar bagi SEO dan aksesibilitas. Dikombinasikan dengan meta tag viewport, kita telah meletakkan fondasi yang kokoh untuk membangun website yang terstruktur dengan baik dan siap untuk desain responsif.