Daftar Tag HTML: Struktur, Teks, Tabel, dan Formulir

Kerangka dokumen

• <!DOCTYPE html>Latih: Kerangka dokumen dan bagian head

  Baris pertama dokumen; tanpanya peramban memakai mode warisan saat menghitung tata letak.

• <html lang="id">Latih: Kerangka dokumen dan bagian head

  Membungkus seluruh dokumen; atribut lang memberi tahu pembaca layar bahasa yang diucapkan.

• <meta charset="utf-8">Latih: Kerangka dokumen dan bagian head

  Pengodean karakter, ditulis tepat setelah head dibuka dan sebelum title.

• <meta name="viewport" content="width=device-width, initial-scale=1">Latih: Kerangka dokumen dan bagian head

  Mengatur lebar awal halaman di layar ponsel.

• <title>Latih: Kerangka dokumen dan bagian head

  Nama halaman di tab peramban, bookmark, dan hasil mesin pencari; tidak tampil di badan halaman.

Wilayah halaman

Pembaca layar menyajikan elemen ini sebagai landmark yang bisa dilompati langsung. Nama kelas pada div tidak dibaca.

• <header>Latih: Elemen semantik: header, nav, main, footer

  Pembuka halaman atau pembuka satu bagian, berisi judul dan identitas.

• <nav>Latih: Elemen semantik: header, nav, main, footer

  Kumpulan tautan navigasi, ditulis sebagai daftar ul; bila ada dua nav, bedakan dengan aria-label.

  <nav aria-label="Menu utama">

• <main>Latih: Elemen semantik: header, nav, main, footer

  Isi pokok halaman, satu per halaman, tanpa menu dan hak cipta yang berulang.

• <section>Latih: Elemen semantik: header, nav, main, footer

  Satu bagian bertema yang punya judul sendiri; bagian tanpa judul cukup dibungkus div.

• <article>Latih: Elemen semantik: header, nav, main, footer

  Satuan isi yang tetap masuk akal bila dipindahkan keluar halaman, misalnya satu berita.

• <footer>Latih: Elemen semantik: header, nav, main, footer

  Keterangan penutup seperti alamat dan tahun; boleh muncul juga di akhir satu article.

Teks

• <h1> … <h6>Latih: Heading dan paragraf

  Judul bertingkat menurut kedudukan, bukan ukuran huruf: satu h1, tingkatnya tidak dilompati.

• <p>Latih: Heading dan paragraf

  Satu paragraf; baris kosong di kode tidak membuat jarak di halaman.

• <ul>, <ol>, <li>Latih: Subjudul, daftar, dan penekanan teks

  Daftar berbutir untuk butir setara, bernomor untuk langkah berurutan; daftar bersarang ditulis di dalam li induknya.

• <strong> dan <em>Latih: Subjudul, daftar, dan penekanan teks

  strong menandai kepentingan, em menandai penekanan pengucapan; b dan i hanya menebalkan dan memiringkan tanpa makna.

Tautan dan gambar

• <a href="…">Latih: Tautan absolut, relatif, dan ke bagian halaman

  Absolut memuat skema (https://…); relatif: berkas.html di folder yang sama, ../ naik satu folder, / dihitung dari akar situs.

• <a href="#kontak">Latih: Tautan absolut, relatif, dan ke bagian halaman

  Menuju elemen ber-id kontak di halaman yang sama; id tujuannya harus sama persis.

• href="mailto:…" · href="tel:+62…"Latih: Tautan absolut, relatif, dan ke bagian halaman

  Membuka surel atau aplikasi telepon; nomor ditulis +62 tanpa nol di depan dan tanpa spasi.

  <a href="tel:+6281234567890">Telepon kantor koperasi</a>

• <img src="…" alt="…" width="…" height="…">Latih: Gambar dan teks alternatif

  Gambar tanpa tag penutup; width dan height menyiapkan ruang supaya teks tidak melompat saat gambar dimuat.

• alt="…" dan alt=""Latih: Teks alternatif: informatif dan dekoratif

  Alt menyampaikan fungsi gambar, bukan nama berkasnya; gambar hiasan diberi alt kosong, atributnya tidak dihapus.

• <figure> dan <figcaption>Latih: Gambar dan teks alternatif

  Mengikat keterangan yang terlihat pada gambarnya; figcaption tidak menggantikan alt.

Tabel

Tabel hanya untuk data berbaris dan berkolom; penataan letak dikerjakan CSS.

• <table>, <tr>, <td>Latih: Tabel data: baris, kolom, dan judul kolom

  table membungkus tabel, tr satu baris, td satu sel data.

• <th scope="col"> · <th scope="row">Latih: Tabel data: baris, kolom, dan judul kolom

  Sel judul kolom atau baris; pembaca layar menyebut namanya setiap kali berpindah sel.

• <caption>Latih: Tabel data: baris, kolom, dan judul kolom

  Judul tabel yang ikut terbaca, ditulis sebagai anak pertama table.

• <thead> dan <tbody>Latih: Tabel data: baris, kolom, dan judul kolom

  Memisahkan baris judul dari baris data.

Formulir

• <form action="/daftar" method="post">Latih: Formulir dasar: label, input, dan tombol

  Membungkus semua isian; get untuk pencarian, post untuk data yang mengubah sesuatu di server.

• <label for="nama">Latih: Formulir dasar: label, input, dan tombol

  Nilai for sama persis dengan id input, bukan dengan name; teks label lalu bisa diklik dan dibacakan.

• <input type="email" id="surel" name="surel">Latih: Formulir dasar: label, input, dan tombol

  type memilih jenis isian (text, email, number, date, tel); input tanpa name tidak ikut terkirim.

• required · placeholderLatih: Formulir dasar: label, input, dan tombol

  required menolak kiriman selama isian kosong; placeholder hanya contoh bentuk isian, bukan pengganti label.

• <button type="submit">Latih: Formulir dasar: label, input, dan tombol

  Tombol pengirim formulir dengan type ditulis eksplisit.

• <fieldset> dan <legend>Latih: Formulir berkelompok dan tabel data

  Mengelompokkan tombol radio atau kotak centang; legend adalah pertanyaan grupnya.

• autocomplete="email"Latih: Formulir berkelompok dan tabel data

  Nilai baku seperti name, email, tel, dan postal-code untuk data tentang pengguna sendiri.

Atribut aksesibilitas

• lang="en" pada satu bagianLatih: HTML semantik, landmark, dan bahasa halaman

  Menandai kutipan berbahasa lain supaya dibacakan dengan lafal bahasanya.

  <p lang="en">Reading is to the mind what exercise is to the body.</p>

• tabindex="0" · tabindex="-1"Latih: Navigasi papan ketik dan fokus

  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.

• <a href="#isi-utama">Langsung ke isi utama</a>Latih: Navigasi papan ketik dan fokus

  Tautan lewati: elemen pertama di body yang menaut ke id elemen main.

• aria-label · aria-labelledbyLatih: ARIA: aturan pemakaian, nama, dan wilayah langsung

  Memberi nama aksesibel; aria-labelledby menunjuk id teks yang terlihat dan mengalahkan aria-label.

  <section aria-labelledby="judul-promo">

• aria-live="polite"Latih: ARIA: aturan pemakaian, nama, dan wilayah langsung

  Pesan status diumumkan tanpa memindah fokus; dipasang pada elemen kosong yang sudah ada sebelum pesannya ditulis.

• <track kind="captions">Latih: Media: takarir, transkrip, dan deskripsi audio

  Takarir di dalam video; tanpa kind, berkasnya diperlakukan sebagai subtitle.

  <track kind="captions" srclang="id" label="Indonesia" src="video.vtt">