Contekan · 15 lembar · 508 baris
Rumus, pintasan, dan perintah yang paling sering dipakai
Tiap baris menaut ke pelajaran yang melatihnya. Buka satu lembar untuk mencetaknya dan menempelnya di samping layar.
38 baris · “Latih” membuka latihannya
Kerangka dokumen
<!DOCTYPE html>Baris pertama dokumen; tanpanya peramban memakai mode warisan saat menghitung tata letak.
Latih: Kerangka dokumen dan bagian head<html lang="id">Membungkus seluruh dokumen; atribut lang memberi tahu pembaca layar bahasa yang diucapkan.
Latih: Kerangka dokumen dan bagian head<meta charset="utf-8">Pengodean karakter, ditulis tepat setelah head dibuka dan sebelum title.
Latih: Kerangka dokumen dan bagian head<meta name="viewport" content="width=device-width, initial-scale=1">Mengatur lebar awal halaman di layar ponsel.
Latih: Kerangka dokumen dan bagian head<title>Nama halaman di tab peramban, bookmark, dan hasil mesin pencari; tidak tampil di badan halaman.
Latih: Kerangka dokumen dan bagian headWilayah halaman
<header>Pembuka halaman atau pembuka satu bagian, berisi judul dan identitas.
Latih: Elemen semantik: header, nav, main, footer<nav>Kumpulan tautan navigasi, ditulis sebagai daftar ul; bila ada dua nav, bedakan dengan aria-label.<nav aria-label="Menu utama">
Latih: Elemen semantik: header, nav, main, footer<main>Isi pokok halaman, satu per halaman, tanpa menu dan hak cipta yang berulang.
Latih: Elemen semantik: header, nav, main, footer<section>Satu bagian bertema yang punya judul sendiri; bagian tanpa judul cukup dibungkus div.
Latih: Elemen semantik: header, nav, main, footer<article>Satuan isi yang tetap masuk akal bila dipindahkan keluar halaman, misalnya satu berita.
Latih: Elemen semantik: header, nav, main, footer<footer>Keterangan penutup seperti alamat dan tahun; boleh muncul juga di akhir satu article.
Latih: Elemen semantik: header, nav, main, footerTeks
<h1> … <h6>Judul bertingkat menurut kedudukan, bukan ukuran huruf: satu h1, tingkatnya tidak dilompati.
Latih: Heading dan paragraf<ul>, <ol>, <li>Daftar berbutir untuk butir setara, bernomor untuk langkah berurutan; daftar bersarang ditulis di dalam li induknya.
Latih: Subjudul, daftar, dan penekanan teks<strong> dan <em>strong menandai kepentingan, em menandai penekanan pengucapan; b dan i hanya menebalkan dan memiringkan tanpa makna.
Latih: Subjudul, daftar, dan penekanan teksTautan dan gambar
<a href="…">Absolut memuat skema (https://…); relatif: berkas.html di folder yang sama, ../ naik satu folder, / dihitung dari akar situs.
Latih: Tautan absolut, relatif, dan ke bagian halaman<a href="#kontak">Menuju elemen ber-id kontak di halaman yang sama; id tujuannya harus sama persis.
Latih: Tautan absolut, relatif, dan ke bagian halamanhref="mailto:…" · href="tel:+62…"Membuka surel atau aplikasi telepon; nomor ditulis +62 tanpa nol di depan dan tanpa spasi.<a href="tel:+6281234567890">Telepon kantor koperasi</a>
Latih: Tautan absolut, relatif, dan ke bagian halaman<img src="…" alt="…" width="…" height="…">Gambar tanpa tag penutup; width dan height menyiapkan ruang supaya teks tidak melompat saat gambar dimuat.
Latih: Gambar dan teks alternatifalt="…" dan alt=""Alt menyampaikan fungsi gambar, bukan nama berkasnya; gambar hiasan diberi alt kosong, atributnya tidak dihapus.
Latih: Teks alternatif: informatif dan dekoratif<figure> dan <figcaption>Mengikat keterangan yang terlihat pada gambarnya; figcaption tidak menggantikan alt.
Latih: Gambar dan teks alternatifTabel
<table>, <tr>, <td>table membungkus tabel, tr satu baris, td satu sel data.
Latih: Tabel data: baris, kolom, dan judul kolom<th scope="col"> · <th scope="row">Sel judul kolom atau baris; pembaca layar menyebut namanya setiap kali berpindah sel.
Latih: Tabel data: baris, kolom, dan judul kolom<caption>Judul tabel yang ikut terbaca, ditulis sebagai anak pertama table.
Latih: Tabel data: baris, kolom, dan judul kolom<thead> dan <tbody>Memisahkan baris judul dari baris data.
Latih: Tabel data: baris, kolom, dan judul kolomFormulir
<form action="/daftar" method="post">Membungkus semua isian; get untuk pencarian, post untuk data yang mengubah sesuatu di server.
Latih: Formulir dasar: label, input, dan tombol<label for="nama">Nilai for sama persis dengan id input, bukan dengan name; teks label lalu bisa diklik dan dibacakan.
Latih: Formulir dasar: label, input, dan tombol<input type="email" id="surel" name="surel">type memilih jenis isian (text, email, number, date, tel); input tanpa name tidak ikut terkirim.
Latih: Formulir dasar: label, input, dan tombolrequired · placeholderrequired menolak kiriman selama isian kosong; placeholder hanya contoh bentuk isian, bukan pengganti label.
Latih: Formulir dasar: label, input, dan tombol<button type="submit">Tombol pengirim formulir dengan type ditulis eksplisit.
Latih: Formulir dasar: label, input, dan tombol<fieldset> dan <legend>Mengelompokkan tombol radio atau kotak centang; legend adalah pertanyaan grupnya.
Latih: Formulir berkelompok dan tabel dataautocomplete="email"Nilai baku seperti name, email, tel, dan postal-code untuk data tentang pengguna sendiri.
Latih: Formulir berkelompok dan tabel dataAtribut aksesibilitas
lang="en" pada satu bagianMenandai kutipan berbahasa lain supaya dibacakan dengan lafal bahasanya.<p lang="en">Reading is to the mind what exercise is to the body.</p>
Latih: HTML semantik, landmark, dan bahasa halamantabindex="0" · tabindex="-1"0 memasukkan elemen ke urutan Tab, −1 hanya bisa difokus lewat skrip. Nilai positif didahulukan sebelum semua elemen lain, jadi MDN meminta hanya 0 dan −1.
Latih: Navigasi papan ketik dan fokus<a href="#isi-utama">Langsung ke isi utama</a>Tautan lewati: elemen pertama di body yang menaut ke id elemen main.
Latih: Navigasi papan ketik dan fokusaria-label · aria-labelledbyMemberi nama aksesibel; aria-labelledby menunjuk id teks yang terlihat dan mengalahkan aria-label.<section aria-labelledby="judul-promo">
Latih: ARIA: aturan pemakaian, nama, dan wilayah langsungaria-live="polite"Pesan status diumumkan tanpa memindah fokus; dipasang pada elemen kosong yang sudah ada sebelum pesannya ditulis.
Latih: ARIA: aturan pemakaian, nama, dan wilayah langsung<track kind="captions">Takarir di dalam video; tanpa kind, berkasnya diperlakukan sebagai subtitle.<track kind="captions" srclang="id" label="Indonesia" src="video.vtt">
Latih: Media: takarir, transkrip, dan deskripsi audio