5 Manfaat Valid HTML5 Untuk Web Atau Blog

Manfaat Valid HTML5 Untuk Web atau Blog - 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.

#1. 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.


<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'/>

<title>Tes Validasi</title>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>

<p>Ini adalah contoh paragraf

<blockquote>disini blockquote</blockquote>

<p>ini lanjutan juga paragraf</p>

</body>

</html>
Tidak Valid HTML 5


<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'/>

<title>Tes Validasi</title>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>

<p>Ini adalah contoh paragraf</p>

<blockquote>disini blockquote</blockquote>

<p>ini lanjutan juga paragraf</p>

</body>

</html>
Valid HTML 5




<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'/>

<title>Tes Validasi</title>

<style>

*{margin:0;padding:0;}

p{color:#F00;}

blockquote{color:#00F;}

</style>

</head>

<body>

<p>Ini adalah contoh paragraf

<blockquote>disini blockquote</blockquote>

<p>ini lanjutan juga paragraf</p>

</body>

</html>
Tidak Valid HTML Dan CSS


<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'/>

<title>Tes Validasi</title>

<style>

*{margin:0;padding:0;}

p{color:#F00;}

blockquote{color:#00F;}

</style>

</head>

<body>

<p>Ini adalah contoh paragraf</p>

<blockquote>disini blockquote</blockquote>

<p>ini lanjutan juga paragraf</p>

</body>

</html>
Valid HTML Dan 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 ???

#2. 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.

#3. 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
. 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.

#4. Lebih Gampang dalam Parsing

Jika anda penggemar scaping, 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.

#5. 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. 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.
Demikianlah artikel Manfaat Valid HTML5 Untuk Web atau Blog, semoga memberikan informasi yang lebih baik lagi buat Anda.

1 komentar:

Nice post gan.
Punya ane kayanya banyak banget ntu salahnya.

Reply

Posting Komentar