Buat kamu yang sering ngoding web, pasti udah nggak asing dengan HTML (HyperText Markup Language). Tapi, pernah dengar tentang XHTML (Extensible HyperText Markup Language)?
Meskipun kelihatannya mirip, HTML dan XHTML punya aturan yang berbeda. XHTML lebih ketat dibanding HTML dan lebih mendekati XML. Nah, di artikel ini kita bakal bahas apa itu XHTML, kenapa penting, dan perbedaannya dengan HTML.
Yuk, langsung simak!
1. Apa itu XHTML?
XHTML (Extensible HyperText Markup Language) adalah versi yang lebih ketat dan terstruktur dari HTML. XHTML dibuat dengan aturan XML, jadi lebih rapi dan mudah dibaca oleh browser serta mesin pencari.
Kalau HTML masih cukup fleksibel (kadang bisa salah tapi tetap jalan), XHTML lebih strict dan harus benar-benar valid.
Contoh kode HTML biasa:
<p>Ini paragraf pertama
<p>Ini paragraf keduaKode di atas masih bisa ditampilkan dengan benar di browser, meskipun ada kesalahan (tag <p> tidak ditutup).
Tapi di XHTML, kita harus menutup semua elemen dengan benar, seperti ini:
<p>Ini paragraf pertama</p>
<p>Ini paragraf kedua</p>Jadi, XHTML lebih disiplin dibanding HTML biasa.
2. Kenapa XHTML?
Kenapa kita butuh XHTML? Berikut beberapa alasannya:
✅ Lebih rapi & terstruktur → XHTML mengikuti aturan XML, jadi kode lebih bersih.
✅ Lebih kompatibel dengan perangkat modern → Karena lebih ketat, XHTML lebih mudah diinterpretasikan oleh berbagai platform.
✅ Lebih mudah di-maintain → Karena aturannya jelas, kode XHTML lebih gampang dikelola dalam proyek besar.
Meskipun sekarang HTML5 lebih populer, memahami XHTML tetap penting, terutama kalau kamu bekerja dengan sistem yang masih menggunakan standar ini.
3. Perbedaan utama antara HTML dan XHTML
Berikut adalah perbedaan utama antara HTML dan XHTML:
| Fitur | HTML | XHTML |
|---|---|---|
| Doctype | Opsional | Wajib |
| Penulisan Tag | Bisa tidak berurutan | Harus berurutan |
| Menutup Tag | Bisa tidak ditutup | Harus selalu ditutup |
| Empty Elements | Bisa tanpa `/>` | Harus ditulis menggunakan `/>` |
| Case Sensitivity | Bebas (uppercase/lowercase) | Harus lowercase |
| Attribute Quotes | Bisa tanpa tanda kutip | Harus pakai tanda kutip |
| Minimized Attributes | Bisa | Tidak boleh |
Jadi, XHTML lebih ketat dibanding HTML, tapi itu yang bikin kode jadi lebih bersih dan terstruktur.
4. XHTML – <!DOCTYPE ....> adalah wajib
Dalam HTML, kita bisa aja nggak mendefinisikan DOCTYPE, tapi di XHTML DOCTYPE wajib ada.
Contoh DOCTYPE untuk XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Kalau DOCTYPE nggak ada, XHTML bisa dianggap tidak valid!
5. XHTML Elements harus berurutan
Di XHTML, elemen harus ditulis secara berurutan dan berpasangan dengan benar.
Contoh HTML yang salah (tapi masih bisa jalan di browser):
<b><i>Ini teks tebal & miring</b></i>Di HTML, kode ini masih bisa ditampilkan dengan benar.
Tapi di XHTML, harus ditulis dengan urutan yang benar:
<b><i>Ini teks tebal & miring</i></b>Aturan ini membantu kode tetap bersih dan lebih mudah dibaca.
6. XHTML Elements wajib ditutup
Semua elemen di XHTML wajib ditutup.
Contoh HTML yang salah:
<p>Ini paragraf pertama
<p>Ini paragraf keduaDi HTML, ini masih bisa ditampilkan dengan benar.
Tapi di XHTML, harus ditulis seperti ini:
<p>Ini paragraf pertama</p>
<p>Ini paragraf kedua</p>Jadi, setiap elemen wajib ditutup dengan benar!
7. XHTML Empty Elements Harus ditutup
Di HTML, elemen kosong seperti <br> bisa ditulis tanpa penutup, misalnya:
<br>
<img src="gambar.jpg">Tapi di XHTML, elemen kosong harus selalu ditutup dengan />, seperti ini:
<br />
<img src="gambar.jpg" />Tanpa ini, kode XHTML dianggap tidak valid.
8. XHTML Elements Harus Lowercase
Di HTML, kita bisa menulis tag dengan huruf besar atau kecil:
<DIV>Ini div</DIV>Tapi di XHTML, semua elemen harus lowercase:
<div>Ini div</div>Ini karena XHTML mengikuti aturan XML, yang case-sensitive.
9. Nama XHTML Attribute Harus Lowercase
Selain nama elemen, nama atribut juga harus huruf kecil.
❌ Salah (HTML masih bisa jalan):
<IMG SRC="gambar.jpg">✅ Benar (XHTML valid):
<img src="gambar.jpg" />Kalau pakai huruf besar, XHTML bakal error!
10. Nilai XHTML Attribute Harus Menggunakan Tanda Kutip
Di HTML, kita bisa aja nulis atribut tanpa tanda kutip:
<input type=text>Tapi di XHTML, nilai atribut harus pakai tanda kutip:
<input type="text" />Jadi, selalu gunakan tanda kutip untuk nilai atribut!
11. Menyingkat XHTML Attribute Tidak Diperbolehkan
Di HTML, ada beberapa atribut yang bisa ditulis tanpa nilai, misalnya:
<input type="checkbox" checked>Tapi di XHTML, setiap atribut harus punya nilai yang jelas:
<input type="checkbox" checked="checked" />Aturan ini bikin kode lebih jelas dan mudah dibaca.
Kesimpulan
XHTML punya aturan yang lebih ketat dibanding HTML, tapi itu justru bikin kode jadi lebih rapi dan terstruktur.
Ringkasan perbedaan utama:
✅ XHTML butuh DOCTYPE
✅ Semua tag harus ditutup dengan benar
✅ Semua elemen dan atribut harus huruf kecil
✅ Nilai atribut harus pakai tanda kutip
✅ Elemen kosong harus pakai />
Meskipun sekarang HTML5 lebih populer, memahami XHTML tetap penting, terutama kalau kamu bekerja dengan sistem yang masih menggunakan standar ini.
Semoga artikel ini bermanfaat! Jangan lupa share kalau berguna ya! 🚀
Komentar