Alasan Kenapa Valid HTML

Rabu, Februari 20, 2013

Belajar untuk memvalidasi HTML merupakan langkah penting bagi kebanyakan desainer. Dengan menulis HTML yang valid, kita memastikan bahwa halaman yang kita buat sudah sesuai dengan standar dan akan berjalan sempurna pada user agent dan browser web.

Membangun halaman web atau blog tidaklah sulit. Dengan perangkat lunak yang tersedia sekarang, kita dapat membuat halaman web dan itupun dapat dicapai dalam waktu setengah jam atau malah kurang. Terus apakah kita perlu menjalankan validator HTML pada halaman yang kita buat untuk menemukan kesalahan? memang semuanya tidak perlu, akan tetapi tetapi jika kita ingin halaman tetap dapat dilihat sempurna melalui beberapa browser yaitu menampilkannya dengan benar, maka menulis HTML valid adalah sesuatu yang memang wajib di penuhi.

Ada beberapa alasan yang spesifik untuk membuat HTML valid, dan disini kita menggunakan validator HTML untuk memastikan bahwa apa yang kita tulis sudah benar.

Kompatibilitas browser HTML dan web

Tidak dipungkiri jikalau dalam pengembangan suatu software pasti akan merujuk pada standarisasi target apalagi jika perangkat lunak tersebut digunakan untuk umum. Begitu pula dengan browser, pasti dalam pembuatan akan mengacu dan sebisa mungkin mendukung standar penulisan HTML dan kali ini sesuai dengan W3C.

Disinilah letak kepentingan sebuah validasi HTML. Kemungkinan jika kita menulis non-standar HTML atau terdapat error, browser tidak akan lagi mendukung halaman web kita atau menampilkan sesutu yang berbeda. Contoh sederhana adalah sebagai berikut coba bandingkan adakah perbedaan dalam tampilan, setelah di normalisasi margin, padding, menjadi 0.

Tidak Valid Tanpa CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='UTF-8'/>
  5. <title>Tes Validasi</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. </style>
  9. </head>
  10. <body>
  11. <p>Ini adalah contoh paragraf
  12. <blockquote>disini blockquote</blockquote>
  13. <p>ini lanjutan juga paragraf</p>
  14. </body>
  15. </html>
Tidak Valid HTML
Valid Tanpa CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='UTF-8'/>
  5. <title>Tes Validasi</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. </style>
  9. </head>
  10. <body>
  11. <p>Ini adalah contoh paragraf</p>
  12. <blockquote>disini blockquote</blockquote>
  13. <p>ini lanjutan juga paragraf</p>
  14. </body>
  15. </html>
Valid HTML
Tidak Valid dengan CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='UTF-8'/>
  5. <title>Tes Validasi</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. p{color:#F00;}
  9. blockquote{color:#00F;}
  10. </style>
  11. </head>
  12. <body>
  13. <p>Ini adalah contoh paragraf
  14. <blockquote>disini blockquote</blockquote>
  15. <p>ini lanjutan juga paragraf</p>
  16. </body>
  17. </html>
Tidak Valid HTML CSS
Valid dengan CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='UTF-8'/>
  5. <title>Tes Validasi</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. p{color:#F00;}
  9. blockquote{color:#00F;}
  10. </style>
  11. </head>
  12. <body>
  13. <p>Ini adalah contoh paragraf</p>
  14. <blockquote>disini blockquote</blockquote>
  15. <p>ini lanjutan juga paragraf</p>
  16. </body>
  17. </html>
Valid HTML CSS

Dari contoh di atas, kemungkinan kita tidak akan melihat perbedaan ketika di tampilkan sebelum penambahan style. Namun bagaimana jika kita sudah menambahkan style pada selector tag tag tersebut. Berbedakah?

Memudahkan Akses Website

Bisa dibayangkan ketika kesalahan ini terjadi dalam artikel ataupun navigasi. Coba bayangkan jika anda menemukan warna tulisan yang sama dengan backgroundnya, apa yang anda lakukan dengan halaman tersebut. Menutupnya atau tetap mencari cara untuk bisa membacanya, saya yakin sebagian besar akan menutup halaman tersebut. Begitulah yang terjadi ketika web blog yang kita punya mengalami hal ini.

Cara diatas tersebut hanya di test 1 browser, kita pasti tahu berapa banyak browser yang digunakan pengunjung untuk membuka blog kita. Nah, tiap browser kemungkinan akan memperlakukan hal berbeda lagi. Makin banyak deh pekerjaan kita jika halaman yang kita buat tidak standar.

Memudahkan Menyelesaikan Kesalahan

Sering kali saya diminta bantuan teman teman untuk memecahkan masalahnya. Kebanyakan yang sering terjadi adalah jarang menutup suatu tag. Mungkin beberapa tag tidak begitu pengaruh seperti tag list, Namun bagaimana jika yang tidak di tutup adalah tag <div>. Ini dia yang sering bikin rusuh tampilan, sidebar melorot, postingan melebar dan yang paling parah adalah blank page.

Nah sudah dipastikan halaman yang seperti ini tidak valid HTML. Jika dari awal pembuatan sudah valid maka pencarian kesalahan akan lebih mudah apalagi dengan editor yang bisa deteksi markup seperti XMLMarker. Akan langsung di tunjukkan dimana tag tag aneh tersebut. Tapi kalau dari awal tidak valid, bisa pusing kepala mencari error yang kadang cuman satu huruf. Untuk yang sering coding pasti pernah mengalami ini.

Lebih Gampang dalam Parsing

Jika anda penggemar scraping, grabing maka anda pasti mengerti manfaatnya. Kita tidak perlu terlalu banyak membutuhkan kode kode untuk mengambil sesutu dari blog tersebut. Nah kemungkinan juga spider SE akan sama memberlakukan hal ini dengan membuat schema tertentu untuk menemukan fokusnya artikel kita dimana, mungkin ini lebih ke schematics web.

Anda pasti tahu juga mengenai struktur data, mungkin orang lebih mengenal dengan sebutan rich snippet, dan kadang orang hanya tahu sebatas rating bintang dulunya. Tapi jika ingin mempelajari schema web pasti mengerti sekali kenapa harus valid html. Salah posisi penempatan itemprop dari itemscope akan memberika arti yang berbeda.

Kalau kita merujuk pada search engine google, pasti menggunakan webmaster tools. Disana terpampang jelas menu struktur data. Hal ini jelas untuk membedakan halaman, dan sangat memudahkan robot untuk parsing dan mengetahui fokus sebuah konten dalam halaman. Dan kalau sampai tidak valid HTML, nilainya akan sangat berbeda. Contoh sederhana sebagai berikut

Contoh Struktur Data Tidak Valid HTML

  1. <p itemscope="itemscope" itemtype="http://schema.org/Person">Perkenalkan Nama saya <span itemprop="name">Bowo Ekowidodo panggilan <span itemprop="givenName">Bowo</span></p>

Contoh Struktur Data Valid HTML

  1. <p itemscope="itemscope" itemtype="http://schema.org/Person">Perkenalkan Nama saya <span itemprop="name">Bowo Ekowidodo</span> panggilan <span itemprop="givenName">Bowo</span></p>

Kita coba jalankan di browser

HTML Valid Struktur Data Penting

Coba kita lihat, tidak ada masalah apapun ketika di tampilkan dalam browser, tampilan masih sama. Dan kadang kita merasa sampai disini sudah selesai tapi tidak menyadari, valid itu bukan tampilan tapi di codenya. Nah apabila kita tes code tersebut dalam rich snippet testing tools maka hasilnya seperti berikut

Kenapa Harus HTML Valid Struktur Data

Setelah melihat hasil tes rich snippet tools diatas sudah bisa membedakan. Yang kotak atas tidak valid yang bawah valid. Sekarang bayangkan ketika struktur datanya sangat banyak, dan numpuk numpuk, misal dalam satu itemscope terdapat itemscope lain pasti hasilnya akan sangat berantakan :D.

Lebih SEO Friendly?

Kalau ngomongin hal ini tidak akan pernah selesai karena mungkin pengalaman sendiri sendiri soal optimasi. Karena sudah saya tegaskan dari awal SEO itu dinamis tidak ada yang pasti. Tapi saya yakin dari beberapa keterangan di atas secara tidak langsung akan membantu dalam SEO. Kalau anda tidak yakin, cobalah sendiri dan rasakan manfaatnya ketika anda malas dalam optimasi offpage. Kalau anda suka optimasi offpage, maaf anda tidak akan merasakan sensasinya.

Kembali lagi Valid HTML sempat menjadi polemik, sama hanya dengan table sama div dan juga desain blogzine dengan non blogzine. Semuanya punya alasan-alasan sendiri. Namun kembali lagi, sebagai seorang tukang coding anda lebih mengedepankan ego atau sebuah standarisasi web. Tidak ada yang memaksa disini, ini pilihan anda, validasi jangan di benturkan dengan SEO, validasi jangan di benturkan dengan kepopuleran, validasi jangan di benturkan dengan keindahan.

Komentar Alasan Kenapa Valid HTML

Jangan menaruh live link dikomentar dan sampai saat ini baru 9 komentar untuk update Alasan Kenapa Valid HTML dengan id 552726869384934337.

DIEKY'S BLOG

akan tetapi saya masih bingung mas dengan Valid HTML5 :D . Oleh sebab itu saya sering meminta pencerahan dari sampeyan ^_^

13/3/13 19:42
Islam, Bukan Hasil Pemikiran Manusia | Remaja Muslim

Hehehhe memang sulit memvalidkan template blogspot itu, dikarenakan source code komentarnya terlalu ribet dan berbelit2.... Kalau pakek worpdress itu mudah, karena dapat di edit di semua bagiannya. :D

14/3/13 13:42
Bowo Ekowidodo Sragen

Ribet bukan berarti ndak bisa kan?

14/3/13 14:13
Saiful Anas

Wew izin hapus lah yang di template biar valid..

5/4/13 16:32
Bocah Poris Blog's

Kalau Bagian Homepage tidak terlalu sulit untuk menvalidkan sekarang,,
tapi kalau bagian artikel bagi saya masih sulit.. harus belajar terus niy...

29/4/13 22:23
Dhonie Blog

hmm jati gitu toh gan alasan kenapa valid HTML 5
thanks gan

29/4/13 22:34
Download Laptop Driver

mantap informasinya bang

31/3/14 22:10
Download software gratis

thanks gan infonya

21/7/14 15:56
Indhosoftshare

thanks gan infonya sangat bermanfaat :)

21/7/14 15:58