Elemen Semantik HTML5

25 menit Menengah HTML5

Pelajari elemen semantik HTML5 untuk membuat struktur halaman web yang bermakna, mudah diakses, dan SEO-friendly.

Apa itu Elemen Semantik?

Elemen semantik adalah elemen HTML yang secara jelas mendeskripsikan maknanya baik untuk browser maupun pengembang. HTML5 memperkenalkan banyak elemen semantik baru yang membantu membuat struktur halaman lebih bermakna dan terorganisir.

SEO yang Lebih Baik

Search engine lebih mudah memahami struktur dan relevansi konten.

Aksesibilitas

Screen reader dapat lebih mudah menavigasi dan memahami konten.

Kode yang Lebih Bersih

Struktur yang jelas membuat kode lebih mudah dipahami dan dipelihara.

Responsive Design

Memudahkan pembuatan layout yang responsif di berbagai perangkat.

🔄 Perbandingan: Semantic vs Non-Semantic

Non-Semantic (Div Soup)

<div id="header">
  <div class="logo">...</div>
  <div class="nav">...</div>
</div>
<div id="main">
  <div class="content">...</div>
  <div class="sidebar">...</div>
</div>
<div id="footer">...</div>

Semantic (HTML5)

<header>
  <h1>Logo</h1>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Elemen Semantik Utama

<header> Kepala

Bagian kepala dokumen atau section, biasanya berisi judul, logo, dan navigasi utama.

<header>
  <h1>Nama Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<nav> Navigasi

Bagian navigasi utama yang berisi link-link penting untuk menavigasi website.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main> Utama

Konten utama dokumen yang unik dan tidak berulang di halaman lain.

<main>
  <h1>Judul Konten</h1>
  <p>Konten utama halaman...</p>
</main>

<article> Artikel

Konten independen yang bisa berdiri sendiri seperti post blog, artikel berita, atau komentar.

<article>
  <h2>Judul Artikel</h2>
  <p>Isi artikel yang independen...</p>
</article>

<section> Bagian

Pengelompokan konten tematik yang biasanya memiliki heading sendiri.

<section>
  <h2>Tentang Kami</h2>
  <p>Sejarah perusahaan...</p>
</section>

<aside> Samping

Konten sampingan yang terkait dengan konten utama, seperti sidebar atau pull quotes.

<aside>
  <h3>Artikel Terkait</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
  </ul>
</aside>

<footer> Kaki

Bagian kaki dokumen atau section yang berisi informasi penutup seperti copyright dan kontak.

<footer>
  <p>© 2024 Nama Perusahaan</p>
  <address>Alamat perusahaan</address>
</footer>

<figure> & <figcaption> Media

Kelompok media (gambar, diagram, code snippet) dengan keterangan yang terkait.

<figure>
  <img src="chart.jpg" alt="Grafik pertumbuhan">
  <figcaption>Grafik pertumbuhan perusahaan 2024</figcaption>
</figure>

Article vs Section

Kedua elemen ini sering membingungkan. Pahami perbedaannya untuk penggunaan yang tepat:

Fungsi

Konten independen yang bisa berdiri sendiri

Pengelompokan konten tematik

Contoh

Post blog, artikel berita, komentar

Bab, tab content, grup artikel terkait

Distribusi

Bisa didistribusikan secara terpisah

Bagian dari dokumen utama

Struktur

Biasanya memiliki heading dan konten lengkap

Membutuhkan heading untuk konteks

Contoh Penggunaan yang Tepat:

<article>
  <h1>Judul Artikel Blog</h1>
  <section>
    <h2>Pendahuluan</h2>
    <p>Isi pendahuluan...</p>
  </section>
  <section>
    <h2>Pembahasan Utama</h2>
    <p>Isi pembahasan...</p>
  </section>
</article>

Visualisasi Layout Semantik

<main>

<aside>

Kode Lengkap Layout:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Semantik</title>
</head>
<body>
    <header>
        <h1>Nama Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Judul Artikel Utama</h2>
            <p>Konten artikel...</p>
            
            <section>
                <h3>Bagian Pertama</h3>
                <p>Konten bagian pertama...</p>
            </section>
            
            <section>
                <h3>Bagian Kedua</h3>
                <p>Konten bagian kedua...</p>
            </section>
        </article>
        
        <aside>
            <h3>Artikel Terkait</h3>
            <ul>
                <li><a href="#">Link Terkait 1</a></li>
                <li><a href="#">Link Terkait 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2024 Nama Perusahaan. All rights reserved.</p>
        <address>
            Email: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>
</body>
</html>

Elemen Semantik Tambahan

Elemen Teks Semantik

<mark> Teks yang ditandai/disorot Contoh: teks penting

<time> Waktu/tanggal yang dapat dibaca mesin Contoh: 19 Des 2024

<address> Informasi kontak Untuk alamat dan kontak

Elemen Interaktif

<details> & <summary> Widget yang bisa dibuka/tutup Untuk FAQ, spoiler content

<progress> Indikator progres tugas 75%

<meter> Pengukuran dalam range 60%

Latihan Praktik

Bangun Website Semantik Pertamamu

Menengah

🎯 Tujuan:

Buat halaman website portfolio pribadi menggunakan elemen semantik HTML5 dengan struktur yang bermakna dan mudah diakses.

📋 Requirements:

Struktur Utama

✅ <header> dengan logo dan navigasi
✅ <main> untuk konten utama
✅ <footer> dengan informasi kontak
✅ <nav> untuk menu navigasi

Konten

✅ <article> untuk bio/profile
✅ <section> untuk portfolio projects
✅ <aside> untuk skills/keahlian
✅ <figure> untuk foto profile

Elemen Tambahan

✅ <time> untuk tahun pengalaman
✅ <address> untuk informasi kontak
✅ <mark> untuk highlight skills

Tip Pro: Gunakan validator HTML (validator.w3.org) untuk memastikan struktur semantik Anda sudah benar dan bebas error!