Memahami Elemen

Section sebelumnya telah membahas kerangka besar sebuah dokumen: doctype, html, head, dan body. Kini saatnya kita mengisi kerangka tersebut dengan bahan bangunan terkecilnya: elemen. Setiap judul, paragraf, gambar, dan tombol pada halaman web merupakan elemen, sehingga kefasihan membaca anatomi elemen membuat sisa perjalanan belajar HTML jauh lebih ringan. Pada Chapter ini kita membedah tiga bagian penyusun elemen, membedakan istilah tag dari elemen, lalu menetapkan konvensi penulisan yang kita pakai sepanjang Course.

Anatomi Elemen: Opening Tag, Konten, dan Closing Tag #

Sebagian besar elemen tersusun dari tiga bagian yang membentuk satu kesatuan. Opening tag (tag pembuka) adalah nama elemen yang dikelilingi tanda kurung sudut, misalnya <p>. Konten adalah teks atau elemen lain yang berada di antara kedua tag. Closing tag (tag penutup) menuliskan nama yang sama dengan tambahan garis miring sebelum nama, misalnya </p>.

<p>Soto ayam adalah menu andalan warung Siti.</p>

Tabel berikut merangkum istilah yang kita pakai sepanjang Course:

Saat membaca baris di atas, parser memulai elemen p pada opening tag, menampung teks di antaranya sebagai konten, lalu menuntaskannya pada closing tag. Hasilnya satu node pada DOM yang dapat diakses CSS dan JavaScript. Bila closing tag tertinggal, parser menerka sendiri titik akhir elemen; perilaku penerkaannya dibahas pada Chapter Nested Elements.

Tag Bukan Elemen #

Banyak materi menyebut “tag paragraf” dan “elemen paragraf” seolah sama, padahal keduanya berbeda cakupan. Tag hanyalah penanda berupa nama elemen di dalam tanda kurung sudut. Elemen adalah kesatuan utuh: opening tag, konten, dan closing tag. Saat kita menulis <p> dan </p>, yang dipandang browser adalah satu elemen p di DOM.

Elemen dengan Atribut #

Elemen dapat membawa informasi tambahan yang disebut atribut, dan atribut selalu ditulis di dalam opening tag, tidak pernah pada closing tag. Bentuk paling umumnya pasangan nama dan nilai: nama atribut, tanda sama dengan, lalu nilai berkutip ganda. Antara nama elemen dengan atribut pertama, serta di antara atribut, wajib ada spasi.

<html lang="id">

Contoh di atas ada di setiap dokumen: elemen html membawa atribut lang untuk bahasa dokumen. Kita tidak perlu menghafal atribut apa pun kini; Chapter berikutnya membedah anatomi atribut secara tuntas.

Huruf Besar dan Huruf Kecil pada Tag #

Nama tag pada HTML tidak membedakan huruf besar-kecil (case-insensitive): parser memperlakukan <P> dan <p> sebagai tag yang sama. Walaupun sah, konvensi di hampir seluruh codebase adalah huruf kecil semua: kode mudah dicari, disalin, dan sesuai gaya editor maupun linter. Sepanjang Course ini kita menulis seluruh nama tag dan atribut dengan huruf kecil.

<P>Soto ayam.</P>

Contoh Lengkap dalam Satu File #

File berikut merangkum konsep Chapter ini secara bertahap: elemen biasa, elemen dengan atribut, dan seluruh nama dalam huruf kecil. Simpan sebagai anatomi-elemen.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Anatomi Elemen</title>
</head>
<body>
  <h1>Menu warung Siti</h1>
  <p>Soto ayam adalah menu andalan.</p>
  <p lang="id">Es teh manis selalu habis sebelum sore.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Menu warung Siti" di bagian atas halaman
  - Paragraf "Soto ayam adalah menu andalan." di bawahnya
  - Paragraf "Es teh manis selalu habis sebelum sore." di bawahnya lagi
  - Teks "Anatomi Elemen" pada tab browser

Mari kita telaah bagian-bagian penting pada file di atas:

1. Baris 2 (<html lang="id">): elemen akar dengan satu atribut; atribut menempel pada opening tag.
2. Baris 9 (<h1>Menu warung Siti</h1>): satu elemen heading utuh — opening tag, konten, lalu closing tag.
3. Baris 10 (<p>): elemen paragraf tanpa atribut; kesatuan <p> hingga </p> itulah elemen.
4. Baris 11 (<p lang="id">): elemen paragraf dengan satu atribut pada opening tag-nya.
5. Seluruh nama tag: ditulis huruf kecil semua mengikuti konvensi.

Elemen dengan tiga bagian dasarnya kini kita kuasai, tetapi elemen menjadi jauh lebih bermanfaat saat membawa atribut: atribut menentukan alamat gambar, bahasa konten, sampai perilaku formulir. Chapter berikutnya, Memahami Atribut, membedah anatomi atribut beserta aturan penulisannya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Sintaks dasar HTML
• MDN Web Docs — Elements index
• WHATWG — HTML Living Standard: Elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Anatomi Elemen</title>
</head>
<body>
  <h1>Menu warung Siti</h1>
  <p>Soto ayam adalah menu andalan.</p>
  <p lang="id">Es teh manis selalu habis sebelum sore.</p>
</body>
</html>