Elemen html

Setelah doctype menetapkan mode rendering, kerangka dokumen dimulai dari elemen html. Elemen ini adalah akar dokumen: induk langsung head dan body, sekaligus leluhur dari seluruh elemen lain. Elemen html membawa dua atribut penting, lang dan dir, yang memengaruhi cara perangkat lunak membaca halaman kita. Pada Chapter ini kita membedah peran elemen akar tersebut, kedua atributnya, dan aturan penggunaannya.

Elemen Akar Dokumen #

Spesifikasi WHATWG menyatakan elemen html merepresentasikan akar dokumen HTML (root): seluruh elemen lain berada di dalamnya, sedangkan elemen html sendiri tidak memiliki induk. Hubungannya dapat digambarkan seperti ini:

<!doctype html>
└── html            ← akar dokumen
    ├── head        ← metadata dokumen
    └── body        ← konten yang terlihat

Sebagai akar, elemen html punya dua anak langsung dengan urutan tetap: head dulu, lalu body. Tidak ada elemen lain yang boleh menjadi anak langsungnya; semua konten tersimpan di kedua wadah itu. Satu dokumen hanya boleh memuat satu elemen html, dan validator menegur bila aturan ini dilanggar.

Atribut lang dan Bahasa Konten #

Atribut menambahkan informasi pada tag pembuka; pembahasan lengkapnya menanti di section Elemen dan Atribut. Dua atribut berikut layak kita kenal sekarang karena paling sering menempel pada elemen html. Atribut lang menyatakan bahasa utama konten dokumen, dengan nilai berupa language tag standar BCP 47:

Spesifikasi menganjurkan penulis selalu menetapkan lang pada elemen html karena informasi tersebut dipakai banyak pihak:

• Screen reader memilih lafal dan suara yang sesuai, sehingga teks Bahasa Indonesia tidak dibaca dengan aturan lafal bahasa lain.
• Fitur terjemahan browser menentukan bahasa sumber dengan tepat sebelum menawarkan penerjemahan.
• Tipografi dan ejaan: pemenggalan kata (hyphenation) dan pemeriksa ejaan mengikuti bahasa yang dinyatakan.
• Mesin pencari memahami bahasa halaman untuk memilah hasil pencarian.

Standar aksesibilitas WCAG pun mewajibkan halaman menyatakan bahasanya; satu kata pada atribut lang sekaligus melayani pembaca umum dan pembaca teknologi bantu.

Atribut dir dan Arah Teks #

Atribut dir menetapkan arah dasar teks halaman. Nilai bawaannya ltr (left-to-right) untuk teks yang ditulis dari kiri ke kanan, seperti Bahasa Indonesia dan Bahasa Inggris. Untuk bahasa yang ditulis dari kanan ke kiri seperti Bahasa Arab, kita memakai nilai rtl (right-to-left):

<html lang="ar" dir="rtl">

Dengan deklarasi di atas, browser menata arah teks, posisi scroll, dan alur tata letak dasar dari kanan. Nilai ketiga, auto, menyuruh browser menentukan arah dari karakter pertama konten. Untuk halaman berbahasa Indonesia, dir boleh dihilangkan karena ltr memang nilai bawaannya.

Aturan Penggunaan Elemen html #

Aturan penggunaan elemen html dapat kita rangkum sebagai berikut:

• Hanya ada satu elemen html per dokumen, ditulis setelah doctype.
• Anak langsungnya hanya head dan body, dalam urutan tersebut.
• Nilai lang harus kode BCP 47 yang sah, bukan teks bebas seperti Bahasa Indonesia.
• Tag <html> dan </html> sebenarnya dapat dihilangkan; parser tetap menyisipkan elemen akarnya, tetapi kita menuliskannya agar struktur terbaca manusia.

Kesalahan berikutnya adalah menulis elemen html lebih dari satu. Contoh berikut tidak valid:

<!doctype html>
<html lang="id">
<html>
<head>
  <meta charset="utf-8">
  <title>Halaman Ganda</title>
</head>
<body>
  <p>Isi halaman.</p>
</body>
</html>

Validator menandai baris kedua dengan pesan Stray start tag "html" karena elemen akar telah terbentuk pada baris sebelumnya. Parser memang menoleransi banyak ketidakteraturan, tetapi validator memeriksa struktur terhadap aturan spesifikasi, dan aturannya tegas: akar dokumen hanya satu.

Contoh Dokumen dengan lang #

File berikut menerapkan elemen html beserta atribut lang dalam kerangka utuh:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Profil Siti</title>
</head>
<body>
  <h1>Profil Siti</h1>
  <p>Halaman ini menyatakan lang id pada elemen akarnya.</p>
  <p>Screen reader dan fitur terjemahan membaca halaman sebagai dokumen berbahasa Indonesia.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Profil Siti" di bagian atas halaman
  - Dua paragraf penjelasan di bawahnya
  - Teks "Profil Siti" pada tab browser

Mari kita telaah peran setiap baris penting di atas:

1. Baris 1 (<!doctype html>): deklarasi pembuka yang menetapkan standards mode.
2. Baris 2 (<html lang="id">): elemen akar dengan penanda bahasa; seluruh isi halaman mewarisi bahasa Indonesia dari titik ini.
3. Baris 3-6 (<head> … </head>): metadata berisi pengodean karakter dan judul tab browser.
4. Baris 7-11 (<body> … </body>): konten halaman berupa satu heading dan dua paragraf.

Elemen html menyiapkan panggung beserta dua anaknya. Chapter Elemen head berikutnya menelaah anak pertama: wadah metadata yang tidak terlihat pengunjung tetapi menentukan banyak perilaku halaman.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen html
• MDN Web Docs — Global attribute lang
• MDN Web Docs — Global attribute dir
• WHATWG — HTML Living Standard: The html element

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Profil Siti</title>
</head>
<body>
  <h1>Profil Siti</h1>
  <p>Halaman ini menyatakan lang id pada elemen akarnya.</p>
  <p>Screen reader dan fitur terjemahan membaca halaman sebagai dokumen berbahasa Indonesia.</p>
</body>
</html>