HTML · CHEATSHEET 01

HTML: Struktur & Elemen Web

Peta ringkas untuk memahami bagaimana sebuah halaman web disusun—mulai dari kerangka dokumen sampai form yang bisa diisi.

17 topik utama± 38 menit bacaRamah pemula

Fondasi halaman HTML

HTML memberi makna dan susunan pada isi web. CSS mengatur penampilan, sedangkan JavaScript mengatur perilakunya.

Bayangkan: Bayangkan membuat rumah: HTML adalah kerangka dan nama setiap ruangan, CSS adalah cat serta dekorasi, JavaScript adalah listrik dan tombol otomatis.

Kerangka wajib

Peta dasar sebuah dokumen

Dokumen modern dimulai dengan deklarasi HTML5. Elemen html membungkus seluruh halaman; head menyimpan informasi untuk browser; body berisi semua yang dilihat pengunjung.

CONTOH · TULIS ULANG DENGAN IDEMU

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Majalah Digital Kelas 8</title>
</head>
<body>
  <h1>Majalah Digital Kelas 8</h1>
  <p>Selamat datang di ruang karya kami.</p>
</body>
</html>

Ingat: head seperti kartu identitas yang dibaca browser; body seperti ruang pamer yang dilihat pengunjung.

Identitas halaman

lang, charset, viewport, dan title

lang membantu pembaca layar mengenali bahasa. charset menjaga huruf dan simbol tampil benar. viewport membuat ukuran halaman mengikuti layar. title menjadi nama pada tab browser.

CONTOH · TULIS ULANG DENGAN IDEMU

<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Galeri Digital SMP</title>
</head>

Ingat: Judul tab yang jelas membuat halaman mudah ditemukan saat banyak tab terbuka.

Elemen, atribut, dan hubungan keluarga

Sebagian besar isi HTML dibuat dari tag pembuka, konten, dan tag penutup. Atribut memberi informasi tambahan pada tag pembuka.

Bayangkan: Elemen seperti kotak bekal: tag pembuka adalah tutup yang dibuka, isi berada di tengah, dan tag penutup menandai kotaknya selesai.

Anatomi elemen

Pembuka, isi, dan penutup

Nama pada tag pembuka dan penutup harus sama. Garis miring pada tag penutup menandakan elemen sudah selesai.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Hari ini kami belajar membuat halaman web.</p>

<!-- pembuka       isi                         penutup -->
<!-- <p>            ...                        </p>    -->

Ingat: Indentasi dua spasi membantu mata melihat elemen mana yang berada di dalam elemen lain.

Atribut

Instruksi tambahan untuk elemen

Atribut ditulis pada tag pembuka dalam bentuk nama="nilai". Satu elemen boleh memiliki beberapa atribut dengan fungsi berbeda.

CONTOH · TULIS ULANG DENGAN IDEMU

<a href="jadwal.html" title="Buka jadwal ekskul">
  Lihat jadwal
</a>

<img src="robot-karya.jpg" alt="Robot penyiram tanaman buatan siswa">

Ingat: Atribut seperti label pada paket: paketnya sama, tetapi label memberi tujuan dan petunjuk tambahan.

Nesting

Parent, child, dan sibling

Elemen dapat berada di dalam elemen lain. Pembungkus disebut parent, isi langsungnya disebut child, dan elemen sejajar disebut sibling.

CONTOH · TULIS ULANG DENGAN IDEMU

<article>
  <h2>Robot Penjaga Tanaman</h2>
  <p>Robot ini membaca kelembapan tanah.</p>
</article>

Ingat: article adalah tas; h2 dan p adalah dua buku yang sejajar di dalam tas tersebut.

Catatan kode

Komentar yang tidak tampil di halaman

Komentar membantu menjelaskan bagian kode kepada diri sendiri atau teman satu tim. Browser tidak menampilkannya sebagai isi halaman.

CONTOH · TULIS ULANG DENGAN IDEMU

<!-- Bagian ini berisi karya terbaru -->
<section>
  <h2>Karya Minggu Ini</h2>
</section>

Ingat: Tulis alasan atau tujuan bagian kode, bukan mengulang hal yang sudah jelas dari tag-nya.

Teks dan hierarki informasi

Judul dan paragraf bukan hanya mengubah ukuran teks. Keduanya menjelaskan urutan pentingnya informasi kepada browser dan pembaca layar.

Bayangkan: Struktur heading seperti daftar isi buku: judul buku memakai h1, bab memakai h2, dan subbab memakai h3.

Heading

h1 sampai h6

Gunakan h1 untuk topik utama halaman, lalu h2 dan h3 untuk bagian di bawahnya. Pilih tingkat berdasarkan struktur, bukan karena ingin ukuran tertentu.

CONTOH · TULIS ULANG DENGAN IDEMU

<h1>Pameran Digital Sekolah</h1>

<h2>Proyek Website</h2>
<h3>Majalah Kelas</h3>

<h2>Proyek Robotika</h2>
<h3>Penyiram Tanaman</h3>

Ingat: Mulailah dengan satu h1 yang jelas dan jangan melompat tingkat tanpa alasan struktur.

Paragraf

p untuk satu gagasan

Satu paragraf sebaiknya membawa satu gagasan utama. Browser otomatis memisahkan paragraf sebagai blok.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Tim web membuat katalog karya siswa.</p>
<p>Tim robotika menyiapkan sensor kelembapan.</p>

Ingat: Jangan memakai banyak br untuk memisahkan paragraf. Gunakan elemen p baru.

Makna teks

strong dan em

strong menandai informasi yang penting. em memberi penekanan pada kata atau frasa. Keduanya membawa makna, bukan sekadar tampilan tebal atau miring.

CONTOH · TULIS ULANG DENGAN IDEMU

<p><strong>Batas pengumpulan: Jumat.</strong></p>
<p>Karya harus dibuat dengan ide <em>kalian sendiri</em>.</p>

Ingat: Untuk dekorasi semata, atur tampilan lewat CSS; gunakan elemen HTML sesuai maknanya.

Pemisah

br dan hr secukupnya

br membuat pindah baris di dalam satu kesatuan teks, misalnya alamat atau puisi. hr menandai perpindahan topik. Keduanya bukan alat utama untuk mengatur jarak.

CONTOH · TULIS ULANG DENGAN IDEMU

<address>
  SMP Negeri 32 Depok<br>
  Kota Depok, Jawa Barat
</address>

<hr>
<h2>Agenda Berikutnya</h2>

Ingat: Jarak visual adalah tugas CSS. Gunakan br hanya ketika pindah baris memang bagian dari isi.

Tautan dan media

Tautan menghubungkan halaman, sedangkan gambar dan media membantu menjelaskan hal yang sulit disampaikan hanya dengan teks.

Bayangkan: Tautan seperti pintu. Alamat relatif adalah petunjuk menuju ruang lain di gedung yang sama; URL absolut adalah alamat lengkap menuju tempat di kota lain.

Anchor

a dan href

Isi elemen a harus menjelaskan tujuan tautan. href dapat menuju halaman lokal, bagian tertentu, email, atau situs lain.

CONTOH · TULIS ULANG DENGAN IDEMU

<a href="galeri.html">Buka galeri karya</a>
<a href="#jadwal">Lompat ke jadwal</a>
<a href="https://developer.mozilla.org/">Baca referensi MDN</a>

Ingat: Hindari teks “klik di sini”. “Buka galeri karya” tetap jelas walau dibaca tanpa kalimat di sekitarnya.

Gambar aksesibel

img, src, dan alt

src menunjuk lokasi gambar. alt menjelaskan informasi penting dari gambar jika gambar gagal tampil atau dibacakan oleh pembaca layar.

CONTOH · TULIS ULANG DENGAN IDEMU

<img
  src="images/tim-robotika.jpg"
  alt="Empat siswa menguji robot penyiram tanaman"
  width="640"
  height="420"
>

Ingat: Jika gambar hanya hiasan dan tidak membawa informasi, gunakan alt="" agar pembaca layar dapat melewatinya.

Gambar bercerita

figure dan figcaption

figure mengelompokkan media yang berdiri sebagai satu unit. figcaption memberi keterangan yang terlihat oleh semua pengunjung.

CONTOH · TULIS ULANG DENGAN IDEMU

<figure>
  <img src="prototype-lampu.jpg" alt="Prototype lampu otomatis di meja uji">
  <figcaption>Uji coba pertama lampu otomatis kelas 8.</figcaption>
</figure>

Ingat: alt menjelaskan gambar; figcaption memberi konteks atau cerita tambahan.

Audio & video

Media dengan kontrol pengguna

audio dan video dapat menampilkan kontrol bawaan browser. Sediakan teks cadangan dan pertimbangkan caption untuk video yang memiliki suara.

CONTOH · TULIS ULANG DENGAN IDEMU

<video controls width="640">
  <source src="demo-robot.mp4" type="video/mp4">
  Browsermu belum dapat memutar video ini.
</video>

Ingat: Hindari autoplay bersuara. Biarkan pengguna memilih kapan media diputar.

Daftar dan tabel data

Daftar cocok untuk kumpulan atau urutan. Tabel cocok untuk data yang perlu dibandingkan dalam baris dan kolom.

Bayangkan: Daftar belanja tidak memerlukan tabel. Jadwal piket memerlukan tabel karena nama, hari, dan tugas perlu dibandingkan.

List

ul, ol, dan li

Gunakan ul jika urutan tidak penting dan ol jika langkah atau urutan memang bermakna. Setiap item ditulis dengan li.

CONTOH · TULIS ULANG DENGAN IDEMU

<h3>Alat yang dibutuhkan</h3>
<ul>
  <li>Laptop</li>
  <li>Kabel USB</li>
  <li>Arduino</li>
</ul>

<h3>Langkah pengujian</h3>
<ol>
  <li>Sambungkan kabel</li>
  <li>Unggah program</li>
  <li>Amati lampu LED</li>
</ol>

Ingat: Jika menukar posisi item mengubah makna, gunakan ol.

Tabel

caption, tr, th, dan td

caption menjelaskan tujuan tabel. tr membuat baris, th menandai judul baris atau kolom, dan td berisi datanya.

CONTOH · TULIS ULANG DENGAN IDEMU

<table>
  <caption>Jadwal presentasi proyek</caption>
  <thead>
    <tr>
      <th scope="col">Hari</th>
      <th scope="col">Tim</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Senin</td>
      <td>Web Kreatif</td>
    </tr>
  </tbody>
</table>

Ingat: Jangan memakai tabel hanya untuk mengatur posisi layout. Gunakan CSS Grid atau Flexbox untuk tampilan.

Struktur semantik

Elemen semantik memberi nama pada peran setiap bagian halaman sehingga struktur lebih mudah dipahami manusia, browser, dan teknologi bantu.

Bayangkan: Gedung sekolah lebih mudah digunakan ketika ruangannya diberi papan “Perpustakaan”, “Laboratorium”, dan “Kantin”, bukan semuanya hanya bernama “Ruangan”.

Landmark

header, nav, main, dan footer

header berisi pengantar, nav memuat navigasi utama, main membungkus isi unik halaman, dan footer berisi informasi penutup. Biasanya satu halaman hanya memiliki satu main.

CONTOH · TULIS ULANG DENGAN IDEMU

<header>
  <h1>Portal Karya Siswa</h1>
  <nav aria-label="Navigasi utama">
    <a href="index.html">Beranda</a>
    <a href="galeri.html">Galeri</a>
  </nav>
</header>

<main>
  <h2>Karya Terbaru</h2>
</main>

<footer>Dibuat oleh Digital Creative</footer>

Ingat: Elemen semantik mengurangi ketergantungan pada div yang tidak menjelaskan fungsi isinya.

Pengelompokan isi

section, article, dan aside

section mengelompokkan topik, article cocok untuk konten yang dapat berdiri sendiri, dan aside memuat informasi tambahan yang berkaitan.

CONTOH · TULIS ULANG DENGAN IDEMU

<section aria-labelledby="karya-terbaru">
  <h2 id="karya-terbaru">Karya Terbaru</h2>

  <article>
    <h3>Game Tebak Angka</h3>
    <p>Dibuat dengan HTML dan JavaScript.</p>
  </article>

  <aside>Tip: coba mainkan dengan teman sebangku.</aside>
</section>

Ingat: Sebuah section biasanya memiliki heading yang menjelaskan topiknya.

Form dan input pengguna

Form mengumpulkan data dari pengguna. HTML membangun tampilan dan validasi dasar; server tetap diperlukan untuk menerima serta menyimpan data dengan aman.

Bayangkan: Form seperti meja pendaftaran. label adalah pertanyaan petugas, input adalah kotak jawaban, dan tombol submit menyerahkan formulir.

Input berlabel

form, label, input, dan name

Hubungkan label dengan input menggunakan for dan id yang sama. name menjadi nama data saat form dikirim.

CONTOH · TULIS ULANG DENGAN IDEMU

<form action="/daftar-karya" method="post">
  <label for="nama-karya">Nama karya</label>
  <input
    id="nama-karya"
    name="nama_karya"
    type="text"
    required
  >

  <button type="submit">Daftarkan karya</button>
</form>

Ingat: Placeholder bukan pengganti label karena teksnya hilang saat pengguna mulai mengetik.

Tipe input

Pilih kontrol yang sesuai

type membantu browser menampilkan kontrol yang tepat. Gunakan email untuk alamat email, number untuk angka, date untuk tanggal, dan checkbox untuk pilihan ya/tidak.

CONTOH · TULIS ULANG DENGAN IDEMU

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

<label for="tanggal">Tanggal presentasi</label>
<input id="tanggal" name="tanggal" type="date">

<label>
  <input name="izin_tampil" type="checkbox">
  Karya boleh ditampilkan di galeri
</label>

Ingat: required membantu pengguna, tetapi server tetap harus memeriksa ulang semua data.

Isian panjang & pilihan

textarea dan select

textarea cocok untuk jawaban beberapa baris. select cocok jika pengguna harus memilih satu dari daftar pilihan yang sudah ditentukan.

CONTOH · TULIS ULANG DENGAN IDEMU

<label for="deskripsi">Deskripsi karya</label>
<textarea id="deskripsi" name="deskripsi" rows="4"></textarea>

<label for="kategori">Kategori</label>
<select id="kategori" name="kategori">
  <option value="web">Website</option>
  <option value="robot">Robotika</option>
  <option value="desain">Desain digital</option>
</select>

Ingat: Tulis pilihan dengan bahasa yang langsung dipahami pengguna.

Aksesibilitas dan kebiasaan baik

HTML yang baik dapat dipahami lebih banyak orang, termasuk pengguna keyboard, pembaca layar, koneksi lambat, atau gambar yang gagal dimuat.

Bayangkan: Aksesibilitas seperti menyediakan tangga sekaligus jalur landai: tujuannya sama, tetapi lebih banyak orang dapat mencapainya.

Makna sebelum gaya

Pilih elemen berdasarkan fungsi

Gunakan button untuk aksi dan a untuk berpindah tempat. Gunakan heading untuk judul, bukan paragraf yang hanya diperbesar.

CONTOH · TULIS ULANG DENGAN IDEMU

<!-- Berpindah ke halaman lain -->
<a href="profil.html">Lihat profil tim</a>

<!-- Melakukan aksi pada halaman -->
<button type="button">Tampilkan detail</button>

Ingat: Tanyakan: “Elemen ini melakukan apa?” Jawabannya membantu memilih tag yang benar.

id dan class

Identitas unik dan kelompok

id harus unik dalam satu halaman dan tidak mengandung spasi. class dapat dipakai oleh banyak elemen yang memiliki kelompok atau gaya serupa.

CONTOH · TULIS ULANG DENGAN IDEMU

<section id="karya-unggulan">
  <article class="kartu-karya">...</article>
  <article class="kartu-karya">...</article>
</section>

Ingat: id seperti NIS yang unik; class seperti nama kelas yang dipakai banyak siswa.

Checklist

Sebelum halaman dianggap selesai

Periksa bahasa dokumen, title, hierarki heading, alt gambar, label form, teks tautan, serta struktur tag pembuka dan penutup.

CONTOH · TULIS ULANG DENGAN IDEMU

□ Ada lang="id" pada elemen html
□ Setiap halaman memiliki title yang jelas
□ Heading tersusun seperti daftar isi
□ Gambar informatif memiliki alt
□ Setiap input memiliki label
□ Tautan menjelaskan tujuannya
□ Tidak memakai tabel atau br untuk layout

Ingat: Validasi kode membantu menemukan typo, tetapi tetap uji halaman dengan keyboard dan lihat hasilnya di layar kecil.

Karakter khusus dan whitespace

Beberapa karakter mempunyai tugas khusus dalam HTML. Entity membuat karakter itu tampil sebagai teks biasa.

Bayangkan: Seperti memakai tanda kutip saat menyebut sebuah perintah: kita ingin menunjukkan tulisannya, bukan menjalankan perintahnya.

HTML entity

Menampilkan <, >, dan & dengan aman

Tanda kurang dari biasanya memulai tag. Gunakan < untuk <, > untuk >, dan & untuk & agar browser tidak salah menafsirkannya.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Tag judul ditulis sebagai <code>&lt;h1&gt;</code>.</p>
<p>Tim A &amp; Tim B belajar bersama.</p>

Ingat: Gunakan entity hanya ketika karakternya dapat disangka sebagai bagian dari sintaks HTML.

Jarak teks

Mengapa banyak spasi terlihat menjadi satu

Pada teks biasa, browser merapikan deretan spasi dan baris kosong menjadi satu jarak. Elemen pre mempertahankan susunan asli.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Tiga     spasi tetap terlihat satu.</p>
<pre>Baris dan
  jarak ini dipertahankan.</pre>

Ingat: Jangan membuat tata letak dengan banyak spasi; gunakan CSS saat mempelajari tampilan.

Alamat file dan identitas halaman

Path memberi tahu browser lokasi halaman atau aset. Metadata memberi tahu identitas halaman sebelum isinya dibaca.

Bayangkan: Path seperti petunjuk ruang di sekolah, sedangkan metadata seperti label di depan pintu.

Path relatif

Berangkat dari lokasi file saat ini

Nama file menunjuk lokasi yang sejajar, folder/ masuk satu tingkat, dan ../ kembali ke folder induk.

CONTOH · TULIS ULANG DENGAN IDEMU

<a href="jadwal.html">Jadwal</a>
<a href="galeri/foto.html">Galeri</a>
<a href="../index.html">Beranda utama</a>

Ingat: Path relatif mudah dipindahkan karena tidak terikat nama domain tertentu.

Path aset

Menata gambar dalam subfolder

Pisahkan aset ke folder agar proyek tidak berantakan, lalu tulis alamat dari dokumen menuju aset tersebut.

CONTOH · TULIS ULANG DENGAN IDEMU

<img src="assets/images/robot.jpg"
     alt="Robot penyiram tanaman karya siswa">

Ingat: Perhatikan huruf besar-kecil pada nama file karena server dapat menganggapnya berbeda.

Description

Ringkasan halaman untuk mesin pencari

Meta description merangkum tujuan halaman. Isinya singkat, spesifik, dan tidak tampil sebagai paragraf di halaman.

CONTOH · TULIS ULANG DENGAN IDEMU

<meta name="description"
      content="Galeri karya coding dan robotika siswa SMPN 32 Depok.">

Ingat: Bayangkan description sebagai satu kalimat ajakan di belakang buku.

Favicon

Ikon kecil pada tab browser

Favicon membantu pengguna mengenali halaman ketika banyak tab terbuka.

CONTOH · TULIS ULANG DENGAN IDEMU

<link rel="icon" href="assets/icon-codeplay.png">

Ingat: Gunakan path yang benar dan gambar kecil berbentuk persegi.

Wadah generik dan refactor semantik

Div dan span tetap berguna, tetapi keduanya tidak menjelaskan peran isi kepada browser.

Bayangkan: Kotak tanpa label tetap dapat menyimpan barang, tetapi kotak bertuliskan Buku atau Alat membuat isinya lebih cepat ditemukan.

Div

Wadah blok tanpa makna khusus

Gunakan div ketika tidak ada elemen semantik yang cocok, biasanya sebagai pembungkus untuk tata letak atau gaya.

CONTOH · TULIS ULANG DENGAN IDEMU

<div class="kumpulan-kartu">
  <article>...</article>
  <article>...</article>
</div>

Ingat: Sebelum memilih div, tanyakan apakah header, nav, main, section, article, aside, atau footer lebih tepat.

Span

Wadah kecil di dalam teks

Span membungkus potongan pendek tanpa memulai baris baru dan tanpa memberi makna khusus.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Status karya: <span class="status">baru</span></p>

Ingat: Jika potongannya penting atau ditekankan, strong atau em mungkin lebih bermakna daripada span.

Media responsif dan embed

Media sebaiknya menyesuaikan perangkat dan tidak mengambil sumber daya sebelum dibutuhkan.

Bayangkan: Seperti mengirim foto tugas: layar kecil cukup menerima versi ringan, layar besar boleh menerima versi lebih tajam.

Picture

Pilihan gambar untuk kondisi berbeda

Picture membungkus satu atau beberapa source serta img sebagai fallback yang selalu tersedia.

CONTOH · TULIS ULANG DENGAN IDEMU

<picture>
  <source media="(max-width: 600px)" srcset="robot-kecil.jpg">
  <img src="robot-besar.jpg" alt="Robot karya siswa">
</picture>

Ingat: Img tetap wajib sebagai fallback dan tempat menulis alt.

Srcset dan sizes

Membantu browser memilih ukuran

Srcset menawarkan beberapa ukuran, sedangkan sizes memberi perkiraan ruang yang akan dipakai gambar.

CONTOH · TULIS ULANG DENGAN IDEMU

<img src="poster-800.jpg"
     srcset="poster-400.jpg 400w, poster-800.jpg 800w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Poster pameran digital">

Ingat: Browser yang memilih file; kita hanya menyediakan pilihan dan petunjuk.

Iframe

Menyematkan halaman lain

Iframe memuat dokumen lain di dalam halaman. Berikan title agar tujuan embed dikenali pembaca layar.

CONTOH · TULIS ULANG DENGAN IDEMU

<iframe src="https://example.org/peta"
        title="Peta lokasi pameran"
        loading="lazy"></iframe>

Ingat: Sediakan juga tautan biasa jika embed tidak dapat dibuka.

Sandbox

Membatasi kemampuan halaman embed

Atribut sandbox menonaktifkan banyak kemampuan iframe. Tambahkan izin hanya jika benar-benar diperlukan.

CONTOH · TULIS ULANG DENGAN IDEMU

<iframe src="https://example.org/demo"
        title="Demo karya"
        loading="lazy"
        sandbox></iframe>

Ingat: Sandbox kosong adalah titik awal paling ketat dan aman untuk latihan.

Tabel dan kelompok form lanjutan

Struktur yang konsisten membuat data dan pertanyaan lebih mudah diikuti.

Bayangkan: Tabel seperti lemari berkotak tetap; fieldset seperti satu lembar soal dengan beberapa pilihan jawaban.

Scope

Menjelaskan arah header tabel

Scope col menandai header kolom dan scope row menandai header baris.

CONTOH · TULIS ULANG DENGAN IDEMU

<tr>
  <th scope="col">Kelas</th>
  <th scope="col">Poin</th>
</tr>

Ingat: Header yang jelas membantu pembaca layar menyebut konteks setiap sel.

Colspan

Satu sel merangkum beberapa kolom

Colspan menentukan berapa kolom yang ditempati satu sel. Nilainya harus sesuai struktur tabel.

CONTOH · TULIS ULANG DENGAN IDEMU

<tfoot>
  <tr><td colspan="3">Data diperbarui setiap Jumat</td></tr>
</tfoot>

Ingat: Jangan memakai colspan untuk memperbaiki tabel yang jumlah selnya tidak konsisten.

Fieldset

Mengelompokkan kontrol terkait

Fieldset membungkus satu kelompok pertanyaan dan legend menjadi judul kelompoknya.

CONTOH · TULIS ULANG DENGAN IDEMU

<fieldset>
  <legend>Pilih bidang favorit</legend>
  <!-- pilihan radio berada di sini -->
</fieldset>

Ingat: Legend sebaiknya berupa pertanyaan yang dapat dipahami tanpa membaca bagian lain.

Radio group

Satu pilihan dari beberapa jawaban

Radio dengan name yang sama membentuk satu kelompok. Setiap pilihan tetap membutuhkan value dan label.

CONTOH · TULIS ULANG DENGAN IDEMU

<label><input type="radio" name="bidang" value="web"> Web</label>
<label><input type="radio" name="bidang" value="robot"> Robotika</label>

Ingat: Gunakan checkbox jika beberapa pilihan boleh dipilih sekaligus.

Validasi bawaan browser

Atribut HTML dapat membantu pengguna mengisi data dengan format yang benar sebelum dikirim.

Bayangkan: Seperti petunjuk pada lembar ujian: pengguna tahu apa yang wajib, berapa panjang jawaban, dan bentuk jawaban yang diterima.

Required dan panjang

Wajib isi serta batas karakter

Required mencegah nilai kosong. Minlength dan maxlength memberi batas panjang teks.

CONTOH · TULIS ULANG DENGAN IDEMU

<label for="nama">Nama tim</label>
<input id="nama" name="nama" required minlength="3" maxlength="40">

Ingat: Batas harus masuk akal; jangan membuat pengguna kesulitan menulis nama sebenarnya.

Autocomplete

Membantu mengisi data yang umum

Autocomplete memberi petunjuk jenis data kepada browser sehingga pengguna dapat mengisi lebih cepat.

CONTOH · TULIS ULANG DENGAN IDEMU

<input type="text" name="nama" autocomplete="name">
<input type="email" name="email" autocomplete="email">

Ingat: Nilai autocomplete mengikuti arti data, bukan nama tampilan input.

Pattern

Pola teks khusus

Pattern dapat memeriksa bentuk sederhana. Berikan title atau deskripsi agar pengguna tahu format yang diharapkan.

CONTOH · TULIS ULANG DENGAN IDEMU

<label for="kode">Kode tim</label>
<input id="kode" name="kode" pattern="[A-Z]{2}-[0-9]{2}"
       title="Contoh: DC-32" required>

Ingat: Pattern bukan pengganti pemeriksaan di server karena source HTML dapat diubah pengguna.

Elemen HTML native untuk konten kaya

Banyak kebutuhan umum sudah memiliki elemen HTML yang ringan dan bermakna.

Bayangkan: Gunakan alat yang memang dibuat untuk pekerjaannya: obeng lebih tepat untuk sekrup daripada memaksa penggaris.

Details dan summary

Bagian yang dapat dibuka dan ditutup

Details membuat panel informasi, sedangkan summary menjadi tombol judulnya. Interaksi dasar bekerja tanpa JavaScript.

CONTOH · TULIS ULANG DENGAN IDEMU

<details>
  <summary>Kapan pameran dibuka?</summary>
  <p>Pameran dibuka Jumat pukul 13.00.</p>
</details>

Ingat: Summary harus tetap menjelaskan isi ketika panel masih tertutup.

Time dan progress

Waktu serta kemajuan yang terbaca mesin

Datetime menyimpan bentuk waktu yang konsisten. Progress menunjukkan nilai kemajuan terhadap batas maksimum.

CONTOH · TULIS ULANG DENGAN IDEMU

<time datetime="2026-09-18T13:00">Jumat, 13.00</time>
<progress value="7" max="10">70%</progress>

Ingat: Teks time boleh ramah manusia, sementara datetime dibuat terstruktur untuk mesin.

Kutipan

Blockquote dan cite

Blockquote menandai kutipan panjang dari sumber lain. Cite menyebut judul karya atau sumbernya.

CONTOH · TULIS ULANG DENGAN IDEMU

<blockquote cite="https://example.org/wawancara">
  Belajar terbaik terjadi ketika kita berani mencoba.
</blockquote>
<p>Sumber: <cite>Wawancara Tim Robotika</cite></p>

Ingat: Jangan memakai blockquote hanya untuk membuat teks menjorok.

Kode

Code untuk sintaks, pre untuk susunan

Code menandai teks sebagai kode. Pre mempertahankan baris dan spasi, sehingga cocok membungkus blok kode.

CONTOH · TULIS ULANG DENGAN IDEMU

<p>Gunakan elemen <code>&lt;main&gt;</code>.</p>
<pre><code>&lt;h1&gt;Halo&lt;/h1&gt;</code></pre>

Ingat: Tetap ubah tanda < dan > menjadi entity ketika contoh tag ditampilkan sebagai teks.

Debugging dan validasi HTML

Browser sering berusaha memperbaiki kode rusak, sehingga halaman dapat terlihat normal walaupun strukturnya salah.

Bayangkan: Seperti teman yang menebak tulisan tangan: hasilnya mungkin benar, tetapi bisa juga salah memahami maksud kita.

Urutan penutup

Tutup elemen dari yang paling dalam

Elemen yang dibuka terakhir harus ditutup lebih dahulu agar hubungan parent dan child tidak silang.

CONTOH · TULIS ULANG DENGAN IDEMU

<!-- Salah: <p><strong>Penting</p></strong> -->
<p><strong>Penting</strong></p>

Ingat: Bayangkan menumpuk kotak: kotak teratas harus diangkat lebih dahulu.

Cari dari awal

Perbaiki pesan pertama lebih dahulu

Satu tag yang hilang dapat menyebabkan banyak kesalahan berikutnya. Mulailah dari lokasi masalah paling awal.

CONTOH · TULIS ULANG DENGAN IDEMU

1. Baca pesan dan nomor baris pertama
2. Periksa tag pembuka dan penutup di sekitarnya
3. Perbaiki satu masalah
4. Periksa ulang

Ingat: Jangan sekaligus mengubah banyak bagian karena penyebab masalah menjadi sulit dilacak.

Audit akhir

Valid tidak selalu berarti berkualitas

Setelah sintaks valid, periksa makna elemen, heading, ID unik, alt gambar, label form, dan isi yang cukup.

CONTOH · TULIS ULANG DENGAN IDEMU

□ Tag berpasangan dan tersusun benar
□ Tepat satu h1 dan tidak melompati heading
□ Semua id unik
□ Media dan form memiliki alternatif teks
□ Isi bukan sekadar elemen kosong

Ingat: Validator menemukan pola teknis; manusia tetap menilai apakah isi benar-benar jelas dan berguna.

Audit aksesibilitas lanjutan

Aksesibilitas muncul dari hubungan yang benar antar-elemen, bukan dari satu atribut ajaib.

Bayangkan: Sebuah sekolah ramah akses membutuhkan papan petunjuk, jalur yang jelas, pintu yang dapat dibuka, dan informasi yang dapat dipahami.

Heading

Hierarki seperti daftar isi

Gunakan satu h1 untuk topik utama dan turunkan tingkat heading satu langkah ketika memasuki subbagian.

CONTOH · TULIS ULANG DENGAN IDEMU

<h1>Pameran Digital</h1>
<h2>Karya Robotika</h2>
<h3>Robot Penyiram</h3>

Ingat: Jangan memilih h3 hanya karena ukurannya terlihat cocok.

Aksi keyboard

Gunakan button untuk tindakan

Button sudah dapat difokuskan dan ditekan dengan keyboard. Div dengan onclick tidak otomatis memiliki perilaku tersebut.

CONTOH · TULIS ULANG DENGAN IDEMU

<button type="button">Buka detail karya</button>

Ingat: Elemen native biasanya membawa lebih banyak aksesibilitas tanpa kode tambahan.

Alt kontekstual

Jelaskan fungsi gambar, bukan nama file

Alt gambar informatif menjelaskan informasi penting. Gambar dekoratif menggunakan alt kosong agar tidak mengganggu.

CONTOH · TULIS ULANG DENGAN IDEMU

<img src="grafik.png" alt="Jumlah peserta naik dari 20 menjadi 35">
<img src="hiasan.svg" alt="">

Ingat: Bayangkan gambarnya gagal tampil; tulis informasi yang masih perlu diketahui pembaca.

Hubungan elemen

ID unik, label, dan tujuan navigasi

ID menjadi alamat satu elemen. Label dan tautan internal bergantung pada alamat itu, sehingga duplikat dapat membuat tujuan membingungkan.

CONTOH · TULIS ULANG DENGAN IDEMU

<label for="nama-karya">Nama karya</label>
<input id="nama-karya" name="nama_karya">
<a href="#karya">Lihat karya</a>
<section id="karya">...</section>

Ingat: Jika satu nama perlu dipakai berulang, gunakan class, bukan id.

Referensi tag cepat

Gunakan bagian ini seperti indeks buku ketika lupa nama tag. Kembali ke penjelasan di atas jika belum memahami fungsinya.

Kerangka

<!DOCTYPE html>: Mode HTML modern
<html>: Akar dokumen
<head>: Informasi untuk browser
<title>: Judul tab
<body>: Isi yang terlihat

Teks

<h1>–<h6>: Hierarki judul
<p>: Paragraf
<strong>: Informasi penting
<em>: Penekanan
<br>: Pindah baris bermakna

Navigasi & media

<a>: Tautan
<img>: Gambar
<figure>: Media mandiri
<figcaption>: Keterangan media
<video>: Pemutar video

Struktur

<header>: Pengantar bagian
<nav>: Navigasi
<main>: Isi utama
<section>: Kelompok bertopik
<article>: Konten mandiri
<footer>: Informasi penutup

Data & form

<ul>/<ol>/<li>: Daftar
<table>: Data tabular
<form>: Wadah isian
<label>: Nama kontrol
<input>: Isian singkat
<button>: Tombol aksi

Dokumen lanjut

<meta>: Metadata halaman
<link>: Hubungan aset
<picture>/<source>: Gambar responsif
<iframe>: Dokumen sematan
<div>/<span>: Wadah generik

Interaksi native

<details>/<summary>: Panel buka-tutup
<time>: Waktu terstruktur
<progress>: Nilai kemajuan
<fieldset>/<legend>: Kelompok form

Kutipan & kode

<blockquote>: Kutipan panjang
<cite>: Judul sumber
<code>: Potongan kode
<pre>: Susunan teks tetap

Mini-project: Pameran Digital

Contoh ini menyatukan kerangka, semantik, navigasi, gambar, dan form. Bacalah strukturnya, lalu buat versi berbeda—misalnya galeri kelas, profil ekskul, atau katalog hobi.

MINI-PROJECT · INDEX.HTMLPAHAMI, JANGAN SEKADAR SALIN

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pameran Digital Kelas 8</title>
</head>
<body>
  <header>
    <h1>Pameran Digital Kelas 8</h1>
    <nav aria-label="Navigasi utama">
      <a href="#karya">Karya</a>
      <a href="#daftar">Daftar Tampil</a>
    </nav>
  </header>

  <main>
    <section id="karya" aria-labelledby="judul-karya">
      <h2 id="judul-karya">Karya Pilihan</h2>

      <article>
        <h3>Robot Penyiram Tanaman</h3>
        <figure>
          <img src="robot.jpg" alt="Robot kecil berada di samping pot tanaman">
          <figcaption>Prototype buatan tim robotika.</figcaption>
        </figure>
        <p>Sensor membaca tanah dan menyalakan pompa saat dibutuhkan.</p>
      </article>
    </section>

    <section id="daftar" aria-labelledby="judul-daftar">
      <h2 id="judul-daftar">Daftarkan Karyamu</h2>
      <form action="/kirim-karya" method="post">
        <label for="nama">Nama karya</label>
        <input id="nama" name="nama" type="text" required>

        <label for="kategori">Kategori</label>
        <select id="kategori" name="kategori">
          <option value="web">Website</option>
          <option value="robot">Robotika</option>
        </select>

        <button type="submit">Kirim karya</button>
      </form>
    </section>
  </main>

  <footer>
    <p>Dibuat bersama Digital Creative SMP Negeri 32 Depok.</p>
  </footer>
</body>
</html>

Tantangan modifikasi: ganti tema proyek, tambah satu article baru, ubah pilihan kategori, lalu pastikan setiap gambar memiliki alt yang sesuai dengan gambarmu.

SUMBER BELAJAR LANJUTAN

Periksa referensi resminya

Materi CodePlay ini ditulis ulang secara orisinal setelah membandingkan pola cheatsheet, dokumentasi, dan tutorial berikut. Gunakan sumber aslinya untuk pembahasan yang lebih luas.

MDN HTML ↗Codecademy ↗W3Schools ↗