Pada bagian sebelumnya, saya membahas sedikit pengantar tentang Belajar XHTML. Mestinya sudah ada bayangan, tentang bagaimana XHTML itu. Nah dihalaman ini, kita akan mempelajari XHTML lebih lanjut.

HTML vs XHTML

Pada bagian ini saya akan membahas secara mendalam perbedaan HTML dan XHTML. Seperti yang saya katakan sebelumnya, XHTML merupakan HTML yang ditulis dengan aturan cukup ketat yang akan menghasilkan kode-kode yang rapi.

  1. Elemen, dan Atribut ditulis dengan huruf kecil (lowercase)

    Dalam XHTML, Tag dan Atribut harus ditulis dengan menggunakan huruf kecil. Contoh:

      SALAH

      BENAR

    Kedua contoh di atas menampilkan hasil yang sama pada browser. Tetapi contoh kedua yang dimaksud dengan XHTML, karena semua elemen dan atribut ditulis menggunakan huruf kecil (lowercase).

  2. Nilai dari Atribut berada dalam tanda petik “

    Semua nilai dari atribut yang berada dalam elemen XHTML harus diberi tanda petik (quote – "). Contohnya :

      SALAH

      BENAR

    Contoh diatas menampilkan hal yang sama pada browser. Tetapi contoh kedua lah yang dimaksud dengan XHTML, karena nilai atribut elemen tersebut diberi tanda petik. Contoh lain :

      SALAH

      BENAR

    Lagi, kedua contoh di atas menampilkan hal yang sama pada browser. Tetapi contoh kedua lah yang dimaksud XHTML, karena nilai dari atribut minimasinya berada dalam tanda petik. Yang dimaksud atribut minimasi adalah atribut selected, checked, dan compact yang biasanya berada pada tag <input />, <option>, <dl>. Pada contoh kedua, nilai atribut selected diberi nilai dan berada dalam tanda petik.

  3. Elemen XHTML harus terstruktur dengan baik

    XHTML mengikut konsep dari XML (Extensible Markup Language) yang berarti semua elemen harus menggunakan tag penutup atau dibentuk dengan baik. Contoh :

      SALAH

      BENAR

    Contoh diatas menampilkan hasil yang sama pada browser. Tetapi contoh yang kedua lah yang merupakan XHTML, karena terbentuk dengan baik. Tampak Elemen <i> berada di dalam elemen <strong>, dan keduanya mempunyai tag penutup. Contoh lainnya:

      SALAH

      BENAR

    Seperti contoh sebelumnya, kedua contoh diatas menampilkan hasil yang sama pada browser. Tetapi kode yang kedua adalah XHTML, karena dibentuk dengan baik dan menggunakan tag penutup. Lihat elemen <li> yang menggunakan Tag penutup </li>.

  4. Empty-Element harus diberi Tag Penutup

    Empty-Elements pada HTML 4 boleh diartikan sebagai tag yang tidak mempunyai tag penutup secara umum. Contoh tag <br>,<hr>,<img>, dan lainnya. Berikut contohnya :

      SALAH

      BENAR

    Lagi, kedua contoh tersebut menampilkan hasil yang sama pada browser. Tetapi contoh yang kedua lah yang dimaksud dengan XHTML, karena empty-elements diberi tag penutup. Tampak elemen <br>,<hr>, dan <img> dirubah menjadi <br />,<hr />, dan <img />. Ingat juga beri spasi sebelum tag penutup />.

  5. Batasan Elemen

    Kembali ke poin 3 diatas bahwa elemen XHTML harus terbentuk dengan baik. Disini saya akan membahas rekomendasi W3C tentang batasan elemen mana saja yang tidak boleh berada di dalam suatu elemen. Bingung? Saya yakin anda akan mengerti apa yang saya maksud setelah membaca batasan-nya :

    1. Di dalam Elemen <a> tidak boleh terdapat elemen <a> lainnya.

        SALAH

        BENAR

    2. Di dalam Elemen <pre> tidak boleh terdapat elemen <img />, <object>,<big>,<small>,<sub>, atau <sup>.

        SALAH

        BENAR

    3. Di dalam Elemen <button> tidak boleh terdapat elemen <input />, <select>, <textarea>, <button>, <form>, <fieldset>, dan <iframe>.

        SALAH

        BENAR

    4. Di dalam Elemen <label> tidak boleh terdapat elemen <label> lainnya.

        SALAH

        BENAR

    5. Di dalam Elemen <form> tidak boleh terdapat elemen <form> lainnya.

        SALAH

        BENAR

  6. Root dari Elemen harus <html>

    Istilah root dalam dunia komputer bisa diartikan sebagai akar, kepala, utama, dan lain-lain. Tiap dokumen XHTML yang akan dibuat harus menetapkan tag <html> sebagai root-nya. Berikut contoh :

      SALAH

      BENAR

    Kedua contoh diatas menampilkan hal yang sama pada browser. Tetapi contoh kedua yang valid sebagai XHTML, karena root dari elemen-nya adalah <html>. Sebaliknya, contoh yang pertama menetapkan <body> sebagai root dari elemen.

  7. Definisikan Tipe Dokumen (DOCTYPE)

    Ingat, secara umum rekomendasi dari W3C tentang struktur dari dokumen XHTML adalah DOCTYPE, Bagian HEAD, dan Bagian BODY. Nah sekarang saya akan membahas tentang bagian DOCTYPE. Terdapat 3 tipe DOCTYPE yang dikeluarkan oleh W3C, yaitu :

    1. XHTML 1.0 Strict

      Memperbolehkan kita menggunakan semua Elemen dan Atribut HTML, kecuali Elemen yang sudah tidak berlaku dalam XHTML (basefont, font, center, s, strike, u, applet, dir, menu). Berikut deklarasi dari XHTML 1.0 Strict :

    2. XHTML 1.0 Transitional

      Memperbolehkan kita menggunakan semua Elemen dan Atribut HTML, tak terkecuali Elemen-elemen yang sudah tidak berlaku dalam XHTML (Lihat di XHTML 1.0 Strict). Berikut deklarasi dari XHTML 1.0 Transitional :

    3. XHTML 1.0 Frameset

      Sama dengan XHTML Transitional, hanya saja DOCTYPE ini memperbolehkan menggunakan frameset. Berikut deklarasi-nya :

    4. HTML5

      HTML 5 mendukung tag-tag baru dalam spesifikasi HTML5 seperti <header> , <footer> , <aside> , dan sebagainya. Berikut deklarasinya:

    Catatan, agar halaman anda valid sebagai XHTML, jangan lupa tambahkan atribut xlmns pada Elemen <html>. Berikut ini saya akan mencoba memberikan contoh penggunaan DOCTYPE dalam membuat sebuah file XHTML :

    Hingga saat ini, menurut saya DOCTYPE HTML5 lah yang cukup bagus untuk digunakan. Karena status dari spesifikasi HTML5 sudah dapat digunakan, mendukung pada semua browser, dan menjadi rekomendasi dari W3C untuk developer di seluruh dunia.

Petunjuk Latihan

Untuk mempelajari sesuatu lebih dalam, maka diperlukan banyak latihan. Untuk mempelajari XHTML juga demikian. Karena dengan memperbanyak latihan juga akan melatih anda dalam penghapalan syntax dan aturan dalam XHTML. Berikut ini saya akan memberikan petunjuk latihan XHTML untuk anda :

  1. Gunakan Mozilla Firefox.

    Sebenarnya dalam belajar XHTML, terserah anda mau menggunakan browser apapun. Tapi saya menyarankan anda menggunakan Mozilla Firefox, karena kemampuannya yang sangat powerfull, dan add-ons tambahannya yang banyak membantu buat para web developer.

  2. Mulai dengan hal Kecil.

    Mulailah dengan membuat dokumen XHTML yang berukuran kecil, dan perlahan-lahan biasakanlah diri anda dengan syntax-nya seperti DOCTYPE, xmlns. Kemudian perlahan-lahan membuat dokumen yang lebih besar (ratusan baris kode).

  3. Biasakan menggunakan Indentasi.

    Indentasi yang dimaksud disini adalah penggunaan Tab pada penulisan kode, sehingga pola penulisan kode lebih mudah dimengerti. Inti dalam penggunaan Indentasi disini adalah penulisan Elemen yang berada dalam sebuah Elemen, cara penulisannya harus inden ke dalam menggunakan Tab. Berikut contohnya :

  4. Gunakan Validator W3C.

    Untuk mengetahui apakah XHTML yang anda buat sudah memenuhi kriteria standarisasi dari W3C, silahkan gunakan Validator W3C. Anda dapat memilih validasi melalui URI, melalui Upload File anda, ataupun melakukan Input Langsung ke halaman validator. Setelah itu anda akan diberitahui mengenai error pada dokumen XHTML anda, dan solusi untuk memperbaikinya.

  5. Bertanya!

    Jika anda kebingungan, form komentar dibawah bisa menolong anda dan saya akan jawab semampu saya. Jika anda tidak menemukan jawaban disini, dunia maya sangat memanjakan anda dalam mencari jawaban. Ada banyak blog, forum, milis di dunia maya yang bisa membantu anda.

Kesimpulan

Setelah mempelajari XHTML, silahkan lanjutkan ke CSS. Terserah anda apakah ingin mempelajari XHTML secara mendalam, ataukah sekedar mengetahui dan kemudian melanjutkan ke CSS.

Jika ada tanggapan, kritik, saran, maupun pertanyaan tentang artikel ini, silahkan meninggalkan komentar anda. Silahkan menginput email anda pada form di bawah ini untuk menerima update jurnal terbaru dari saya. :)

Spread the Word

  • Gafur

    Nice post, thanks :)

  • Untuk tag table,
    apakah boleh tag table berada dalam tag table?
    contoh: