Referensi Elemen HTML

Setiap halaman web tersusun dari elemen, dan standar HTML mendefinisikan lebih dari seratus di antaranya. Menghafal semuanya bukan tugas kita; tugas kita adalah mengetahui letak daftar lengkapnya dan cara membacanya dengan efisien. Chapter ini memperkenalkan halaman indeks elemen pada MDN, kategori yang dipakai untuk mengelompokkan elemen, serta informasi yang tersedia pada setiap halaman elemen. Dengan peta tersebut, mencari elemen yang tepat berubah dari tebak-tebakan menjadi prosedur.

Indeks Elemen per Kategori #

Halaman HTML elements reference — beralamat di developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements — menyusun seluruh elemen dalam kelompok bermakna, bukan sekadar urutan abjad. Pengelompokan mengikuti peran konten, sehingga begitu kita tahu jenis konten yang sedang ditulis, kandidat elemennya menyempit dengan cepat. Kelompok yang paling sering kita singgahi:

Dua kelompok tambahan perlu dibedakan: Web Components menampung elemen pendukung komponen kustom seperti template dan slot, sedangkan Obsolete and deprecated mengumpulkan elemen yang tidak lagi disarankan untuk dokumen baru. Ketika menemukan elemen asing pada kode lama, periksa dulu apakah elemen tersebut masuk kelompok usang sebelum meniru pemakaiannya.

Informasi pada Setiap Halaman Elemen #

Setiap halaman elemen menyajikan informasi dengan susunan yang konsisten. Butir yang hampir selalu kita jumpai:

• Technical summary: kategori konten, content model, permitted parents, implicit ARIA role, dan tag omission.
• Attributes: tabel atribut spesifik elemen beserta tautan menuju halaman global attributes.
• Examples: contoh kode yang dapat langsung dicoba, lengkap dengan gambaran hasilnya.
• Accessibility: catatan praktik aksesibel, misalnya keharusan teks alternatif pada img.
• Browser compatibility: tabel dukungan antarbrowser dengan data dari BCD.

Urutan bagian bisa sedikit berbeda antarhalaman, namun kelima butir di atas hampir selalu ada. Membiasakan diri memindai Technical summary lebih dulu menghemat waktu, karena bagian itu menjawab pertanyaan paling mendasar: elemen ini menampung apa dan boleh berada di mana.

Tips Memilih Elemen dari Indeks #

Indeks paling berguna pada momen memilih elemen. Pertanyaan yang sehat untuk diajukan berurutan: makna apa yang paling dekat dengan konten kita, kategori mana pada indeks yang menampung makna tersebut, dan elemen mana di kategori itu yang content model-nya cocok dengan isi yang kita punya. Bandingkan elemen serumpun sebelum memutuskan — article dan section misalnya, yang tampil serupa namun berbeda makna. Pendekatan ini mencegah kita memilih elemen hanya karena tampilan default-nya pas.

Sebagai latihan, kita isi kartu kecil yang memetakan konten sebuah halaman warung ke kategori indeks beserta elemen terpilihnya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan: Memilih Elemen dari Indeks</title>
</head>
<body>
  <main>
    <h1>Latihan: Memilih Elemen dari Indeks</h1>
    <p>Kartu berikut merangkum hasil menelusuri indeks elemen di MDN untuk sebuah halaman warung.</p>
    <table>
      <caption>Konten halaman dan elemen yang dipilih</caption>
      <thead>
        <tr>
          <th scope="col">Konten</th>
          <th scope="col">Kategori indeks</th>
          <th scope="col">Elemen terpilih</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Daftar menu</td>
          <td>Text content</td>
          <td>ul dan li</td>
        </tr>
        <tr>
          <td>Harga dan stok</td>
          <td>Table content</td>
          <td>table</td>
        </tr>
        <tr>
          <td>Formulir pesan-antar</td>
          <td>Forms</td>
          <td>form dan label</td>
        </tr>
        <tr>
          <td>Foto kudapan</td>
          <td>Image and multimedia</td>
          <td>img</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

Output yang Dihasilkan:

Browser menampilkan tabel tiga kolom berisi empat baris: setiap baris
menautkan satu jenis konten halaman warung dengan kategori pada indeks
MDN dan elemen yang dipilih untuk konten tersebut.

Mari kita telaah perannya satu per satu:

1. Baris 12-43 (<table>): kartu latihan berupa tabel yang menyatukan konten, kategori, dan keputusan elemen.
2. Baris 13 (<caption>): judul tabel yang menegaskan isi latihan.
3. Baris 14-20 (<thead>): tiga judul kolom dengan atribut scope="col" agar hubungan sel dan kolom jelas bagi pembaca layar.
4. Baris 22-26: baris pertama; daftar menu ditangani kategori Text content sehingga kandidatnya ul dan li.
5. Baris 27-41: tiga baris berikutnya dengan pola yang sama, dari data tabular hingga foto kudapan.
6. Baris 42-43 (</tbody> dan </table>): penutup tabel yang menandai akhir kartu latihan.

Elemen tidak pernah berdiri sendiri; perilakunya diatur oleh atribut yang menempel padanya. Chapter berikutnya memetakan referensi atribut, termasuk alur menelusuri atribut asing yang kita jumpai saat membaca kode developer lain.

Referensi resmi untuk pendalaman:

• MDN Web Docs — HTML elements reference
• MDN Web Docs — Elemen article
• WHATWG — Index of elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan: Memilih Elemen dari Indeks</title>
</head>
<body>
  <main>
    <h1>Latihan: Memilih Elemen dari Indeks</h1>
    <p>Kartu berikut merangkum hasil menelusuri indeks elemen di MDN untuk sebuah halaman warung.</p>
    <table>
      <caption>Konten halaman dan elemen yang dipilih</caption>
      <thead>
        <tr>
          <th scope="col">Konten</th>
          <th scope="col">Kategori indeks</th>
          <th scope="col">Elemen terpilih</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Daftar menu</td>
          <td>Text content</td>
          <td>ul dan li</td>
        </tr>
        <tr>
          <td>Harga dan stok</td>
          <td>Table content</td>
          <td>table</td>
        </tr>
        <tr>
          <td>Formulir pesan-antar</td>
          <td>Forms</td>
          <td>form dan label</td>
        </tr>
        <tr>
          <td>Foto kudapan</td>
          <td>Image and multimedia</td>
          <td>img</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>