Breaking The W3C Code

by Deddy Andaka on June 18, 2008

Saya tertarik dengan tulisan dr. Dani Iswara yang berjudul “Situs Indonesia Penganut Standar Web“. Maka dalam beberapa hari ini saya mencoba membuat blog ini valid menurut W3C. Hasilnya lumayan, ketika pertama kali mencoba memvalidasi dengan W3C Markup Validation Service saya menemukan sekitar 120-an error. Setelah diteliti satu persatu dan dicoba dicarikan solusi, sekarang blog ini sudah “lampu hijau” alias sudah dinyatakan valid oleh W3C! Nah, melalui tulisan ini saya mau berbagi tentang kesalahan-kesalahan kecil yang saya lakukan beserta solusinya. Bagi beberapa kalangan mungkin tulisan ini basic banget. Saya hanya mencoba menafsirkan pesan error yang muncul dengan trial and errors. Karena itu, bila terdapat kesalahan dalam penafsiran mohon dikoreksi.

  1. Self-close elements

    Dalam bahasa HTML ada beberapa element yang berdiri sendiri dimana tag pembuka “<” dan penutup “/>”menjadi satu, ini yang dinamakan Self-close elements. Seperti misalnya pada tag br dan img. Sehingga penulisan untuk kedua tag tersebut adalah :

    <br> dan <img > (Tidak Valid)
    <br /> dan <img /> (Valid)
    
  2. Ampersands (&’s) in URL

    Seperti sudah disebutkan di atas, tanda “<” mempunyai arti penting sebagai tag pembuka. Lalu bagaimana menyebutkan “b<a” adalah ‘b lebih kecil dari a’ bukan ‘huruf b yang diikuti oleh anchor pembuka’? Disanalah diperlukan character reference, dimana pada kasus di atas ‘tanda lebih kecil’ diwakilkan oleh kode ‘&lt;’. Nah, kesalahan yang sering terjadi adalah penggunaan ‘&’ pada URL. Karena itu karakter ‘&’ dapat digantikan oleh kode Ampersands &amp;’

    andaka.com/testing.php?id=17&s=10"> (Tidak Valid)
    andaka.com/testing.php?id=17&amp;s=10"> (Valid)
  3. Required Attribute

    Ada beberapa atribut yang harus disertakan pada sebuah element yang kita gunakan. Sebagai contoh, element “img” harus menyertakan atribut “alt” dalam tagnya. Dan element “script” harus menyertakan atribute “type”. Tidak adanya atribut-atribut tersebut akan membuatnya menjadi tidak valid.

    <img scr="" width="84" height="15" /> (Tidak Valid)
    <img scr="" width="84" height="15" alt="..." /> (Valid)
  4. Must be all lower-case

    Iya, bahasa XHTML tidak mengenal huruf besar (CAPS LOCK). Maka ketika kita menggunakan huruf besar pada tag yang kita gunakan maka pesan error ini akan muncul. Hal ini sering terjadi pada blog-blog yang menggunakan widget Alexa karena menggunakan huruf besar pada tulisan SCRIPT dan JavaScript. Solusinya? Ya tinggal diubah saja menjadi huruf kecil.

    <SCRIPT src='http://xslt.alexa.com/site_stats/js/t/b?url=www.andaka.com'
    type='text/javascript' language='JavaScript'></SCRIPT> (Tidak Valid)
    
    <script src='http://xslt.alexa.com/site_stats/js/t/b?url=www.andaka.com'
    type='text/javascript' language='javascript'></script> (Valid)

Sekian sedikit pengalaman yang dapat saya bagi dalam memvalidasi halaman blog agar menjadi “W3C Valid”. Sudahkah blog atau website anda tervalidasi oleh W3C? Jika belum, selamat mencoba… Berikutnya saya akan mencoba memvalidasi CSS saya yang masih amburadul ! πŸ˜€

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

{ 43 comments… read them below or add one }

snydez June 18, 2008 at 4:58 pm

kalo gue udah males, udah kebanyakan error. πŸ˜‰

Reply

Deddy Andaka June 18, 2008 at 5:12 pm

Barusan tak cek cuma 23 tuh Son. Masih dikitan dibanding blog ini yang awalnya 120-an. Hajar saja… hehe…

Reply

huda June 18, 2008 at 5:16 pm

Kalo CSS nya gimana? :D. Firefox 3 lebih strict lo kalo masalah CSS. ;))

Reply

Deddy Andaka June 18, 2008 at 6:00 pm

Masih amburadul Hud. Hehe… next target nih beresin CSS. Mudah2an bisa, klo ngga ya ntar ganti themes aja sekalian πŸ˜›

Reply

tipis June 18, 2008 at 5:20 pm

hehe saya juga, pasti deh errornya buanyuaaaak. pak dokter kita ini mantab juga codingnya ya. tambah banyak aja nih saingan programmer web hahaha. thx infonya dok

Reply

Deddy Andaka June 18, 2008 at 6:14 pm

Sebenernya setiap pesan error yang muncul ketika kita memvalidasi sudah langsung diberi solusinya kok. So… kita tinggal ngikutin aja. Kebetulan error saya cuma sekitar 4 masalah tersebut. Jadi ya simpen aja buat kenang2an πŸ˜†

Reply

fenny June 18, 2008 at 8:35 pm

wahhhh jadi malu.. selama ini aku ga paham sampe sana, yang penting mo nongol ya uda πŸ˜€
hmm… kapan2 aja deh bongkarnya

Reply

Deddy Andaka June 18, 2008 at 10:03 pm

Ada 82 error Fen. Ayo diberes2in biar PR-nya ga numpuk πŸ˜‰

Reply

devari June 18, 2008 at 9:29 pm

caranya memvalidasi gimana deddy? begitu masuk ke halaman w3 validasi service yang ada hanya kolom yaitu address: …….
apa yag harus dimasukin ke kolom address itu?
thanks

Reply

Deddy Andaka June 18, 2008 at 10:06 pm

Masukin url blog kita bli, misalnya: “http://www.andaka.com”
Lalu klik “Check”, setelah itu kita akan dibawa ke halaman validasi. Klo ada error dikasi tau kok errornya di mana. Setelah dibenerin coba revalidasi lagi sampai ga ada error.

Reply

jimmy June 18, 2008 at 10:58 pm

keren nih pak dokter πŸ˜‰ saya sendiri belum ngecek blog sampe segitunya, tapi selama ini untuk aturan nomor 1 dan 4 saya sudah ngikutin πŸ˜€

Reply

Deddy Andaka June 21, 2008 at 3:50 pm

Klo sudah ngikutin sih aman yah…
Empat aturan itu kesalahan favorit saya. Hehehe…
sebenernya malu nih, jadi keliatan banget web designer dadakan πŸ˜†

Reply

yudi June 18, 2008 at 11:28 pm

punya saya muncul Failed validation, 63 Errors, itu artinya apa yah pak dokter deddy? saya belum ngerti nih 😳
punya saya tidak valid deh :mrgreen: 😳

Reply

Deddy Andaka June 21, 2008 at 3:51 pm

ada 63 kesalahan tuh. Ayo coba dibenerin dengan 4 aturan di atas…

Reply

Petani Internet June 19, 2008 at 12:31 am

Wah saya pak Dokter Andaka, pinter coding nih…
saya jadi malu, udah lama di komputer gak bisa coding PHP dan Web.

Salam kenal pak Dokter,
saya akan coba validasi web saya, agar bisa tambah ok saja.

Reply

Deddy Andaka June 21, 2008 at 3:52 pm

Aduh jangan gitu pak… saya juga masih belajar kok.
Ayo belajar sama2…

Reply

dani June 19, 2008 at 1:11 am

congrats ya Ded..
pasti banyak yg bisa sebenernya..
cuman kadang mau ato ngganya itu.. πŸ™‚
apalg mempertahankan..
kl perlu, cek jg pake validome πŸ˜€

Reply

Deddy Andaka June 21, 2008 at 3:53 pm

Setuju dok. Ini masalah mau ato ngga. (sempet ato ngga juga sih…)
nah, untuk alasan yang terakhir itu saya belum sempet cek pake validome 😳

Reply

devari June 19, 2008 at 7:43 am

waaaaa udah coba banyak yag error…perbaikinya gimana bro?
contoh:
———————–
# Error Line 14, Column 126: required attribute “type” not specified.

…p-includes/wlwmanifest.xml” /> .broken_link, a.broken_link {
The attribute given above is required for an element that you’ve used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element.

Typical values for type are type=”text/css” for and type=”text/javascript” for .

———————————–

Line 14 kolom 126 itu dimana ya? masuk ke theme editor?

Reply

Deddy Andaka June 21, 2008 at 3:55 pm

Untuk masalah ini masuk ke aturan no 3 bli. Coba deh di cek…
untuk tau line berapa, bisa pake software editor macam notepad++ atau AceHTML

Reply

xero June 19, 2008 at 11:43 am

wah ini yang saya cari, soalnya kadang muncul tanda pentung di kiri bawah, jadi penasaran apa yg error ya hehehehe, thanks infonya om!

Reply

Deddy Andaka June 21, 2008 at 3:56 pm

sama-sama…semoga membantu…

Reply

Ramayadi June 19, 2008 at 4:49 pm

wah punya saya berapa yak :mrgreen:

ngga pernah mikir valid-validan soalnya, yg penting firefox+ie friendly hajar aja πŸ˜†

Reply

Deddy Andaka June 21, 2008 at 3:59 pm

denger-denger firefoc 3 tambah galak masalah valid-validan nih. CMIIW

Reply

quelopi June 19, 2008 at 5:11 pm

wah, kalau di cek source code nya emang banyak yang tidak valid kang, namun lagi-lagi masalah theme dan engine

standar? ya iya lah, masak ya iya dong

Reply

Deddy Andaka June 21, 2008 at 4:02 pm

Masalah theme dan engine? Pake blogspot ya? Saya belum mengintip errornya pake blogspot. Tapi klo Wordpress sih ga ada masalah. Klo errornya di theme kan bisa dibenerin mas? πŸ˜‰

Reply

imsuryawan June 20, 2008 at 1:13 pm

cek in punya saya dong πŸ˜€

anyway, saya cuma heran kok HTML ga seketat XML aturannya ya?! kalo XML, ga di-close tag nya sudah pasti ga valid. Kalo html tetep bisa dibaca browser kayaknya (untuk beberapa kasus yang ga valid)!

My first guess, mungkin karena HTML lebih difungsikan ke user interfacing, bukan ke data manipulation. Keto asanae… Baca dulu ah, di websitenya…

*** meluncur ke web W3C

Reply

Deddy Andaka June 21, 2008 at 4:04 pm

Bisa jadi bli. Klo HTML terlalu galak ntar sebagai user yang kebanyakan ga ngerti masalah kayak gini bisa meradang dunk. Banyak yang kaco ntar tampilan website. Hehe…

Reply

chodirin June 20, 2008 at 8:38 pm

boleh tau gak apa kelebihannya yg standar dg yg gak standar?
masalahnya ada yg mengclaim standar tapi di browser tampilan tetap kacau. bukan blog ini loh.

Reply

dani June 21, 2008 at 3:04 pm

@ chodirin:
kelebihannya mnrt saya cuman lbh gampang dipelihara, dikelola dan diperbaiki..
terutama kl ada salah kode x/html & css yg mempengaruhi tampilan..dg catatan perambannya jg terstandar / mengikuti aturan baku standar web (defacto) rekomendasi w3c..
jika antara peramban dan penulis x/html – css tdk sama2 menggunakan aturan yg baku / standar, yaa.. sepertinya memang tdk ada jaminan tampil aman di semua peramban..cmiiw ya.. πŸ˜€

Reply

ick June 21, 2008 at 11:10 am

he..he… jujur saya ndak ngerti yang begituan… tapi saya mau belajar… mohon bimbingannya… πŸ’‘

Reply

Deddy Andaka June 21, 2008 at 4:06 pm

ayo bli kita belajar sama2… klo ada yang mentok coba aja posting sini. kali aja ada yang tau solusinya…

Reply

ghozan June 21, 2008 at 10:22 pm

barusan cek, lumayan cuma 38 error… hajar satu persatu ah….

Reply

Deddy June 22, 2008 at 9:02 pm

Hajar Gus… sudah berapa sekarang?

Reply

Rozy June 24, 2008 at 9:13 am

Apa kabarnya Mas Deddy?

Mau tanya sedikit nih [dari wong ndeso]…

Apakah ketidak validan halaman sebuah blog mempengaruhi tampilannya di browser yang berbeda? [contoh: tampilan bagus di IE7, tapi hancur di FF atau sebaliknya].

Thanks ya untuk penjelasannya πŸ™‚

Reply

Deddy Andaka June 24, 2008 at 2:22 pm

Kabar saya luar biasa dahsyat mas Rozy πŸ™‚

Menurut pengamatan saya, valid tidaknya sebuah situs tidak mempengaruhi tampilannya di browser. Seperti komentar imsuryawan di atas, HTML dibuat lebih user friendly. So, kesalahan kecil akan diabaikan oleh browser demi kenyamanan pengunjung.

Klo tampilan situs menjadi berbeda pada browser yang berbeda, menurut saya itu karena perbedaan “engine” dari browser itu sendiri. CMIIW

Reply

dani July 23, 2008 at 5:42 am

valid x/html tentu tdk mutlak, kec ada browser yg hanya bs membaca halaman web yg benar2 valid..atau mungkin ini sudah tjd pd halaman yg benar2 xml πŸ™‚

lbh kpd bukan sekadar tampilan, tp fungsi yg dirasakan pengguna jg..

Reply

dani August 28, 2008 at 9:37 pm

maap..lg ngga bs ngedit halaman daftar itu.. πŸ™

Reply

esha di birulangit January 23, 2009 at 11:03 am

Barusan ngecek di web saya…banyak bener errornya….sebenanrnya fungsinya apa seh validasi ini?dan kerugiannya apa kalau tidak divalidasi….?

Reply

ridwan June 24, 2009 at 9:11 pm

saya masih mempunyai masalah dengan xhtml blog saya, pass saya cek dengan w3 seperti dibawah ini:

http://validator.w3.org/check?uri=http://maininternetonline.blogspot.com/

ternyata banyak sekali error pada template saya, kalau bisa tolong saya mas bagaimana cara memecahkan masalahnya, saya betul-betulpening nih tidak kurang dari 450 tag yang error, terima kasih.

bisa dibalas lewat email di: ridwansyarif85@gmail.com

Reply

w3c validation September 26, 2009 at 12:33 am

Salam kenal mas Deddy,..
mendukung gerakan w3c valid untuk Indonesia
w3c valid menurut Opini saya

Reply

Ivan Jaya April 4, 2010 at 9:06 am

Menurut pengamatan saya validasi juga bukan dari template saja tapi juga dari isi content. Terkadang penulisan content membuat blog jadi tidak valid. Misalnya di wordpress isi tulisan dibuat rata kanan dan kiri (justify) secara otomatis tertulis dan setelah saya cek membuat blog tidak valid sehingga saya ganti dengan dan dinilai valid.

Btw, saya ingin bertanya dok: apakah validasi W3C ini juga berpengaruh terhadap SEO?

thanks untuk jawabannya.

Reply

candra amali November 3, 2012 at 2:40 pm

infonya mantap pak bos,
salam kenal ya kami newbie dalam komunitas bloger

Reply

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: