Belajar Web Development

Semantic HTML

Sampai sekarang kita sudah belajar banyak tag HTML. Tapi di dunia nyata, website profesional menggunakan tag semantic untuk membuat struktur halaman yang lebih bermakna dan terorganisir.

Apa itu Semantic HTML?

Semantic artinya bermakna. Tag semantic HTML adalah tag yang namanya menjelaskan fungsinya:

Tag SemanticFungsi
<header>Bagian atas halaman (logo, navigasi)
<nav>Menu navigasi
<main>Konten utama halaman
<section>Bagian/seksi dari konten
<article>Konten yang berdiri sendiri (artikel, post)
<aside>Konten sampingan (sidebar)
<footer>Bagian bawah halaman

Perbandingan: Non-Semantic vs Semantic

❌ Non-semantic (kurang baik):

<div id="header">
    <div id="nav">...</div>
</div>
<div id="content">
    <div class="article">...</div>
</div>
<div id="footer">...</div>

✅ Semantic (lebih baik):

<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

:::tip Kenapa Semantic Penting?

  1. Mudah dibaca — Programmer lain bisa langsung paham struktur halaman
  2. SEO — Google lebih mudah memahami konten website kamu
  3. Aksesibilitas — Screen reader bisa navigasi halaman dengan lebih baik
  4. Standar industri — Semua website profesional menggunakan semantic HTML :::

Struktur Halaman dengan Semantic HTML

Begini layout umum sebuah website:

┌──────────────────────────────┐
│           <header>           │
│  ┌──────────────────────┐    │
│  │        <nav>         │    │
│  └──────────────────────┘    │
├──────────────────────────────┤
│            <main>            │
│  ┌──────────────┐ ┌────────┐ │
│  │  <article>   │ │<aside> │ │
│  │  ┌─────────┐ │ │        │ │
│  │  │<section>│ │ │        │ │
│  │  └─────────┘ │ │        │ │
│  │  ┌─────────┐ │ │        │ │
│  │  │<section>│ │ │        │ │
│  │  └─────────┘ │ │        │ │
│  └──────────────┘ └────────┘ │
├──────────────────────────────┤
│           <footer>           │
└──────────────────────────────┘

Latihan: Halaman Blog dengan Semantic HTML

Buat file blog.html di folder ~/Herd/belajar/:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Saya</title>
</head>
<body>
    <!-- Header: Logo dan Navigasi -->
    <header>
        <h1>Blog User</h1>
        <nav>
            <a href="index.html">Beranda</a> |
            <a href="blog.html">Blog</a> |
            <a href="profil.html">Profil</a> |
            <a href="daftar.html">Daftar</a>
        </nav>
    </header>

    <!-- Main: Konten Utama -->
    <main>
        <article>
            <h2>Hari Pertama Belajar HTML</h2>
            <p><small>Ditulis pada 7 April 2026</small></p>

            <section>
                <h3>Apa yang Dipelajari</h3>
                <p>Hari ini saya belajar tentang struktur dasar HTML, tag-tag penting
                seperti heading, paragraf, link, dan gambar.</p>
            </section>

            <section>
                <h3>Hal Menarik</h3>
                <p>Ternyata membuat website itu tidak sesulit yang saya bayangkan!
                Dengan beberapa tag saja, kita sudah bisa membuat halaman web.</p>
                <ul>
                    <li>HTML itu bahasa markup, bukan bahasa pemrograman</li>
                    <li>Setiap tag punya pembuka dan penutup</li>
                    <li>Indentasi membuat kode lebih mudah dibaca</li>
                </ul>
            </section>
        </article>

        <article>
            <h2>Belajar Tabel dan Form</h2>
            <p><small>Ditulis pada 7 April 2026</small></p>

            <section>
                <h3>Tabel</h3>
                <p>Tabel digunakan untuk menampilkan data dalam baris dan kolom.
                Saya sudah bisa membuat tabel dengan header dan body.</p>
            </section>

            <section>
                <h3>Form</h3>
                <p>Form adalah cara pengguna mengirim data ke server.
                Nanti ini akan sangat berguna ketika belajar PHP!</p>
            </section>
        </article>

        <aside>
            <h3>Tentang Penulis</h3>
            <p>User adalah seorang yang sedang belajar web development dari nol.</p>

            <h3>Kategori</h3>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </aside>
    </main>

    <!-- Footer: Informasi Bawah -->
    <footer>
        <p>&copy; 2026 Blog User. Dibuat sambil belajar web development.</p>
    </footer>
</body>
</html>

:::tip Entity HTML &copy; adalah HTML entity untuk simbol copyright ©. Entity lain yang sering digunakan:

  • &amp; → &
  • &lt; → <
  • &gt; → >
  • &nbsp; → spasi yang tidak bisa dipecah :::

Rangkuman HTML

Selamat! Kamu sudah menyelesaikan bab HTML. Berikut ringkasan apa yang sudah dipelajari:

TopikTag Utama
Struktur<html>, <head>, <body>
Teks<h1>-<h6>, <p>, <strong>, <em>
Link & Gambar<a>, <img>
List<ul>, <ol>, <li>
Tabel<table>, <tr>, <th>, <td>
Form<form>, <input>, <select>, <textarea>
Semantic<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

Selanjutnya

HTML baru membuat struktur. Halaman kita masih terlihat polos tanpa styling. Mari belajar Dasar CSS → untuk membuat tampilan website jadi lebih menarik!