Arsitektur HTML5 Semantik, Pohon Aksesibilitas & SEO Teknis
Membangun Dokumen Web yang Bermakna bagi Manusia, Screen Reader, dan Bot Pencari
01. Target Pembelajar & Prasyarat
Frontend developer yang ingin membuat website yang ramah aksesibilitas dan mudah diindeks Google.
02. Kompetensi Konseptual (Level 1ā2)
- āMenjelaskan perbedaan pohon DOM visual dan Accessibility Tree yang dibaca screen reader.
03. Kompetensi Praktis & Artefak Nyata (Level 3ā4)
- āMenyusun dokumen HTML5 berhierarki heading (H1-H6) sempurna tanpa div soup.
04. Aplikasi Nyata & Verifikasi
Penerapan Industri: Arsitektur dokumen seluruh halaman publik Z-Automation.
Metode Verifikasi: Menguji navigasi keyboard dengan tombol Tab dan memverifikasi kontras warna WCAG.
Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?
Kuasai tag semantik (main, article, section, nav), standar WCAG 2.1 AA, dan tag metadata Open Graph untuk distribusi media sosial.
Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.
Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol
HTML Semantik Sebagai Fondasi Makna
HTML bukan sekadar bahasa untuk mengatur posisi kotak di layar. HTML adalah bahasa yang memberikan arti pada data. Elemen `<main>` memberi tahu peramban bagian inti halaman, `<nav>` menandai tautan navigasi, dan `<article>` mengelompokkan konten yang mandiri.
Alur Arsitektur Sistem Otonom & Runtime
Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.
{
"input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}Koreksi Asumsi Umum vs Realitas Rekayasa
āCukup menambahkan tag div berulang kali dan merapikannya dengan CSS.ā
Div soup merusak aksesibilitas bagi penyandang disabilitas dan menurunkan skor SEO teknis di mesin pencari.
Implementasi Langkah-demi-Langkah
Hasil akhir yang diharapkan: Dokumen HTML5 semantik lengkap dengan tag Open Graph dan navigasi keyboard.
lab-b1-m2/ āāā article.html
1Menulis Dokumen Semantik
Struktur semantik dengan tag meta Open Graph.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Panduan Rekayasa Web ā Z-Automation</title> |
| 7 | <meta property="og:title" content="Panduan Rekayasa Web"> |
| 8 | <meta property="og:description" content="Membangun web semantik berstandar industri."> |
| 9 | </head> |
| 10 | <body> |
| 11 | <header> |
| 12 | <nav aria-label="Navigasi Utama"> |
| 13 | <a href="/">Beranda</a> |
| 14 | <a href="/layanan">Layanan</a> |
| 15 | </nav> |
| 16 | </header> |
| 17 | <main id="konten-utama"> |
| 18 | <article> |
| 19 | <h1>Arsitektur Web Semantik</h1> |
| 20 | <p>Membangun dokumen yang dapat diakses oleh semua kalangan.</p> |
| 21 | </article> |
| 22 | </main> |
| 23 | </body> |
| 24 | </html> |
Dokumen valid tanpa peringatan semantik.
Mengantisipasi Masalah Umum & Tantangan Ekstensi
Tambahkan breadcrumb navigation dengan schema microdata JSON-LD.
Uji Kompetensi Mandiri & Verifikasi Hasil
Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.
BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)
01.Mengapa sebuah tombol interaktif wajib menggunakan tag <button> alih-alih <div onclick='...'>?
BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN ā MIN. 21 POIN)
Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar: