Yang harus kita gunakan, HTML atau XHTML, dan mengapa?
Pertama, sedikit sejarah
Sejarah HTML di W3C dimulai dengan HTML 3.2, kode bernama Wilbur, yang diikuti beberapa tahun kemudian oleh HTML 4.0, maka HTML 4.01. HTML 4.01 adalah versi terakhir dari HTML, dan juga spesifikasi W3C akhir untuk menentukan semantik markup. Dari HTML 3.2 ke HTML 4.01, bahasa telah meningkat banyak, fokus pada isu-isu seperti:
- Pemisahan presentasi dari struktur
- Peningkatan aksesibilitas fitur
- Meningkatkan fitur internasionalisasi
- Peningkatan dokumen render
XHTML 1.0 diciptakan lama setelah HTML 4.01 untuk membantu transisi hypertext untuk generasi baru dari mark-up bahasa untuk teks. XHTML 1.1 adalah langkah tambahan menuju versi yang lebih fleksibel hypertext dengan manfaat penuh arsitektur integrasi XML dan teknologi yang berbeda. Perhatikan bahwa XHTML 1.1 telah slighly meningkatkan semantik dari HTML 4.01 oleh Ruby termasuk modul, yang digunakan dalam bahasa tertentu seperti script Jepang (baca Spesifikasi Ruby untuk informasi lebih lanjut). Untuk tujuan praktis, diskusi di sini akan fokus pada HTML 4.01 dan XHTML 1.0.
Arti semantik
Ketika kita merujuk pada "semantik" dari suatu bahasa, kita mengacu pada arti dari tag yang diberikan. HTML 4.01 dan XHTML 1.0 menetapkan semantik yang sama untuk elemen dan atribut mereka. Sebagai contoh, sebuah elemen address memiliki arti yang sama persis dalam HTML 4.01 dan XHTML 1.0: mereka berdua digunakan untuk menandai alamat.
(Klarifikasi:
address
. digunakan untuk menandai informasi kontak untuk dokumen) Hanya bit sintaks bervariasi antara dua bahasa. Sebagai contoh:
(Klarifikasi:
address
. digunakan untuk menandai informasi kontak untuk dokumen) Hanya bit sintaks bervariasi antara dua bahasa. Sebagai contoh:
HTML 4.01 contoh
<Img alt = "Potret Haruki Murakami"
src = "/ images / murakami.jpg">
<p lang="fr"> Je
levai la Tete tuangkan regarder les
Etoiles. Vue Leur apaisa peu
à peu de mon les battements
coeur </ p>.
<p> <cite class="title"> Chroniques
de l'oiseau ressort à </ mengutip>
- <cite Class="author"> Haruki
Murakami </ mengutip> </ p>
Contoh XHTML 1.0
<Img alt = "Potret Haruki Murakami"
src = "/ images / murakami.jpg" />
<p xml:lang="fr"> Je
levai la Tete tuangkan regarder les
Etoiles. Vue Leur apaisa peu
à peu de mon les battements
coeur </ p>.
<p> <cite class="title"> Chroniques
de l'oiseau ressort à </ mengutip>
- <cite Class="author"> Haruki
Murakami </ mengutip> </ p>
Sintaks dalam contoh ini masih sangat mirip dan hanya ada beberapa perbedaan di antara mereka.
Kedua bahasa datang dalam tiga rasa: Frameset, Transisi dan ketat. The "ketat" versi sangat direkomendasikan oleh W3C untuk dokumen biasa. Menggunakan versi yang ketat menghapus elemen bermasalah serta memaksa pemisahan yang signifikan antara struktur dokumen Anda dan presentasi. Transisi versi memungkinkan unsur usang untuk membantu mereka pelaksana untuk meng-upgrade perangkat lunak mereka lancar atau konten mereka.
Menggunakan alat yang tepat untuk pekerjaan itu
Apakah ada keuntungan untuk menggunakan HTML 4.01 selama XHTML 1.0? Tidak ada jawaban yang sederhana dan manfaat Anda akan mendapatkan terikat dengan bagaimana Anda menggunakan bahasa dalam situasi tertentu.
Berpindah dari HTML ke XHTML 1.0 4.01 membawa hampir tidak ada manfaat langsung bagi para pengunjung situs Web Anda, masih, ada beberapa alasan bagus untuk penulis Web untuk membuat saklar:
XHTML adalah lebih mudah untuk mempertahankan
Aturan sintaks XML jauh lebih ketat dari HTML. Akibatnya, XHTML membuat penulis bekerja lebih tepatnya, harus menangani masalah-masalah seperti:
- semua elemen dan atribut harus muncul nama-nama dalam huruf kecil
- semua nilai atribut harus dikutip
- Elemen non-Kosong memerlukan tag penutup
- elemen kosong yang diakhiri dengan menggunakan ruang dan trailing slash
- tidak ada minimisasi atribut diperbolehkan
- dalam XHTML ketat, semua elemen inline harus terkandung dalam elemen blok
Dalam HTML, kasus, kutipan, pemutusan banyak unsur dan elemen uncontained diperbolehkan dan umum. Margin untuk kesalahan dalam HTML jauh lebih luas daripada di XHTML, mana aturan-aturan yang sangat jelas. Akibatnya, XHTML adalah lebih mudah untuk penulis dan untuk mempertahankan, karena struktur yang lebih jelas dan sintaks masalah adalah lebih mudah untuk spot.
XHTML XSL siap
Seperti Anda mungkin menyadari sekarang, XHTML 1.0 adalah reformulasi dari HTML 4.01 dalam XML. Oleh karena itu, dokumen XHTML adalah dokumen hypertext dan dokumen XML. Sebuah teknologi yang kuat telah dikembangkan di W3C untuk memanipulasi dan mengubah dokumen XML: Extensible Style sheet Bahasa Transformasi (XSLT). Teknologi ini sangat berguna untuk menciptakan berbagai sumber daya baru secara otomatis dari dokumen XHTML. Sebagai contoh
- Anda dapat membuat daftar isi untuk dokumen yang panjang
- Mendapatkan gambaran singkat dari halaman dengan daftar bahasa dan menguraikan struktur! Lihat ekstraktor Semantik untuk halaman ini , diciptakan oleh W3C QA anggota Kelompok Kerja Dominique Hazael-Massieux
- Anda dapat memberikan versi cetak dokumen Anda dengan menggunakan XSL-FO fitur XSL
- Anda dapat menghasilkan RSS feed langsung dari halaman Anda, memeriksa RSS feed QA untuk melihat ini dalam aksi
XHTML adalah lebih mudah untuk mengajar dan belajar
Aturan sintaks yang didefinisikan oleh XML jauh lebih konsisten daripada yang ditemukan dalam HTML dan karena itu lebih mudah untuk menjelaskan dari peraturan-peraturan SGML yang berbasis HTML.
XHTML siap untuk masa depan
Ketika versi baru dari XHTML menjadi rekomendasi, XHTML 1.0 dokumen akan dengan mudah diupgrade ke versi baru ini, untuk memungkinkan untuk mengambil keuntungan dari fitur menarik yang baru. Kemungkinan bahwa style sheet XSLT akan tersedia pada saat itu untuk membantu Anda bergerak Anda XHTML 1.0 (ketat) dokumen ke dokumen XHTML 2.0.
Baiklah, jadi apa?
Ya, HTML 4.01 adalah sebagai berharga sebagai XHTML 1.0 dalam penggunaan sehari-hari. Sintaks diusulkan oleh XHTML 1.0 memiliki beberapa manfaat penting. Berat manfaat ini harus dievaluasi dalam konteks proyek Anda: Gunakan alat yang tepat untuk pekerjaan yang tepat.
Untuk desainer web, mulai menggunakan XHTML 1.0 akan membantu dalam beberapa keadaan dan tentu akan membantu Anda untuk bernegosiasi lancar masa depan. XHTML 1.0 memberikan kesempatan baik untuk belajar tentang bahasa XML dan kemungkinan mereka tanpa harus mempelajari semantik baru karena Anda bekerja dengan tag akrab dan atribut.
Bagaimana XHTML berbeda dari HTML ?
XHTML adalah fundamental berbeda dari HTML, meskipun terlihat sangat mirip.
XHTML adalah fundamental berbeda dari HTML, meskipun terlihat sangat mirip.
- XHTML adalah XML, yang berarti bahwa aturan-aturan sintaks yang sedikit berbeda.
- Ada hal yang dapat Anda lakukan dalam XHTML yang tidak dapat Anda lakukan dalam HTML.
- Ada hal yang dapat Anda lakukan dalam HTML yang tidak dapat Anda lakukan dalam XHTML.
- Ada perbedaan tentang CSS.
- Ada perbedaan mengenai client-side scripting (misalnya, JavaScript).
Perbedaan Aturan Sintaks
- XHTML adalah kasus-sensitif, HTML tidak. Semua tag dan atribut harus huruf kecil dalam XHTML.
- XHTML, XML menjadi, harus well-formed. Setiap elemen harus memiliki tag penutup, atau gunakan sintaks tag menutup diri. HTML memungkinkan beberapa tag akhir dan bahkan beberapa tag mulai dihilangkan.
- Jika sebuah XML parser menemukan kesalahan baik formedness, harus batalkan. SGML parser atau HTML diharapkan untuk mencoba untuk menyelamatkan apa yang bisa dan terus berjalan.
- Semua atribut harus memiliki nilai dalam XHTML. HTML memungkinkan beberapa atribut (misalnya, dipilih) harus diminimalkan.
- Semua nilai atribut harus dikelilingi oleh tanda kutip ganda atau tunggal. HTML memungkinkan kutipan harus dihilangkan jika nilai hanya berisi karakter alfanumerik (dan beberapa orang lain).
- Sintaks komentar adalah lebih terbatas dalam XHTML, tapi itu jarang menjadi masalah bagi kebanyakan desainer / pengembang.
Hal yang Dapat Anda Lakukan dalam XHTML Tapi Tidak Dalam HTML
- Gunakan bagian CDATA (<[CDATA [...]]>). Itu berguna jika Anda memiliki konten dengan banyak karakter literal yang lain harus di-escape.
- Gunakan PI (pengolahan instruksi), misalnya, untuk link ke sebuah style sheet:
<Xml-stylesheet type = "text / css" href = "style.css" media? = "Layar"?> - Sertakan elemen dari ruang nama XML lainnya (lihat di bawah).
- Gunakan entitas karakter '.
Hal yang Dapat Anda Lakukan dalam HTML Tapi tidak Bisa Lakukan dalam XHTML
- 'Sembunyikan' isi elemen gaya atau script dengan komentar SGML (<-! ... ->).
- Membuat bagian-bagian dari halaman dinamis dengan JavaScript saat dokumen masih loading (misalnya, menggunakan document.write ()).
- Gunakan entitas karakter bernama (misalnya,) selain empat yang telah ditetapkan: <,>, & dan ".
- Gunakan properti. InnerHTML dengan JavaScript (secara teknis ini adalah non-standar yang lebih dalam HTML).
Perbedaan Tentang CSS
- Selektor tipe elemen dalam CSS adalah case sensitif untuk XHTML, tetapi tidak untuk HTML.
- Dalam HTML, warna latar belakang sifat, latar belakang-gambar dan overflow pada elemen BODY akan diterapkan ke elemen root (HTML) kecuali ditentukan untuk elemen juga. Itu bukan kasus untuk XHTML.
Dalam beberapa tag HTML memulai adalah opsional, tetapi node elemen ada dalam model objek dokumen bahkan jika tag tidak terjadi di markup. Jika kita ingin sel sundulan gaya dalam tubuh tabel, kita bisa menggunakan aturan CSS seperti ini:
Kode:
tbody th {text-align: kiri}
Dalam HTML, ini akan bekerja bahkan jika kita menghilangkan <tbody> dan </ tbody> tag di markup kita, karena elemen tbody akan dibuat pula. Itu tidak akan bekerja dalam XHTML, kecuali kita memiliki <tbody> eksplisit dan </ tbody> tag, pemilih tidak akan cocok.
Perbedaan Tentang JavaScript
Perbedaan Tentang JavaScript
- document.write () tidak dapat digunakan dengan XHTML (lihat Mengapa document.write () tidak bekerja dalam XML )
- Metode DOM seperti createElement () harus diganti oleh namespace-rekan mereka menyadari (createElementNS () dll).
- Non-standar properti innerHTML. Tidak boleh digunakan untuk dokumen XHTML.
- Masalah yang sama dengan unsur-unsur implisit yang terjadi untuk CSS juga berlaku untuk JavaScript.
Bagaimana deklarasi DOCTYPE digunakan?
Satu mungkin dipimpin untuk percaya bahwa deklarasi DOCTYPE di bagian atas dokumen adalah apa yang memberitahu agen pengguna bahwa itu adalah dokumen XHTML. Namun, hal ini tidak terjadi. Tujuan asli dari deklarasi DOCTYPE hanya harus dilakukan dengan validasi markup. Validator perlu tahu terhadap yang definisi jenis dokumen (DTD) untuk memeriksa kepatuhan. Browser tidak menggunakan parser memvalidasi, karena ada kebutuhan ada, sehingga mereka digunakan untuk mengabaikan DOCTYPE.
Ketika IE5/Mac diluncurkan, itu memiliki fitur baru: switching DOCTYPE. Dukungan untuk standar web adalah peningkatan besar dibandingkan dengan versi yang lebih tua, dan dibandingkan dengan sepupunya kontemporer pada platform Windows. Dalam rangka memberikan dukungan yang baik standar dan masih menghindari melanggar jutaan situs web yang ditulis untuk mengakomodasi render salah IE CSS, deklarasi DOCTYPE digunakan untuk membuat tebakan, apakah dokumen itu 'modern' atau 'tua-sekolah '. Fitur ini kemudian dimasukkan dalam IE6/Win, dan sekarang dapat ditemukan di browser paling modern.
Jadi deklarasi DOCTYPE melayani dua tujuan: ia menceritakan sebuah aginst validator yang DTD dokumen klaim kesesuaian, dan digunakan oleh browser untuk menentukan modus render untuk digunakan. Ini sama sekali tidak ada hubungannya dengan masalah vs XHTML HTML, namun. Browser yang mendukung XHTML menggunakan mode rendering 'standar yang ketat' untuk dokumen XHTML, asalkan mereka dilayani seperti itu.
Apakah saya perlu atribut xmlns dalam tag <html> saya?
Ya Itulah. Apa yang memberitahu agen pengguna bahwa dokumen tersebut adalah, pada kenyataannya, XHTML, daripada aplikasi lain dari XML. Jika atribut xmlns hilang, atau tidak mengandung nilai yang benar, markup tidak akan diakui sebagai XHTML. Atribut tidak valid dalam HTML, dan dengan demikian akan diabaikan jika dokumen yang disajikan sebagai teks / html. Nilai yang benar untuk digunakan adalah
Satu mungkin dipimpin untuk percaya bahwa deklarasi DOCTYPE di bagian atas dokumen adalah apa yang memberitahu agen pengguna bahwa itu adalah dokumen XHTML. Namun, hal ini tidak terjadi. Tujuan asli dari deklarasi DOCTYPE hanya harus dilakukan dengan validasi markup. Validator perlu tahu terhadap yang definisi jenis dokumen (DTD) untuk memeriksa kepatuhan. Browser tidak menggunakan parser memvalidasi, karena ada kebutuhan ada, sehingga mereka digunakan untuk mengabaikan DOCTYPE.
Ketika IE5/Mac diluncurkan, itu memiliki fitur baru: switching DOCTYPE. Dukungan untuk standar web adalah peningkatan besar dibandingkan dengan versi yang lebih tua, dan dibandingkan dengan sepupunya kontemporer pada platform Windows. Dalam rangka memberikan dukungan yang baik standar dan masih menghindari melanggar jutaan situs web yang ditulis untuk mengakomodasi render salah IE CSS, deklarasi DOCTYPE digunakan untuk membuat tebakan, apakah dokumen itu 'modern' atau 'tua-sekolah '. Fitur ini kemudian dimasukkan dalam IE6/Win, dan sekarang dapat ditemukan di browser paling modern.
Jadi deklarasi DOCTYPE melayani dua tujuan: ia menceritakan sebuah aginst validator yang DTD dokumen klaim kesesuaian, dan digunakan oleh browser untuk menentukan modus render untuk digunakan. Ini sama sekali tidak ada hubungannya dengan masalah vs XHTML HTML, namun. Browser yang mendukung XHTML menggunakan mode rendering 'standar yang ketat' untuk dokumen XHTML, asalkan mereka dilayani seperti itu.
Apakah saya perlu atribut xmlns dalam tag <html> saya?
Ya Itulah. Apa yang memberitahu agen pengguna bahwa dokumen tersebut adalah, pada kenyataannya, XHTML, daripada aplikasi lain dari XML. Jika atribut xmlns hilang, atau tidak mengandung nilai yang benar, markup tidak akan diakui sebagai XHTML. Atribut tidak valid dalam HTML, dan dengan demikian akan diabaikan jika dokumen yang disajikan sebagai teks / html. Nilai yang benar untuk digunakan adalah
· Kode:
· xmlns = "http://www.w3.org/1999/xhtml"
· Namespaces dalam XML memungkinkan kita untuk menggunakan nama elemen tipe yang sama untuk elemen yang berbeda. Sebagai contoh, sebuah bahasa markup WidgetML fiktif dapat menggunakan tipe elemen yang disebut label. Dengan mendeklarasikan namespace terpisah untuk WidgetML, kita dapat menggunakan elemen-elemen label di halaman XHTML, bahkan jika itu berisi formulir dengan elemen label, dan browser akan punya masalah menjaga mereka terpisah.
Sebuah namespace XML terikat untuk URI. XHTML namespace disebutkan di atas adalah salah satu contoh. Jika kita ingin memasukkan unsur-unsur WidgetML seluruh dokumen XHTML kita, kita dapat menggunakan awalan dan mengikat namespace WidgetML untuk itu:
Sebuah namespace XML terikat untuk URI. XHTML namespace disebutkan di atas adalah salah satu contoh. Jika kita ingin memasukkan unsur-unsur WidgetML seluruh dokumen XHTML kita, kita dapat menggunakan awalan dan mengikat namespace WidgetML untuk itu:
· Kode HTML:
· <Html xmlns = "http://www.w3.org/1999/xhml"
· xmlns: w = "http://example.com/ns/widgetml"
· xml: lang = "en">
· Hal ini mengikat awalan 'w' untuk namespace WidgetML. Untuk memisahkan elemen label XHTML dari itu WidgetML, kita gunakan awalan dalam tag kami: <w:label> Biru Widget </ b: label>.
Kesalahan umum
Beberapa kesalahan yang paling umum dalam penggunaan XHTML adalah:
- Tidak menutup elemen kosong (tanpa tag penutup elemen di HTML4)
- Salah: <br>
- Benar: <br />
Perhatikan bahwa semua ini dapat diterima dalam XHTML: <br></br> , <br/> , dan <br /> . Lama HTML-satunya browser sebagai HTML menafsirkan umumnya akan menerima <br> dan <br /> . - Tidak menutup elemen non-kosong
- Salah: <p>This is a paragraph.<p>This is another paragraph.
- Benar: <p>This is a paragraph.</p><p>This is another paragraph.</p>
- Benar bersarang elemen (Catatan bahwa ini juga akan tidak valid dalam HTML )
- Salah: <em><strong>This is some text.</em></strong>
- Benar: <em><strong>This is some text.</strong></em>
- Tidak menempatkan tanda kutip nilai atribut
- Salah: <td rowspan=3>
- Salah: <td rowspan='3">
- Benar: <td rowspan="3">
- Benar: <td rowspan='3'>
- Menggunakan karakter ampersand luar entitas (Catatan bahwa ini juga akan tidak valid dalam HTML )
- Salah: <title>Cars & Trucks</title>
- Benar: <title>Cars & Trucks</title>
- Salah: <a href="index.php?page=news&id=5">News</a>
- Benar: <a href="index.php?page=news&id=5">News</a>
- Gagal untuk mengenali unsur-unsur dan atribut XHTML yang bersifat case sensitive
- Salah: <BODY><P ID="ONE">The Best Page Ever</P></BODY>
- Benar: <body><p id="ONE">The Best Page Ever</p></body>
- Menggunakan atribut minimalisasi
- Salah: <textarea readonly>READ-ONLY</textarea>
- Benar: <textarea readonly="readonly">READ-ONLY</textarea>
- Menyalahgunakan CDATA , script-komentar dan xml-komentar ketika embedding script dan stylesheet.
- Masalah ini dapat dihindari sama sekali dengan menempatkan semua script dan informasi stylesheet dalam berkas terpisah dan merujuk kepada mereka sebagai berikut dalam XHTML head elemen.
<link rel = "stylesheet" href = "/style/screen.css" type = "text/css" />
<script type = "text/javascript" src = "/script/site.js"> </ script>
Catatan: Format ini <script …></script> , daripada lebih ringkas <script … /> , diperlukan untuk kompatibilitas HTML ketika menjabat sebagai tipe MIME text/html .
· Jika seorang penulis memilih untuk memasukkan script atau gaya data yang inline dalam dokumen XHTML, pendekatan yang berbeda direkomendasikan seperti yang ditunjukkan pada contoh di bawah, tergantung apakah penulis bermaksud untuk melayani halaman seperti application/xhtml+xml dan target hanya sepenuhnya konforman browser, atau melayani halaman sebagai text/html dan mencoba untuk mendapatkan kegunaan di Internet Explorer 6 dan non-konforman browser.
0 komentar: (+add yours?)
Posting Komentar