Container <div> dan Struktur Semantik

Container <div>

<div> adalah elemen blok yang digunakan untuk mengelompokkan konten dan membentuk bagian-bagian halaman. Nama div berasal dari kata “division”.

Fungsi utama:

1. Sebagai wadah fleksibel untuk teks, gambar, form, dan elemen lainnya.
2. Mengelompokkan elemen agar lebih terorganisir.
3. Diberi class atau id untuk styling dengan CSS atau manipulasi dengan JavaScript.
4. Tidak memiliki tampilan khusus tanpa CSS.

Contoh penggunaan dasar:

<div class="header">
  <h1>Dhimas Nurhidayat</h1>
  <p>Mahasiswa Informatika | Universitas Pembangunan Jaya</p>
</div>

Contoh dengan style inline:

<div style="background-color: pink;">
  <img src="dn.jpg" alt="Dhimas" />
  <h2>Tentang Saya</h2>
  <p>Deskripsi singkat tentang saya.</p>
</div>

Penggunaan class untuk pengelompokan:

<div class="nav">
  <a href="index.html">Home</a> |
  <a href="projek.html">Projek</a> |
  <a href="kontak.html">Kontak</a>
</div>
 
<div class="main">
  <!-- konten utama -->
</div>

Struktur Semantik HTML

Struktur semantik adalah penggunaan tag HTML yang memiliki makna sesuai isi kontennya. Tujuannya agar struktur halaman:

• Lebih jelas secara logika.
• Mudah dipahami manusia dan mesin (browser, mesin pencari, screen reader).

Elemen semantik utama:

• <header>: bagian atas halaman atau bagian dari suatu section/artikel.
• <nav>: bagian navigasi, berisi kumpulan link.
• <main>: konten utama halaman (hanya satu per halaman).
• <section>: bagian yang memiliki tema atau topik tertentu.
• <article>: konten yang bisa berdiri sendiri (misalnya artikel, postingan).
• <aside>: konten tambahan atau sampingan (sidebar, info tambahan).
• <footer>: bagian bawah halaman (informasi penutup, copyright, link penting).

Contoh Struktur Semantik Sederhana

<header>
  <h1>Portfolio</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="projek.html">Projek</a>
    <a href="kontak.html">Kontak</a>
  </nav>
</header>
 
<main>
  <section>
    <h2>Tentang Saya</h2>
    <p>Deskripsi tentang saya.</p>
  </section>
 
  <section>
    <h2>Projek</h2>
    <article>
      <h3>Projek 1</h3>
      <p>Deskripsi projek 1.</p>
    </article>
  </section>
 
  <aside>
    <h3>Informasi Tambahan</h3>
    <p>Konten sampingan yang masih terkait.</p>
  </aside>
</main>
 
<footer>
  <p>&copy; 2025 Nama Anda</p>
</footer>

Dengan struktur semantik seperti ini, halaman lebih teratur dan mudah dikembangkan.