Dokumentasi HTML

Sepanjang course ini kita berkali-kali menyinggung MDN Web Docs sebagai tempat verifikasi fakta. Kini saatnya menjadikan situs tersebut alat belajar mandiri yang utuh, dan itu menuntut kita mengenal peta situsnya: di mana materi tersimpan, bagaimana menemukannya, dan bagaimana membacanya dengan efisien. Chapter pembuka section Sumber Belajar ini memetakan area MDN untuk topik HTML, melatih alur mencari halaman elemen, serta menunjukkan cara membaca tabel atribut dan kompatibilitas. Setelah chapter ini, membuka dokumentasi bukan lagi langkah darurat, melainkan kebiasaan yang menyertai setiap markup yang kita tulis.

Tiga Area Utama MDN untuk HTML #

MDN Web Docs merupakan dokumentasi yang dipelihara Mozilla bersama komunitas kontributor, dan situs ini menjadi rujukan utama bagi developer web di seluruh dunia. Untuk topik HTML, kontennya terbagi ke dalam tiga area dengan fungsi yang berbeda:

Pembagian tersebut menolong kita memilih jenis bacaan. Materi Learn ditulis untuk dibaca urut, sedangkan Reference dirancang untuk dikonsultasi sesekali ketika kita butuh jawaban cepat. Guides berada di antara keduanya: artikel mandiri yang menyatukan beberapa topik dalam satu narasi.

Alur Mencari Halaman Elemen #

Anggap kita perlu memeriksa perilaku elemen table sebelum menulis halaman laporan penjualan. Alur paling terarah dimulai dari halaman induk HTML di developer.mozilla.org/en-US/docs/Web/HTML: masuk ke bagian Reference, lalu buka HTML elements reference untuk menemukan indeks seluruh elemen. Alternatif yang lebih cepat adalah mengetik mdn table pada mesin pencari, karena pola URL halaman elemen konsisten berupa /Web/HTML/Reference/Elements/table. Mengenal pola ini bermanfaat pula saat kita menautkan rujukan pada catatan belajar.

Membaca Tabel Atribut dan Kompatibilitas #

Setiap halaman elemen menyusun informasi dengan struktur yang seragam, sehingga setelah membaca satu halaman, halaman lain terasa familiar. Bagian Technical summary merangkum kategori konten elemen, content model atau isi yang boleh ditampung, dan ketentuan tag omission. Bagian Attributes berbentuk tabel yang memetakan atribut spesifik elemen beserta nilai yang sah, sementara tautan khusus mengarah ke halaman global attributes. Di bawahnya terdapat tabel Browser compatibility yang menampilkan dukungan antarbrowser; datanya dipelihara pada repositori terpisah bernama Browser-Compat-Data (BCD), dan tabel inilah tempat tercepat untuk mengecek apakah sebuah fitur aman dipakai lintas browser.

Sebagai latihan, kita buat halaman catatan riset untuk elemen table. Halaman berikut merangkum istilah yang kita jumpai saat membaca dokumentasinya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Riset: Elemen table</title>
</head>
<body>
  <header>
    <h1>Catatan Riset: Elemen <code>table</code></h1>
    <p>Ringkasan istilah yang dijumpai saat membaca halaman dokumentasi MDN.</p>
  </header>
  <main>
    <table>
      <caption>Istilah pada halaman MDN dan artinya</caption>
      <thead>
        <tr>
          <th scope="col">Istilah</th>
          <th scope="col">Arti</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Flow content</td>
          <td>Kategori konten; elemen table boleh berada di aliran dokumen</td>
        </tr>
        <tr>
          <td>Permitted content</td>
          <td>Isi yang boleh ditampung, misalnya caption, thead, dan tbody</td>
        </tr>
        <tr>
          <td>Tag omission</td>
          <td>Ketentuan kapan tag boleh tidak ditulis</td>
        </tr>
      </tbody>
    </table>
    <p>Sumber catatan: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table">MDN Web Docs — table</a>.</p>
  </main>
</body>
</html>

Output yang Dihasilkan:

Browser menampilkan halaman catatan dengan judul "Catatan Riset: Elemen
table", sebuah tabel dua kolom berisi tiga istilah dokumentasi, serta
tautan menuju halaman MDN untuk elemen table.

Mari kita telaah perannya satu per satu:

1. Baris 10 (<h1>): judul catatan; istilah table ditandai elemen code agar terlihat sebagai nama elemen, bukan kata biasa.
2. Baris 14-36 (<table>): satu tabel data yang menyatukan seluruh catatan riset kita.
3. Baris 15 (<caption>): judul tabel yang terbaca pembaca layar sebelum baris pertama.
4. Baris 16-21 (<thead>): baris judul kolom; atribut scope="col" menyatakan bahwa setiap sel th membawahi kolomnya.
5. Baris 22-35 (<tbody>): tiga baris isi yang memetakan istilah dokumentasi ke artinya, sekaligus menjadi latihan merangkum bacaan.
6. Baris 37 (<a>): tautan sumber yang menunjuk halaman MDN elemen table, sehingga catatan tetap bisa dilacak kembali.

Dokumentasi menolong kita menemukan cara memakai elemen dengan benar. Namun begitu muncul pertanyaan mengapa browser berperilaku tertentu, kita perlu naik satu tingkat ke dokumen yang mengikat para pembuat browser: HTML Living Standard, topik chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — HTML
• MDN Web Docs — Learn web development: Structuring content
• MDN Web Docs — Elemen table

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Riset: Elemen table</title>
</head>
<body>
  <header>
    <h1>Catatan Riset: Elemen <code>table</code></h1>
    <p>Ringkasan istilah yang dijumpai saat membaca halaman dokumentasi MDN.</p>
  </header>
  <main>
    <table>
      <caption>Istilah pada halaman MDN dan artinya</caption>
      <thead>
        <tr>
          <th scope="col">Istilah</th>
          <th scope="col">Arti</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Flow content</td>
          <td>Kategori konten; elemen table boleh berada di aliran dokumen</td>
        </tr>
        <tr>
          <td>Permitted content</td>
          <td>Isi yang boleh ditampung, misalnya caption, thead, dan tbody</td>
        </tr>
        <tr>
          <td>Tag omission</td>
          <td>Ketentuan kapan tag boleh tidak ditulis</td>
        </tr>
      </tbody>
    </table>
    <p>Sumber catatan: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table">MDN Web Docs — table</a>.</p>
  </main>
</body>
</html>