W3 validation (doğrulama) sitenizin tasarımının görünmeyen kısmında yaptığınız değişikliklerle gerçekleşir genelde. Bu doğrulama sitenizin başta Google olmak üzere arama motoru botları tarafından daha kolay indekslenmesini ve daha üst sıralarda çıkmanızı sağlar. Tabii ki sadece bu doğrulamayı sağlayarak sitenizin üst sıralarda çıkmasını sağlayamazsınız fakat bu da bir etkendir.

Daha önceleri pek önem vermediğim bu kurallara şimdi uymaya karar verdim ve sitenin sağ tarafında gördüğünüz gibi XHTML 1.0 ve CSS 2 doğrulamalarını başarıyla geçtim :) Blogun ve anasayfanın tasarımındaki hataları giderdim fakat henüz tüm yazılarımı kontrol etme fırsatım olmadı, yavaş yavaş onları da halledeceğim ;) Bu arada yazılarım da belli başlı değişiklikleri yapmak için şurada anlattığım plugini kullandım.

Gelelim doğrulama kurallarımıza. Öncelikle sitenizdeki hataları bulmak için buraya tıklayarak W3 XHTML doğrulaması kontrolünü yapıyoruz. Burada düzeltmeniz gerekenler Error diye belirtilen hatalardır, Warning kısımlarına göz yumulabilir. Genel olarak karşılaşılan hatalara bir özet geçeceğim. Alttaki kuralların tümü XHTML 1.0 sürümü için geçerlidir.

XHTML sürümü ve sayfanın karakter seti (utf8 gibi) belirtilmeli.
Alınan uyarılar;
- No Character Encoding Found!
- Unable to Determine Parse Mode!
- No Character encoding declared at document level.

Sayfanın en başına ekleyin.

Kod Görünümü
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Head tagları arasına

Kod Görünümü
HTML:
  1. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

iso-8859-9 olarak belirtilen yeri sayfanızın karakter seti ile değiştirin.

Tagların içindeki tüm tanımlamalar küçük harflerle yazılmalı.
Alınan hatalar;
- Attribute "X" is not a valid attribute. Did you mean "x"?

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  2. <A HREF="http://balkoncu.com/blog">Link</a>
  3.  
  4. <!--Doğru-->
  5. <a href="http://balkoncu.com/blog">Link</a>

Kapatılacak tagların tümü kapatılmalı ve bu işlem sırayla olmalı.
Alınan hatalar;
- end tag for element "x" which is not open.
- end tag for "x" omitted, but OMITTAG NO was specified.
- XML Parsing Error: Opening and ending tag mismatch.

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  2. <b><i>yazı</b></i>
  3.  
  4. <!--Doğru-->
  5. <b><i>yazı</i></b>

Kapatma tagı kullanılmayan taglar da (img, br, hr gibi) sonlandırılmalı.
Alınan hatalar;
- End tag for "x" omitted, but OMITTAG NO was specified.
- XML Parsing Error: Opening and ending tag mismatch.

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  3.  
  4. <!--Doğru-->
  5. <br /><hr />

Tüm "img" taglarında "alt" etiketi olmalı.
Alınacak hatalar;
- Required attribute "alt" not specified.

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  2. <img src="resim.jpg" />
  3.  
  4. <!--Doğru-->
  5. <img src="resim.jpg" alt="Yazı" />

Not: alt tagını belirttikten sonra içini boş da bırakabilirsiniz. (alt="" gibi)

"target" değeri direkt olarak yazılmamalı
Alınacak hatalar;
- Attribute "target" exists, but can not be used for this element.

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  2. <a href="http://balkoncu.com/blog" target="_blank">Balkoncu</a>
  3.  
  4. <!--Doğru-->
  5. <a href="http://balkoncu.com/blog" onclick="this.target='_blank';">Balkoncu</a>

Stil için verdiğiniz değerler "style" yada "class" ile belirtilmeli.
Alınacak hatalar;
- Attribute "x" exists, but can not be used for this element.

Kod Görünümü
HTML:
  1. <!--Yanlış-->
  2. <div width="100" height="100">
  3. Balkoncu
  4. </div>
  5.  
  6. <!--Doğru-->
  7. <div style="width: 100px; height: 100px;">
  8. Balkoncu
  9. </div>

Not: Bu hatayı almanızın başka bir sebebi de tag içinde kullanılmayan bir tanımlama kullanmanızdır. Örneğin "img" tagı içinde "name" değeri tanımlayamazsınız, fakat "input" tagında tanımlayabilirsiniz.

Benim anlatacaklarım bu kadar, bunlar genelde karşılaşılan sorunlardı. Başka problemleri yorum olarak yazarsanız yardımcı olmaya çalışırım ;)
Esen kalın. :)

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay