Frontend Academy · Pelajaran

HTML Semantik sebagai Fondasi

Gunakan elemen HTML asli seperti button, nav, dan heading untuk memperoleh aksesibilitas bawaan tanpa usaha tambahan sebelum menggunakan ARIA.

Pelajaran 2 dari 413 langkah

HTML Semantik sebagai Fondasi adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

HTML Semantik Memberikan Aksesibilitas Secara Gratis

Menggunakan elemen HTML yang tepat memberi Anda dukungan papan ketik, pengumuman pembaca layar, dan peran ARIA yang benar secara otomatis. Sebagian besar masalah aksesibilitas muncul karena menggunakan div + JavaScript, bukan elemen asli.

Elemen button vs div dengan onClick

<button> dapat menerima fokus, diumumkan sebagai 'tombol' oleh pembaca layar, memicu klik saat menekan Enter/Spasi, dan berfungsi saat form dikirim. <div onClick> tidak memiliki semua kemampuan tersebut.

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

Gunakan button untuk Tombol, a untuk Tautan

Jika tindakan tersebut menavigasi ke URL, gunakan <a href>. Jika tindakan tersebut melakukan sesuatu di halaman, gunakan <button>. Jangan gunakan anchor sebagai tombol (tanpa href, hanya onclick) — hal ini membingungkan bagi teknologi asistif.

Judul Membentuk Kerangka Dokumen

Gunakan h1-h6 secara berurutan untuk membuat kerangka yang logis. Pengguna pembaca layar menavigasi melalui judul — melewati tingkat (h1 -> h3) menciptakan celah yang membingungkan.

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

Elemen Penanda Wilayah

Elemen penanda wilayah HTML5 (header, nav, main, aside, footer) memungkinkan pengguna pembaca layar berpindah di antara wilayah utama. Gunakan satu <main> untuk setiap halaman.

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

Elemen Daftar

Gunakan <ul> untuk daftar tidak berurutan, <ol> untuk daftar berurutan, dan <dl> untuk daftar definisi. Pembaca layar mengumumkan 'daftar berisi N item' — petunjuk navigasi yang bermakna.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

Formulir: Beri Label pada Setiap Masukan

Setiap masukan memerlukan <label> yang terkait. Pasangan for/id menghubungkan keduanya — mengeklik label akan memfokuskan masukan, dan pembaca layar mengumumkan label saat fokus berpindah ke sana.

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

fieldset dan legend untuk Grup

Kelompokkan masukan yang berkaitan (misalnya, tombol radio) dengan <fieldset> + <legend>. Pembaca layar mengumumkan legend setiap kali salah satu masukan anggota menerima fokus.

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

Elemen table untuk Data Tabular

Gunakan <table> dengan <thead>, <tbody>, dan <th scope="col"> — jangan pernah menggunakan tabel untuk tata letak. Pembaca layar menavigasi sel dalam dua dimensi dan mengumumkan header.

article, section, dan figure

<article>: konten mandiri (kiriman blog, komentar). <section>: pengelompokan tematik dengan judul. <figure> + <figcaption>: media dengan keterangan.

ARIA Hanya Jika Diperlukan

Aturan pertama ARIA: jangan gunakan ARIA. HTML asli selalu lebih baik. Gunakan ARIA hanya jika tidak ada elemen semantik yang sesuai untuk widget khusus Anda (kotak kombo, tab, atau pohon).

Pemeriksaan Singkat

Mengapa <button onclick="..."> lebih disarankan daripada <div onclick="...">?

Jawab di pelajaran interaktif

Rangkuman: HTML Semantik

Gunakan elemen yang tepat: button untuk tindakan, a untuk navigasi, h1-h6 secara berurutan untuk kerangka, elemen penanda wilayah (header, nav, main, footer), ul/ol untuk daftar, label untuk setiap masukan, fieldset/legend untuk grup radio, dan table untuk tabel data. HTML asli memberikan aksesibilitas secara gratis. ARIA adalah pilihan terakhir.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “HTML Semantik sebagai Fondasi” gratis?

Ya — teks lengkap “HTML Semantik sebagai Fondasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “HTML Semantik sebagai Fondasi”?

Gunakan elemen HTML asli seperti button, nav, dan heading untuk memperoleh aksesibilitas bawaan tanpa usaha tambahan sebelum menggunakan ARIA. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “HTML Semantik sebagai Fondasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy