Andika Rekatias

Semantic HTML: Membuat Website yang Aksesibel & SEO-Friendly

| HTML | html, tutorial, semantic, aksesibilitas
Semantic HTML: Membuat Website yang Aksesibel & SEO-Friendly

Selamat di artikel terakhir seri HTML! Kita akan bahas Semantic HTML — cara nulis HTML yang gak cuma keliatan bener, tapi juga maknanya bener.

Ini yang membedakan developer HTML pemula vs yang udah paham.

1. Apa Itu Semantic HTML?

Semantic artinya bermakna. Jadi Semantic HTML itu pakai elemen HTML berdasarkan makna konten, bukan tampilan.

Contoh — Non-Semantic vs Semantic

<!-- ❌ Non-Semantic: semua div -->
<div class="header">
    <h1>Judul</h1>
</div>
<div class="nav">
    <a href="/">Home</a>
</div>
<div class="content">
    <p>Konten</p>
</div>

<!-- ✅ Semantic: elemen bermakna -->
<header>
    <h1>Judul</h1>
</header>
<nav>
    <a href="/">Home</a>
</nav>
<main>
    <p>Konten</p>
</main>

Hasil visualnya sama. Tapi maknanya beda banget.

2. Kenapa Penting?

Buat Screen Reader

Orang tuna netra pakai screen reader buat “baca” website. Elemen semantik bantu mereka ngerti struktur konten.

Buat SEO

Google crawler baca kode HTML Anda. Kalau pakai <article> dan <section>, Google ngerti konteks konten. Kalau cuma <div>, Google nebak-nebak.

Buat Developer Lain (Termasuk Diri Sendiri 6 Bulan Kemudian)

Kode yang pakai <header>, <nav>, <main> lebih mudah dipahami daripada sekumpulan <div class="header">, <div class="nav">, <div class="content">.

3. Elemen Semantik Utama

<header> — Header

<header>
    <h1>Nama Website</h1>
    <p>Tagline atau deskripsi singkat</p>
</header>

Biasanya berisi logo, judul, dan navigasi utama.

<nav> — Navigasi

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
    </ul>
</nav>

Jangan lupa: gak semua link harus di <nav>. Cuma navigasi utama aja.

<main> — Konten Utama

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

Cuma satu <main> per halaman. Ini konten utama yang dicari pengunjung.

<article> — Konten Independen

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

Konten yang berdiri sendiri — bisa dibaca tanpa konteks halaman lain. Cocok buat blog post, berita, atau komentar.

<section> — Section

<section>
    <h2>Tentang Kami</h2>
    <p>Deskripsi section ini...</p>
</section>

Pengelompokan konten berdasarkan topik. Bedanya sama <div>: <section> punya makna, <div> cuma kontainer.

<aside> — Konten Sampingan

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

Konten yang gak langsung berhubungan dengan konten utama. Biasanya sidebar.

<footer> — Footer

<footer>
    <p>&copy; 2026 Website Saya</p>
</footer>

4. Elemen Semantik Lainnya

<figure> & <figcaption>

<figure>
    <img src="kucing.jpg" alt="Kucing lucu">
    <figcaption>Kucing sedang tidur</figcaption>
</figure>

<time>

<p>Dipublikasikan pada <time datetime="2026-06-20">20 Juni 2026</time></p>

Bikin mesin pencari ngerti ini waktu.

<address>

<address>
    <p>Ditulis oleh: Andika Rekatias</p>
    <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</address>

<details> & <summary>

<details>
    <summary>Klik untuk lihat detail</summary>
    <p>Ini konten tersembunyi yang bisa dibuka/tutup.</p>
</details>

Cocok buat FAQ atau konten expandable.

<mark>

<p>HTML5 mendukung <mark>audio</mark> dan <mark>video</mark> native.</p>

5. Struktur Halaman Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Semantic HTML</title>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>Nama Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main>
        <!-- Artikel -->
        <article>
            <header>
                <h2>Judul Artikel</h2>
                <time datetime="2026-06-20">20 Juni 2026</time>
            </header>
            
            <section>
                <h3>Pendahuluan</h3>
                <p>Isi pendahuluan...</p>
            </section>
            
            <section>
                <h3>Isi Utama</h3>
                <p>Isi utama artikel...</p>
                
                <figure>
                    <img src="diagram.jpg" alt="Diagram alur">
                    <figcaption>Diagram alur kerja</figcaption>
                </figure>
            </section>
            
            <footer>
                <p>Ditulis oleh <address>Andika Rekatias</address></p>
            </footer>
        </article>
        
        <!-- Sidebar -->
        <aside>
            <h3>Artikel Terkait</h3>
            <ul>
                <li><a href="#">Artikel 1</a></li>
                <li><a href="#">Artikel 2</a></li>
            </ul>
        </aside>
    </main>
    
    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Website Saya</p>
        <nav>
            <a href="/privacy">Privacy</a>
            <a href="/terms">Terms</a>
        </nav>
    </footer>
</body>
</html>

6. ARIA — Untuk Elemen Custom

Kadang Anda butuh elemen custom yang tetap aksesibel. ARIA bantu hal itu.

Role

<div role="navigation">
    <a href="/">Home</a>
</div>

ARIA Labels

<nav aria-label="Navigasi utama">
    <a href="/">Home</a>
</nav>

<button aria-label="Tutup menu">X</button>

<input type="search" aria-label="Cari artikel">

ARIA Describedby

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-help">
<small id="email-help">Format: [email protected]</small>

7. Semantik vs Non-Semantik

Semantik Non-Semantik Fungsi
<header> <div class="header"> Header
<nav> <div class="nav"> Navigasi
<main> <div class="main"> Konten utama
<article> <div class="article"> Konten independen
<section> <div class="section"> Section topik
<aside> <div class="sidebar"> Sidebar
<footer> <div class="footer"> Footer

8. Tips Semantic HTML

<!-- ✅ Heading hierarkis -->
<h1>Judul Utama</h1>
  <h2>Sub Judul</h2>
    <h3>Detail</h3>

<!-- ✅ Satu <main> per halaman -->
<main>
    <!-- konten utama -->
</main>

<!-- ✅ <article> buat konten independen -->
<article>
    <!-- bisa dibaca sendiri -->
</article>

<!-- ✅ <section> buat topik berbeda -->
<section>
    <h2>Topik A</h2>
</section>
<section>
    <h2>Topik B</h2>
</section>

<!-- ✅ ARIA buat elemen custom -->
<div role="navigation" aria-label="Main menu">
    <!-- menu -->
</div>

9. Recap

Elemen Fungsi
<header> Header section
<nav> Navigasi
<main> Konten utama (1 per halaman)
<article> Konten independen
<section> Section topik
<aside> Konten sampingan
<footer> Footer section
<figure> Gambar + caption
<time> Waktu
<address> Alamat/kontak
<details> Expandable content
<mark> Highlight

Penutup — Seri HTML Selesai! 🎉

Selamat! Anda udah menyelesaikan seri Pengenalan HTML.

Yang udah dipelajari:

  1. Pengenalan HTML — Apa itu HTML, sejarah, cara kerja
  2. Struktur Dasar HTML — DOCTYPE, html, head, body, nesting
  3. Teks & Heading — Paragraf, heading, format teks
  4. Link, Gambar, Audio & Video — Hyperlink dan media
  5. List — Ordered, unordered, nested lists
  6. Tabel — Membuat dan styling tabel
  7. Form & Input — Mengumpulkan data dari pengguna
  8. Semantic HTML — Membuat website yang aksesibel dan SEO-friendly

HTML itu fondasi. Tanpa HTML, gak ada CSS, gak ada JavaScript, gak ada framework apapun.

Langkah selanjutnya: Mulai belajar CSS buat styling halaman web!

← Sebelumnya: Form & Input
Mail Facebook Twitter Whatsapp