i / xv

Bab 02

HTML —
Struktur Semantik
& Aksesibilitas

Menulis bahasa pertama web: dokumen yang bermakna bagi manusia, mesin pencari, dan teknologi asistif.

ii / xv

Tujuan Pembelajaran

Setelah bab ini, Anda dapat:

1. Membedakan HTML semantik dan HTML hanya-visual, serta dampaknya pada aksesibilitas

2. Menyusun struktur dokumen bermakna dengan header, main, section, article

3. Menerapkan aksesibilitas dasar — teks alternatif, label form, urutan heading

4. Mengevaluasi kualitas semantik halaman web dengan checklist yang jelas

5. Membangun versi pertama proyek Personal Landing Page

iii / xv

Peta Posisi

HTML = Isi dari HTTP Response

◇

Di Bab 1, Anda melihat bahwa HTTP Response membawa dokumen HTML yang di-parse menjadi DOM Tree. Sekarang Anda berada di sisi penulisan — menciptakan dokumen yang akan diproses oleh rendering pipeline.

Bab 2 → HTML → Bab 3 → CSS → Bab 4 → JavaScript

                HTML mengatur makna dan hirarki informasi. Bukan warna, bukan animasi — melainkan struktur.
            

iv / xv

Analogi Dunia Nyata

HTML sebagai Denah Museum

Denah museum menunjukkan ruang utama, ruang pameran, jalur masuk, dan ruang informasi — bukan warna dinding.

                        Denah HTML harus bisa dipahami tanpa "melihat" tampilan visual — oleh screen reader, bot pencari, dan manusia.
                    

🏛️ Denah = HTML

Ruang utama, pameran, jalur masuk

🎨 Dekorasi = CSS

Warna dinding, lampu, suasana

🎭 Pemandu = JavaScript

Tur interaktif, respons terhadap pengunjung

v / xv

Mental Model

Dokumen sebagai Pohon Makna

└─ Document
   ├─ <header>
   │ ├─ h1 — "Ruang Karya Dira"
   │ └─ <nav> — tautan navigasi
   ├─ <main>
   │ ├─ <section> — Tentang Saya
   │ ├─ <section> — Karya
   │ │ ├─ <article> — Karya #1
   │ │ └─ <article> — Karya #2
   └─ <footer> — kontak

Setiap elemen memberi sinyal: "bagian ini inti halaman", "ini navigasi", "ini konten berdiri sendiri."

vi / xv

Elemen Kunci

Elemen Semantik Utama

`<header>`

Pembuka halaman — judul situs, navigasi utama

`<nav>`

Blok navigasi — tautan menuju bagian-bagian halaman

`<main>`

Konten utama — hanya satu per halaman

`<section>`

Seksi tematik — bermakna dalam konteks halaman

`<article>`

Konten berdiri sendiri — bisa dipahami terpisah

`<footer>`

Penutup halaman — info kontak, copyright

vii / xv

Perbandingan

`<div>` vs Semantik

❌ Non-Semantik

<div>
  <div> <h1>Dira</h1> </div>
  <div>
    <div> ...konten... </div>
  </div>
  <div> ...footer... </div>
</div>

Browser hanya tahu: "ini kotak."

✓ Semantik

<header>
  <h1>Dira</h1>
  <nav> ...link... </nav>
</header>
<main>
  <section> ...konten... </section>
</main>
<footer> ...footer... </footer>

Browser tahu: makna tiap bagian.

                Elemen semantik otomatis memberi ARIA landmark roles — sinyal yang digunakan screen reader untuk navigasi halaman.
            

viii / xv

Outline Dokumen

Hirarki Heading

h1

Judul Buku

h2

Judul Bab

h3

Subbab

h4

Sub-subbab

                        Satu h1 per halaman. Turunkan bertahap. Jangan pilih heading berdasarkan ukuran visual.
                    

Heading yang melompat level itu seperti buku yang lompat dari judul bab langsung ke sub-sub-subbab tanpa konteks.

💡 Gunakan CSS untuk ubah ukuran visual. Gunakan heading untuk atur makna.

ix / xv

Fondasi Inklusif

Aksesibilitas Dasar

Pertanyaan kunci: "Apakah informasi saya masih dapat diakses ketika tampilan visual hilang?"

x / xv

Kapan Menggunakan?

`<section>` vs `<article>`

◆

<section>

Seksi tematik — bermakna dalam konteks halaman.

                        ✓ "Tentang Saya" di portfolio

                        ✓ "Layanan" di landing page

<article>

Konten yang berdiri sendiri — bisa dipahami tanpa konteks halaman.

                        ✓ Karya individu di portofolio

                        ✓ Blog post, berita, produk

"Jika Anda mengambil satu <article> dan menempelkannya di halaman lain — apakah masih masuk akal?" — Tes Berdiri Sendiri

xi / xv

Contoh Lengkap

Struktur Semantik Nyata

                    <!DOCTYPE html>

                    <html lang="id">

                    <head>
                    <meta charset="utf-8" />
                    <title>Ruang Karya</title>
                    </head>
                    <body>
                    <header>
                    <h1>Ruang Karya Dira</h1>
                    <nav> ...links... </nav>
                    </header>
                    <main>
                    <section id="profil"> ... </section>
                    <section id="karya">
                    <article> ...karya 1... </article>
                    <article> ...karya 2... </article>
                    </section>
                    </main>
                    <footer> ...kontak... </footer>
                    </body>
                    </html>
                

lang="id"

Screen reader mengucapkan teks dengan aksen Bahasa Indonesia, bukan Inggris

<main> — Sekali

Hanya satu per halaman. Screen reader menggunakannya sebagai shortcut ke konten utama

<article> di <section>

Setiap karya bisa berdiri sendiri — lolos "tes berdiri sendiri"

xii / xv

⚠️ Kesadaran Keamanan

HTML Hidup di Sisi Client

🔐

Ingat trust boundary dari Bab 1: HTML di browser pengguna. Siapa pun bisa membuka DevTools dan melihat — bahkan mengubah — seluruh HTML Anda.

🚫 Jangan taruh di HTML: password, API key, data sensitif, token autentikasi

                    ✅ Tanyakan selalu: "Apakah saya menyimpan sesuatu di HTML yang seharusnya tidak terlihat oleh semua orang?"
                

xiii / xv

🔧 Engineering Checkpoint

Lima Dimensi Evaluasi

🔒 Keamanan

Adakah info sensitif yang terekspos di HTML? Semua teks di HTML adalah publik.

📖 Keterbacaan

Developer lain langsung paham struktur halaman dari elemen semantik — tanpa baca komentar.

⚡ Performa

Adakah div pembungkus tak perlu? Gambar besar tanpa tujuan?

📈 Skalabilitas

Jika tambah 10 karya baru, apakah pola section/article tetap konsisten?

🔧 Pemeliharaan

Bisa tambah bagian baru tanpa ubah struktur yang sudah ada?

xiv / xv

Proyek Mini

Personal Landing Page

Versi 1 — Hanya struktur HTML. CSS di Bab 3, JavaScript di Bab 4.

Spesifikasi

✓ <header> dengan nama + <nav>
✓ Bagian "Tentang Saya"
✓ Bagian "Karya" (min. 2 <article>)
✓ Bagian "Kontak"
✓ <footer> sederhana

Acceptance Criteria

① Elemen semantik tepat
② Satu h1, heading berjenjang
③ Semua gambar punya alt
④ lang="id" + meta charset
⑤ Navigasi internal bekerja

xv / xv

Ringkasan Bab 2

Key Takeaways

✦

                    🏛️ Semantik = Makna. Elemen semantik bukan dekorasi — mereka memberi sinyal kepada browser, screen reader, dan mesin pencari.
                

                    📊 Heading = Outline. Satu h1, lalu turun berjenjang. Jangan pilih heading berdasarkan ukuran visual.
                

                    ♿ Aksesibilitas = Desain. alt, label, lang, link teks jelas — bukan fitur tambahan, melainkan bagian dari struktur.
                

                    🔍 Article vs Section. Bisa berdiri sendiri? → article. Bermakna dalam konteks halaman? → section.
                

🔐 HTML = Publik. Ingat trust boundary: jangan taruh data sensitif di HTML.

Selanjutnya: Bab 3 — CSS: Tampilan Visual dan Responsif

HTML —Struktur Semantik& Aksesibilitas

Setelah bab ini, Anda dapat:

HTML = Isi dari HTTP Response

HTML sebagai Denah Museum

🏛️ Denah = HTML

🎨 Dekorasi = CSS

🎭 Pemandu = JavaScript

Dokumen sebagai Pohon Makna

Elemen Semantik Utama

<header>

<nav>

<main>

<section>

<article>

<footer>

<div> vs Semantik

❌ Non-Semantik

✓ Semantik

Hirarki Heading

Aksesibilitas Dasar

<section> vs <article>

<section>

<article>

Struktur Semantik Nyata

lang="id"

<main> — Sekali

<article> di <section>

HTML Hidup di Sisi Client

Lima Dimensi Evaluasi

🔒 Keamanan

📖 Keterbacaan

⚡ Performa

📈 Skalabilitas

🔧 Pemeliharaan

Personal Landing Page

Spesifikasi

Acceptance Criteria

Key Takeaways

HTML —
Struktur Semantik
& Aksesibilitas

`<header>`

`<nav>`

`<main>`

`<section>`

`<article>`

`<footer>`

`<div>` vs Semantik

`<section>` vs `<article>`