Anlamlı XHTML Kod Yazmak

Tarih : 11 February, 2009 ::
Kategori : Web Standartları, XHTML
:: Etiketler : Erişilebilirlik, W3C, Web Standartları, XHTML

“XHTML’in anlamlısı, anlamsızı olur mu?” demeyin. XHTML’in yaratıcıları onu kullanın diyorlar, ama hemen ardından ekliyorlar, doğru bir şekilde kullanın.

Ne Bu XHTML?

XHTML öz olarak klasik HTML’in düzenlenmiş, genişletilmiş ve XML’in kurallarıyla yeniden oluşturulmuş halidir. Peki, neden böyle bir düzenlemeye gidildi? diye soracak olursanız; dağınık HTML webin ihtiyaçlarına cevap vermiyor ve gelecek vaat etmiyordu. Web uygulamalarındaki gelişim beraberinde, karmaşık süreçler ve platformlar arası entegrasyonu şart koşuyordu. Bu yüzden bu dağınıklığı gidermek, dili tutarlı bir yapı içerisine sokmak gerekmekteydi. Bugünün web uygulamalarına sadece modern bilgisayarlardaki tarayıcılardan bağlanılmıyor. Bugün cep bilgisayarları, cep telefonları, bilgisayarlar, ekran okuyucuları gibi pek çok platformda aynı XHTML kullanılıyor.

Buna ek olarak HTML’i XHTML olarak yeniden formüle etmek, XForms, SVG, XPath gibi XML tabanlı araçların XHTML’e kolayca entegrasyonunu sağlıyor.

Durum böyle olunca ortaya platform bağımsız bir XHTML çıkıyor. Ve XHTML’in işi bize “Burada ne var?” sorusunun cevabını vermek, fazlası değil.

“Burada Ne Var?” Sorusu Da Ne?

Biraz komik bir başlık oldu ama olsun Web’de Altın Kural: Görselliği Ayırın isimli yazımda aslında kısmen bu konuya değinmiştim. Orada da bahsettiğim gibi XHTML’in görevi sadece içeriği oluşturmaktır. Yani, bir web sayfasına ait XHTML koduna baktığımızda, gördüğümüz tek şey o sayfanın içerisinde yer alan başlıklar, linkler, form elemanları ve diğer XHTML unsurlardır.

Tabi eskiden böyle değildi. Daha dünya üzerinde CSS yokken, içeriği ve sunumu oluşturmak görevi HTML’indi. CSS ile XHTML, içeriğimizin nasıl göründüğüyle değil, ne anlama geldiğiyle ilgilenmeye başladı. Bu konuyla ilgili daha detaylı yazıya buradan ulaşabilirsiniz.

Etiketler

Web uygulamalarında içeriği oluştururken, XHTML’in bizlere sunduğu etiketleri kullanırız. Bu etiketler içeriği tanımlama ihtiyaçlarına göre oluşturulmuştur. Mesela içeriğimizdeki paragrafları tanımlamak için <p> etiketini, bir kod bloğu varsa <code> etiketini, bir blok alıntı için <blockquote> etiketini kullanırız. XHTML bize ihtiyacımıza uygun pek çok etiket sunarak anlamlı kod yazmamızı destekliyor…

Anlamlı Kod Yazmak, Hımm!

Bu kavram düne kadar pek kimse tarafından bilinmiyor ve önemsenmiyordu. Web geliştiricilerinin standartlara olan ilgisinin artmasına paralel olarak anlamlı kod yazma kavramı da kabul gördü. Hemen örnekleyelim…

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    	<table width="500" border="0" cellspacing="0" cellpadding="0">
    	  <tr>
    	    <td><a href="#">ANASAYFA</a></td>
    	    <td><a href="#">HAKKIMIZDA</a>;</td>
    	    <td><a href="#">YAZILAR</a>;</td>
    	    <td><a href="#">İLETİŞİM</a></td>
  	    </tr>
  	  </table>
     </td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="250">Yan Kolon</td>
        <td>İçerik</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
</table>

Yukarıdaki XHTML koduna baktığınızda ne olduğunu anlayabildiniz mi? Burada klasik tablo yöntemini kullanarak web sayfamızın bloklarını oluşturduk. Bir de aşağıdakine bakın bakalım…

<div id="Tasiyici">
	<div id="Baslik">
    	<ol id="Navigasyon">
            <li><a href="#">ANASAYFA</a></li>
            <li><a href="#">HAKKIMIZDA</a></li
            <li><a href="#">YAZILAR</a></li
            <li><a href="#">İLETİŞİM</a></li>
        </ol>
    </div>

    <div id="Body">
    	<div id="YanKolon"></div>
        <div id="Icerik"></div>
    </div>

    <div id="Altlik">
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Buradaki örnekte görüldüğü gibi XHTML kod içerisine baktığımızda ne olduğunu kolayca anlayabiliyoruz. Blokları, navigasyonu kolayca seçebiliyoruz. Ayrıca gereksiz etiket kullanmadığımız için hem sayfa boyutu düşmüş oluyor, hem de kafamız karışmıyor. Bunun daha anlaşılır olduğu konusunda sanırım hepimiz hem fikiriz.

Başka bir örnek, aşağıda bir navigasyon örneği var.

<p>
	<a href="#">anasayfa</a><br>
	<a href="#">hakkımızda</a><br>
	<a href="#">yazılar</a><br>
	<a href="#">iletişim</a>
</p>

Bu da anlamlı ve doğru yazılmış bir navigasyon;

<ol id="Navigasyon">
    <li><a href="#">anasayfa</a></li>
    <li><a href="#">hakkımızda</a></li
    <li><a href="#">yazılar</a></li
    <li><a href="#">iletişim</a></li>
</ol>

Bu örnekte, bir paragraf içinde geçen bir cümlede, yazının nerede yayınlandığını ifade etmek istiyoruz.

<span>Bu yazı <span class="nerede">oztecnic.com</span>'da yazıldı.
...
...
</span>

<p>Bu yazı <cite>oztecnic.com</cite>'da yazıldı.
...
...
</p>

Sonuç

Anlamlı XHTML kod yazmak geliştirdiğimiz web uygulamalarını daha erişilebilir kılar. Bu da ziyaretçi memnuniyetini pekiştirir. İçeriği netleştirir, web geliştiricisin algılama süresini fark edilir şekilde aşağı çeker, bu da zamandan ve emekten tasarruf etmemizi sağlar.

Hemen Paylaş!

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 9 adet yorum bulunmaktadır...

Bu Makale 11 February, 2009 ve saat 5:20 itibariyle Web Standartları, XHTML kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...