Web’in ilk yıllarında HTML’in esnek yapısı geliştiricilere büyük özgürlük tanıyordu. Tarayıcılar hataları affeder, eksik etiketleri tamamlardı. Ancak bu durum kod kalitesini düşürdü, sayfaların farklı cihazlarda farklı görünmesine yol açtı. İşte tam da bu noktada devreye XHTML girdi.
XHTML, HTML’i XML’in katı disipliniyle yeniden şekillendiren bir standarttır. Bu sayede belgeler hem insanlar hem de makineler için daha tutarlı hale gelir. Bu makalede XHTML’in ne olduğunu, kurallarını ve günümüzdeki yerini tüm detaylarıyla keşfedeceksiniz.
Yıllar içinde sayısız kurumsal projede XHTML Strict kullanarak edindiğim deneyimleri sizlerle paylaşacağım. Ayrıca W3C doğrulamasından geçen temiz kod yazmanın inceliklerini öğreneceksiniz. Haydi, web standartlarının temel taşına birlikte göz atalım!
XHTML Nedir? Ne İşe Yarar? Temel Tanımı
XHTML, Extensible HyperText Markup Language ifadesinin kısaltmasıdır. Türkçeye en doğru şekliyle Genişletilebilir Köprü Metni Biçimlendirme Dili olarak çevirebiliriz.
Pek çok kaynak Geliştirilebilir Büyütülmüş Metin İşaretleme Dili şeklinde de andığı için kafa karışıklığı yaşayabilirsiniz.
Özünde bir XML Tabanlı İşaretleme Dili olan XHTML, HTML 4.01’in XML kurallarına göre yeniden formüle edilmiş halidir.
Böylelikle belgenin hem HTML esnekliğini hem de XML katılığını barındırması mümkün olur. Web geliştiricileri için bu durum başlangıçta zorlayıcı gelse de uzun vadede büyük fayda sağlar.
XHTML’i anlamak için öncelikle SGML, HTML ve XML arasındaki hiyerarşiyi kavramak gerekir. SGML çok geniş bir işaretleme dili tanımlama standardıdır.
HTML bu standardın bir uygulamasıyken XML daha sade ve katı bir alt kümedir. XHTML ise XML Uygulaması olarak çalışan bir HTML türevidir.
XHTML Açılımı ve Türkçe Karşılığı
Extensible HyperText Markup Language tamlamasındaki “Extensible” sözcüğü dilimize “Genişletilebilir” şeklinde geçmiştir. Ancak “Geliştirilebilir” ifadesi de yaygın biçimde kullanırız.
Her iki çeviriyi de doğru kabul edebiliriz. Ancak W3C belgelerinde resmî Türkçe karşılık olarak Genişletilebilir Köprü Metni Biçimlendirme Dili ismini seçtiler.
Bu uzun isim çoğu zaman kafa karıştırıcı olabilir. Bu nedenle sektörde hemen herkes kısaca XHTML demeyi tercih eder.
Açıkçası ben de yıllardır projelerimde bu kısaltmayı kullanırım. Müşterilerime de teknik dokümanlarda daima XHTML olarak yazmalarını tavsiye ederim.
XHTML’in tam adındaki “Extensible” vurgusu önemlidir. Çünkü bu dil modüler bir yapıya sahiptir. Geliştiriciler ihtiyaca göre farklı modüller ekler.
Dolayısıyla XHTML Basic ve XHTML Mobile Profile gibi türevler oluştururlar. Bu da onu salt HTML’den ayıran en büyük özelliklerden biridir.
XHTML, HTML ve XML Arasındaki İlişki
HTML uzun yıllar boyunca SGML’in bir uygulaması olarak hayatımızda yer aldı. Ancak HTML’in hatalara karşı toleranslı yapısı ciddi kod kirliliğine neden oldu. Özellikle farklı tarayıcı motorları aynı sayfayı bambaşka şekillerde yorumlamaya başladı.
W3C bu sorunu çözmek için XML’i temel alan bir çözüm arayışına girdi. XML sıkı sözdizimi kuralları sayesinde belgelerin düzgün biçimli olmasını garanti eder.
İşte XHTML tam olarak bu noktada doğdu. HTML’in bilindik etiketlerini XML disipliniyle birleştirdi.
Sistemler bu birleşim sayesinde XHTML belgelerini kullanır. Üstelik bu belgeleri geçerli birer XML dosyası gibi işleyebilirler.
Tarayıcılar HTML Parsing yerine XML Parsing kullanarak sayfayı çok daha hızlı analiz eder. Netice itibarıyla daha tutarlı bir kullanıcı deneyimi ortaya çıkar.
| Özellik | HTML | XHTML | XML |
|---|---|---|---|
| Temel Aldığı Standart | SGML | XML | SGML (Alt Küme) |
| Hata Toleransı | Yüksek | Düşük (Sıfır Tolerans) | Yok |
| Etiket Kapatma | Opsiyonel | Zorunlu | Zorunlu |
| Büyük/Küçük Harf | Duyarsız | Küçük Harf Zorunlu | Duyarlı |
Yukarıdaki tablo üç dil arasındaki temel farkları net biçimde ortaya koyar. Katı HTML standardı, XML’in tüm kurallarına uymak zorunda olduğu için çok daha disiplinlidir. Bu disiplin başlangıçta can sıkıcı gelebilir. Ancak projelerin ömrünü katbekat artırır.
XHTML’in Tarihçesi: 1.0’dan 2.0 Çalışma Taslağına
İlk sürümü olan 1.0, 2000 yılının başında W3C Tavsiyesi statüsü kazandı. Bu sürüm HTML 4.01’in üç farklı DTD’sini aynen miras aldı: Strict, Transitional ve Frameset. Geliştiriciler projelerinin ihtiyacına göre bu DTD’lerden birini seçebiliyordu.
2001 yılında “XHTML 1.1” yayımladılar. Bu sürümde modülerleştirme fikri ön plana çıktı. Modularization sayesinde dil çekirdeğini parçalara ayırdılar. Böylece cep telefonları gibi kısıtlı cihazlar için özel profiller tasarladı. Örneğin bu tasarımlar için XHTML Basic ismini tercih ettiler.
Ancak asıl büyük değişim rüzgarı 2.0 Çalışma Taslağı ile esmeye başladı. W3C bu sürümde geriye dönük uyumluluğu tamamen kırmayı hedefliyordu.
Eski HTML etiketlerinin çoğu atılıyor, tamamen yeni bir yapı kuruluyordu. Ne var ki bu radikal yaklaşım geliştirici topluluğundan büyük tepki gördü.
XHTML’in Altın Kuralları: Well-Formed Belge Oluşturma
XHTML ile çalışırken aklınızdan çıkarmamanız gereken en önemli kavram Well-Formed Belge’dir. Yani düzgün biçimli belge. Bu kavram XML dünyasından gelir. Bir belgenin geçerli sayılabilmesi için belirli sözdizimi kurallarına harfiyen uyması şarttır.
Klasik HTML’de bir etiketi kapatmayı unutsanız bile tarayıcı sayfayı göstermeye devam eder. Quirks Mode devreye girer, sayfa bir şekilde çalışır.
Lakin en ufak bir hata dahi sayfanın tamamen bozulmasına yol açabilir. Bu katılık ilk başta korkutucu gelse de aslında en büyük kurtarıcınızdır.
Şimdi, sizlere XHTML’in altın kurallarını adım adım anlatacağım. Bu kurallara sadık kaldığınız sürece yazdığınız kodlar her ortamda aynı şekilde çalışır. Ayrıca kodunuzun bakımı ve başkaları tarafından anlaşılması da inanılmaz kolaylaşır.
DOCTYPE Bildirimi ve DTD Seçimi (Strict, Transitional, Frameset)
Her XHTML belgesi mutlaka bir DOCTYPE Bildirimi ile başlamak zorundadır. Bu bildirim tarayıcıya belgenin hangi kurallar dizisine göre yorumlanacağını söyler.
Aksi takdirde tarayıcı Standart Mod yerine Quirks Mode’da çalışır. Bu da ciddi görüntüleme sorunlarına yol açar.
XHTML için üç temel DTD seçeneği vardır. XHTML Strict en katı olanıdır. Sunumla ilgili tüm etiket ve öznitelikleri yasaklar.
İçerik-Stil Ayrımı prensibini tavizsiz uygular. Transitional yapısını geçiş dönemi için hazırladılar. Eski tarayıcılarla uyumlu olmak adına <font> gibi biçimlendirme etiketlerine izin verir. Frameset DTD ise adından da anlaşılacağı üzere çerçeve tabanlı sayfalar içindir.
Aşağıda üç farklı DTD için kullanmanız gereken DOCTYPE satırlarını görebilirsiniz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Strict Transitional Farkı konusunda kafanız karışırsa şunu unutmayın: Strict geleceğe, Transitional ise geçmişe dönük uyumluluk içindir.
Ben şahsen tüm yeni projelerimde Strict kullanırım. Eski bir projeyi dönüştürüyorsam Transitional ile başlayıp kodu temizledikten sonra Strict’e geçerim.
World Wide Web’in ilk zamanları şimdikinden çok daha kaotikti. Geliştiriciler her tarayıcıya ayrı kod yazmak zorunda kalıyordu. İşin aslı şu ki, bu durum maliyetleri inanılmaz artırdı. Neyse ki standartlar imdada yetişti.
XML Namespace (xmlns) ve Dil Tanımlaması
XHTML belgelerinde <html> etiketi mutlaka bir xmlns Özelliği içermelidir. Bu öznitelik XML Namespace tanımlar. Varsayılan ad alanı http://www.w3.org/1999/xhtml şeklindedir. Bu nedenle tarayıcı belgedeki etiketlerin hangi sözlüğe ait olduğunu kesin olarak bilir.
Ayrıca belgenin dilini de belirtmek erişilebilirlik açısından şarttır. Bunun için xml:lang ve lang özniteliklerini birlikte kullanırız. Türkçe bir site için xml:lang="tr" lang="tr" şeklinde tanımlama yapabiliriz. Bu küçük detay ekran okuyucuların doğru telaffuz yapmasını sağlar.
Doğru bir <html> etiketi şu şekilde görünmelidir:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
Bu yapı hem W3C standartlarına uygundur üstüne üstelik tarayıcı uyumluluğunu garanti altına alır. İşaretleme doğrulama sırasında da bu satırı kontrol ederiz.
Etiketlerin Doğru Kapatılması ve İç İçe Geçme Kuralları
XHTML kullanırken açtığınız her etiketi mutlaka kapatmanız gerekir. HTML’de <p> yazıp kapatmadan devam edebilirsiniz. Ancak XHTML sizi bu konuda asla affetmez. Belgeniz geçersiz sayılır ve tarayıcı hata verir.
İçerik içermeyen etiketler için Kendiliğinden Kapanan Etiket (Self-Closing Tag) yöntemi kullanmalısınız. Örneğin satır sonu için <br />, yatay çizgi için <hr /> yazılır. Boşluk ve eğik çizgi karakterine dikkat etmelisiniz.
İç İçe Geçme Kuralları da HTML’e kıyasla çok daha katıdır. Etiketleri açtığınız sıranın tam tersiyle kapatmanız gerekir. Böylece hiyerarşiyi doğru şekilde korursunuz. Örneğin önce <em> sonra <strong> açtıysanız, önce </strong> sonra </em> ile kapatmalısınız.
Aşağıda doğru ve yanlış kullanımları karşılaştıralım:
- Yanlış:
<p>Bu bir <strong><em>vurgulu</strong> metin</em>.</p> - Doğru:
<p>Bu bir <strong><em>vurgulu</em></strong> metin.</p> - Yanlış:
<br> - Doğru:
<br /> - Yanlış:
<P>Başlık</p> - Doğru:
<p>Başlık</p>
Tüm etiket ve öznitelik isimlerini küçük harfle yazmanız gerekir. Büyük harf kullanımı XHTML’de geçersizdir. Bu kurala uymak başlangıçta alışkanlık gerektirse de kısa sürede otomatikleşir.
Öznitelik Değerlerinde Tırnak Kullanımı ve Boşluk Bırakma
Öznitelikleri kullanırken tüm değerleri çift tırnak içine almalısınız. HTML’de sayısal değerleri veya tek kelimelik ifadeleri tırnaksız yazabilirsiniz.
XHTML’de bu mümkün değildir. Örneğin <table border=1> geçersizdir. Doğrusu <table border="1"> şeklindedir.
Öznitelik kısaltmaları da yasaktır. HTML’de <option selected> yazmak yeterlidir. Oysa bu dilde tam olarak <option selected="selected"> yazmanız gerekir.
Aynı kural checked, disabled, readonly gibi diğer Boolean öznitelikler için de geçerlidir.
Boşluk Bırakma kuralları kod okunabilirliği açısından önemlidir. Öznitelikler arasında en az bir boşluk karakteri bulunmalıdır. Ancak <br /> etiketindeki boşluğa dikkat edin. Eğik çizgiden önce bir boşluk bırakmak eski tarayıcılarla uyumu artırır.
XHTML Belgesinin Anatomisi: Head, Body ve Karakter Kodlaması
Geçerli bir XHTML belgesi oluşturmak için belirli bir iskelet yapıya sadık kalmak şarttır. Bu yapı <html>, <head> ve <body> olmak üzere üç ana bölümden oluşur. Her bir bölümün kendine özgü kuralları ve zorunlu öğeleri vardır.
Head bölümü belge hakkında meta bilgiler içerir. Tarayıcıya ve arama motorlarına sayfanın nasıl işleneceğini anlatır. Body bölümü ise kullanıcının ekranda gördüğü asıl içeriği barındırır. Bu iki bölüm arasındaki ayrım XHTML’de çok nettir.
Karakter Kodlaması ise belgenizin farklı dillerde ve alfabelerde doğru görüntülenmesini sağlar. Özellikle Türkçe karakter sorunu yaşamamak için bu konuya azami özen göstermelisiniz. Aksi takdirde ‘İ’, ‘ı’, ‘ğ’, ‘ş’ gibi harfleri bozacaksınız.
XHTML Head Yapısı: Title, Meta ve Link Etiketleri
Head Yapısı içinde mutlaka bir <title> etiketi bulunmalıdır. Bu etiket tarayıcı sekmesinde görünen başlığı belirler. Ayrıca arama motorları için de en önemli sinyallerden biridir. Boş bırakılması veya unutulması XHTML doğrulamasından geçemez.
Meta etiketleri sayfanın karakter setini, açıklamasını ve anahtar kelimelerini tanımlar. XHTML’de meta etiketleri de kendiliğinden kapanan etiketler arasındadır.
Örneğin karakter seti bildirimi şu şekilde yaparız: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />.
Link etiketleri ise harici kaynakları sayfaya bağlamakda kullanırız. En yaygın kullanımı CSS dosyalarını dahil etmektir. XHTML CSS Uyumu açısından link etiketinin doğru biçimlendirilmesi şarttır. Aşağıda bir XHTML head bölümü örneği görebilirsiniz:
<head>
<title>XHTML Rehberi | sysnettechsolutions.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="XHTML nedir ve nasıl kullanılır?" />
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
Başlık, meta ve link etiketlerinin sırası performans açısından önemlidir. Karakter setini mümkün olduğunca erken bildirmeniz gerekir. Aksi takdirde tarayıcı sayfayı yanlış kodlamayla işlemeye başlayabilir.
XHTML’de Karakter Kodlaması: UTF-8 ve ISO-8859-9
XHTML Karakter Seti seçimi özellikle Türkçe içerik üretenler için kritik bir konudur. UTF-8 günümüzde evrensel standart haline gelmiştir. Dünya üzerindeki neredeyse tüm yazı sistemlerini destekler. Ben tüm projelerimde istisnasız UTF-8 kullanırım.
ISO-8859-9 ise Latin-5 olarak da biliyoruz. Türkçe karakterleri destekleyen eski bir kodlama sistemidir. Ancak UTF-8 kadar esnek değildir.
Yine de bazı eski kurumsal sistemler hâlâ bu kodlamayı kullanıyor. Bu nedenle, onun varlığını bilmeniz faydalı.
XHTML belgesinde karakter kodlamasını iki farklı şekilde belirtebilirsiniz. Birincisi yukarıda gösterdiğim meta etiketi yöntemidir.
İkincisi ise XML bildirimi içinde belirtmektir: <?xml version="1.0" encoding="UTF-8"?>. Her iki yöntem de geçerlidir; ancak kullanıcılar meta etiketi daha yaygın olarak kullanır.
Türkçe Karakter Sorunu yaşamamak için dosyalarınızı daima UTF-8 olarak kaydedin. Kod editörünüzün ayarlarından bunu varsayılan yapın. Ayrıca veritabanı bağlantılarınızda da UTF-8 kullanmaya özen gösterin. Bu basit önlemler baş ağrılarınızın çoğunu ortadan kaldırır.
Body Etiketi ve Semantik İşaretleme Temelleri
XHTML Body Etiketi belgenin görünür kısmını sarmalar. Bu bölümde kullanacağınız etiketlerin anlamsal bir bütünlük taşıması gerekir. Semantik İşaretleme kavramı tam da burada devreye girer. İçeriğinizi sadece görsel olarak değil anlamsal olarak da doğru etiketlemeniz şarttır.
Örneğin bir başlık için <h1> kullanmak yerine <span> etiketini büyütüp kalınlaştırmak büyük hatadır. Arama motorları ve ekran okuyucular sayfanın yapısını başlık etiketleri üzerinden anlar. Bu nedenle Öğe Hiyerarşisine uygun hareket etmelisiniz.
Paragraflar için <p>, listeler için <ul> veya <ol>, alıntılar için <blockquote> kullanılmalıdır. Bu etiketlerin her birinin kendine özgü bir anlamı vardır. Doğru kullanıldığında hem web sayfası daha erişilebilir olur üstelik SEO performansı artar.
XHTML ile HTML Arasındaki Temel Farklar ve Güncel Durum
Geliştiriciler yıllardır HTML ve XHTML farkı konusunu tartışıyor. Aslında özünde ikisi de aynı etiketleri kullanır. Ancak yazım kuralları ve işlenme biçimleri arasında dağlar kadar fark vardır. Bu farkları öğrenerek, bilinçli bir tercih yapabilirsiniz.
Günümüzde HTML5 ve XHTML arasındaki çizgiler biraz bulanıklaşmıştır. HTML5 hem HTML serileştirmesini hem de XML serileştirmesini destekler.
Yani ister esnek HTML gibi ister katı XHTML gibi yazabilirsiniz. Bu da geliştiricilere büyük bir özgürlük alanı tanır. Ne var ki pek çok kişi HTML5’in gelişiyle XHTML’in tamamen öldüğünü düşünür. Bu büyük bir yanılgıdır.
Getirdiği disiplin ve temiz kod anlayışı hala çoğu kurumsal projede hayati önem taşır. EPUB gibi formatların temelinde olduğunu görüyoruz. Üstelik bu yapı dijital yayıncılığın çekirdeğini oluşturur.
HTML ve XHTML Farkları: Karşılaştırma Tablosu
Aşağıdaki tablo HTML ile XHTML arasındaki temel farkları maddeler halinde özetler. Bu tabloyu incelediğinizde XHTML’in neden daha sıkı kurallara sahip olduğunu daha net göreceksiniz.
| Kriter | HTML (Klasik) | XHTML |
|---|---|---|
| DOCTYPE Zorunluluğu | Opsiyonel, ancak tavsiye ederiz. | Zorunlu |
| Etiket Kapatma | Bazı etiketler kapatılmayabilir | Tüm etiketleri kapatmalısınız. |
| Boş Etiketler | <br>, <hr> | <br />, <hr /> |
| Büyük/Küçük Harf | Duyarsız (<P> geçerli) | Küçük harf zorunlu (<p>) |
| Öznitelik Tırnak | Opsiyonel (border=1) | Zorunlu (border=”1″) |
| Öznitelik Kısaltma | Geçerli (selected) | Geçersiz (selected=”selected”) |
| Kök Ad Alanı | Yok | xmlns zorunlu |
| Hata Toleransı | Yüksek | Çok düşük |
Bu tablo XHTML kuralları Nelerdir sorusunun en net cevabıdır. Gördüğünüz gibi XHTML geliştiriciye çok daha az hata payı bırakır. Ancak bu katılık aynı zamanda kodun her ortamda aynı sonucu vermesini garanti eder.
XHTML ve HTML5 İlişkisi: Geçiş Süreci ve Birlikte Yaşam
XHTML ve HTML5 İlişkisi çoğu kişinin kafasını karıştıran bir konudur. HTML5 aslında hem HTML hem de XHTML yazım stillerini destekleyen bir şemsiye terimdir.
Siz kodunuzu ister <br> ister <br /> şeklinde yazın, HTML5 ayrıştırıcısı her ikisini de doğru yorumlar.
Bu esneklik sayesinde XHTML’in katı disiplinini sevenler için bir engel kalmamıştır. İstediğiniz gibi Well-Formed Belge oluşturabilirsiniz.
Tarayıcı Motoru ister Gecko, ister WebKit, ister Blink olsun sayfanız sorunsuz çalışır. Bu durum bana göre web standartları açısından büyük bir zaferdir.
Geçiş dönemi boyunca bir çok site XHTML Transitional ile HTML5 arasında gidip geldi. Ancak günümüzde artık net bir yol haritası var.
Temiz kod yazmak istiyorsanız XHTML sözdizimini benimseyin. Daha serbest bir ortam tercih ediyorsanız HTML stiliyle devam edin.
XHTML 2.0 Neden İptal Edildi?
XHTML 2.0 neden iptal oldu sorusu web tarihinin en ilginç dönemeçlerinden birine ışık tutar. W3C 2000’li yılların ortasında XHTML 2.0 üzerinde hararetle çalışıyordu.
Hedef web’i tamamen XML tabanlı, katı kurallı bir yapıya dönüştürmekti. Ancak bu vizyon geriye dönük uyumluluğu tamamen yok sayıyordu.
Geliştiriciler mevcut milyonlarca HTML sayfasının bir anda çöp olması fikrine şiddetle karşı çıktı. Ayrıca tarayıcı üreticileri de bu kadar büyük bir değişime sıcak bakmadı.
Bu sırada Apple, Mozilla ve Opera temsilcileri WHATWG adlı ayrı bir grup kurdu. Bu grup HTML’in evrimini sürdürmeye odaklandı.
Sonuç olarak W3C geri adım attı. 2009 yılında “2.0 Çalışma Taslağı” rafa kaldırdılar. Tüm enerjilerini HTML5’e yönlendirdiler.
Ancak XHTML ruhu asla ölmedi. HTML5’in XML serileştirmesi sayesinde tüm güzellikleri yaşamaya devam ediyor.
XHTML Doğrulama (Validation) ve Hata Ayıklama Rehberi
XHTML yazarken en büyük yardımcınız W3C Validator (Doğrulayıcı) olacaktır. Bu araç sayfanızın standartlara uygunluğunu saniyeler içinde test eder. Hata Ayıklama sürecinde size yol gösterir. Ben her projemi bitirdiğimde mutlaka doğrulamadan geçiririm.
Doğrulama işlemi yalnızca bir formalite değildir. Gerçek anlamda tarayıcı uyumluluğu sağlar. Özellikle farklı cihazlarda ve tarayıcılarda test yapma imkanınız yoksa bu araç hayat kurtarıcıdır. Ayrıca arama motorları da geçerli kodu daha kolay tarar.
Şimdi de W3C doğrulayıcısının nasıl kullanılacağına adım adım bakalım. Ardından en sık yapılan XHTML hataları listesini paylaşacağım. Son olarak da gizli bir tehlike olan MIME Type Hatası konusunu tüm detaylarıyla ele alacağım.
W3C Markup Validation Service Kullanımı
W3C Markup Validation Service tamamen ücretsiz bir çevrimiçi araçtır. Adres çubuğuna validator.w3.org yazmanız yeterlidir. Karşınıza üç farklı doğrulama seçeneği çıkar. Sayfanızın URL’sini yazabilir, dosya yükleyebilir veya doğrudan kodunuzu yapıştırabilirsiniz.
Sistem, doğrulama işlemi tamamlandığında size bir rapor sunar. Yeşil bir onay mesajı görürseniz belgeniz geçerlidir. Kırmızı hatalar çıkarsa endişelenmeyin. Her hatanın altında hangi satırda sorun olduğu ve muhtemel çözümü yazar. Bu açıklamaları dikkatlice okuyun.
Kodunuzu düzeltip tekrar doğrulayın. Bu işlemi tüm hatalar temizlenene kadar tekrarlayın. İşaretleme Doğrulama rozetini sitenize eklemek isterseniz W3C size özel bir kod parçası da verir. Ancak bu rozet zorunlu değildir.
Sık Yapılan XHTML Hataları ve Çözümleri
İşte XHTML ile çalışırken en sık karşılaştığım hatalar ve pratik çözümleri:
- Kapatılmamış Paragraf Etiketi: Her
<p>için mutlaka bir</p>bulunmalıdır. Kodu gözden geçirirken açılış ve kapanış etiketlerini eşleştirin. - Büyük Harf Kullanımı:
<DIV>yerine<div>yazmalısınız. Büyük/küçük harf duyarlılığı XHTML’in temel taşlarından biridir. - Tırnak İçine Alınmamış Öznitelik:
<img src=resim.jpg />yanlıştır. Doğrusu<img src="resim.jpg" />şeklindedir. - Yanlış Yuvalama: Etiketleri doğru sırayla kapatın. Açtığınız son etiketi ilk önce kapatın.
- Ampersand (&) Karakteri: Bağlantılarda & işareti yerine mutlaka
&kullanın. Aksi takdirde XML ayrıştırıcı hata verir. - Eksik xmlns:
<html>etiketine xmlns özelliğini eklemeyi unutmayın. Bu kurala uymazsanız belgeniz geçerliliğini yitirir. Aksine, tarayıcılar dosyanızı geçersiz sayar.
Bu hataların çoğu küçük dikkatsizliklerden kaynaklanır. Ancak sonuçları büyük olabilir. Neyse ki modern kod editörleri bu hataları anında yakalayıp sizi uyarır. Ben şahsen Visual Studio Code kullanıyorum ve XHTML yazarken eklentilerden büyük destek alıyorum.
MIME Type Hatası: text/html mi, application/xhtml+xml mi?
XHTML MIME Type Hatası belki de en az bilinen ama en can sıkıcı sorunlardan biridir.
Belgenizi sunucudan gönderirken doğru MIME Türü kullanmalısınız. İki seçeneğiniz var: text/html veya application/xhtml+xml.
text/html kullanırsanız tarayıcı belgeyi HTML gibi işler. Bu durumda XHTML yazım kurallarına uysanız bile belge HTML ayrıştırıcısından geçer.
Hata toleransı devreye girer. Eğer application/xhtml+xml kullanırsanız belge katı XML ayrıştırıcısı ile işlenir. En ufak hatada sayfa beyaz ekran verir.
Peki hangisini tercih etmelisiniz? Cevap projenizin hedef kitlesine bağlıdır. Eski tarayıcıları desteklemeniz gerekiyorsa text/html daha güvenlidir.
Tamamen modern bir kitleye hitap ediyorsanız application/xhtml+xml kullanarak XHTML’in tüm avantajlarından yararlanabilirsiniz.
Ben şahsen kurumsal projelerde text/html kullanmayı tercih ediyorum. Yani kullanıcılarımın hiçbiri teknik bir hatayla karşılaşmıyor.
Ancak kodumu daima XHTML Strict kurallarına uygun yazıyorum. Böylece Bozulmadan Çalışma prensibine sadık kalmış oluyorum.
XHTML’in Avantajları, Dezavantajları ve Kullanım Alanları
Her teknoloji gibi XHTML avantajları & dezavantajları birlikte barındırır. Bu bölümde objektif bir değerlendirme yapacağım. XHTML neden kullanılır sorusuna sahadan gerçek örneklerle cevap vereceğim. Ayrıca hangi durumlarda alternatif arayışına girmeniz gerektiğini de açıklayacağım.
XHTML eksikleri konusunda da dürüst olacağım. Çünkü hiçbir teknoloji her derde deva değildir. Önemli olan ihtiyacınıza en uygun aracı seçmektir. Bu bölümü okuduktan sonra bilinçli bir karar verebileceğinize inanıyorum.
Ayrıca XHTML günümüzde nerelerde kullanılır diye düşünsenizde tatmin edici cevaplar bulacaksınız. Zira pek fazla kişi XHTML’in artık kullanılmadığını düşünür. Oysa gerçek çok daha farklıdır.
XHTML Avantajları: Temiz Kod, Erişilebilirlik ve SEO
XHTML avantajları listesinin en başında temiz kod gelir. Katı kurallar sayesinde kodunuz her zaman düzenli kalır. Bu da projenin sürdürülebilirliğini artırır. Ekibe yeni katılan bir geliştirici kodu çok daha hızlı anlar.
Erişilebilirlik Standartları açısından XHTML rakipsizdir. WCAG ve WAI-ARIA gibi yönergelerle tam uyum içindedir. Ekran okuyucu uyumluluğu üst düzeydedir. Bundan dolayı engelli kullanıcılar da sitenizi sorunsuz ziyaret edebilir.
XHTML ve SEO arasındaki güçlü ilişkiyi asla göz ardı edemezsiniz. Arama motorları düzgün biçimli belgeleri daha kolay tarar.
Hiyerarşik başlık yapısı, içeriğinizi daha iyi anlamanızı sağlar. Mobil Uyumluluk ve Duyarlı Web Tasarımı ile birleştiğinde sıralamalarda yükselmeniz kaçınılmaz olur.
Aşağıda XHTML’in öne çıkan avantajlarını maddeler halinde bulabilirsiniz:
- Kodun her ortamda aynı sonucu vermesi (Tarayıcı Uyumluluğu)
- Daha hızlı sayfa yükleme süreleri
- Daha düşük bant genişliği kullanımı
- Geleceğe dönük uyumluluk (Future-proof)
- Mobil cihazlarda ve yazıcılarda tutarlı görüntü
XHTML Dezavantajları ve Eksikleri
XHTML’in en büyük dezavantajı şüphesiz hata toleransının olmamasıdır. Tek bir küçük yazım hatası tüm sayfanın çökmesine neden olabilir. Bu durum özellikle yeni başlayanlar için moral bozucudur. Aynı zamanda canlı ortamda ciddi itibar kaybına yol açabilir.
Bir diğer dezavantaj ise eski tarayıcılarla uyumsuzluk riskidir. Internet Explorer’ın çok eski sürümleri application/xhtml+xml MIME türünü desteklemez. Bu da ekstra kod yazmanızı gerektirir. Neyse ki günümüzde bu tarayıcıların kullanım oranı yok denecek kadar azdır.
XHTML öğrenme rehberi arayanlar için başlangıç eğrisi biraz diktir. HTML’den gelen alışkanlıkları kırmak zaman alabilir. Ancak bir kez alıştığınızda bir daha eskiye dönmek istemezsiniz. Ben bu süreci disiplinli bir sporcu gibi düşünmenizi tavsiye ederim.
İşte XHTML’in başlıca dezavantajları:
- Sıfır hata toleransı (Kırılgan yapı)
- Eski tarayıcılarla kısmi uyumsuzluk
- Daha uzun kod yazma süresi
- Dinamik içerik üretirken ekstra dikkat gerektirmesi
- Bazı JavaScript kütüphaneleriyle yaşanabilen DOM Manipülasyonu sorunları
DOM manipülasyonu bazı eski kütüphanelerde sorun çıkarabiliyor. XHTML’in katı yapısı burada devreye giriyor. Doğru API çağrılarıyla belge yapısını korumak şarttır. Bu noktayı özellikle vurgulamak istiyorum, aksi halde sayfa çökebilir.
XHTML Günümüzde Nerelerde Kullanılır?
Sanılanın aksine pek çok alanda XHTML kullanıyoruz. Üstelik bu teknoloji hala aktif olarak yer alıyor. En yaygın kullanım alanı EPUB formatındaki e-kitaplardır.
Bir EPUB dosyasının içeriğini açtığınızda XHTML ile yazılmış sayfalarla karşılaşırsınız. Bu format XML’in katı kuralları sayesinde farklı cihazlarda tutarlı görüntü sağlar.
Mobil operatörlerin eski WAP portalları da Mobile Profile kullanır. Günümüzde bu teknoloji yerini HTML5’e bırakmış olsa da milyonlarca eski cihaz bu profili destekler. Ayrıca RSS ve Atom beslemeleri de teknik olarak XHTML türevleridir.
Kurumsal şirketlerin içerik yönetim sistemlerinde de rastlamak mümkündür. Yıllar önce Strict DTD ile yazılmış devasa projeler yine de sorunsuz çalışır. Bu projeleri sırf yeni diye HTML5’e dönüştürmek çoğu zaman gereksiz maliyet demektir.
Benim kişisel görüşüm şudur: XHTML asla ölmeyecek. Sadece form değiştirerek varlığını sürdürecek.
Tıpkı COBOL’un hala bankacılık sistemlerinde yaşaması gibi. Web Standartları Projesi temel felsefesini iki ana ilke üzerine kurar.
Geliştiriciler Progressive Enhancement ve Graceful Degradation kavramlarını hayatımıza kattı. Üstelik bu ilkeler güncel web projelerini hala şekillendiriyor. Dolayısıyla modern tasarım anlayışının köklerini bu yapıda görebilirsiniz.
Örnek XHTML Sayfası ve Kod İncelemesi
Teorik bilgileri pratiğe dökmenin tam zamanı. XHTML kod örnekleri incelerken nelere dikkat etmeniz gerektiğini satır satır açıklayacağım.
Artık baştan sona geçerli bir XHTML belgesi Yazalım. Ardından CSS ve JavaScript kullanımı konusuna da değineceğim.
Amacım size doğrudan kopyalayıp kullanabileceğiniz bir şablon sunmak. Aynı zamanda her bir satırın neden o şekilde yazıldığını anlamanızı sağlamak. Bu sayede ileride kendi projelerinizde karşılaştığınız sorunları kendi başınıza çözebileceksiniz.
Hazırsanız kod editörlerinizi açın ve benimle birlikte yazmaya başlayın. Söz veriyorum bu örneği tamamladığınızda XHTML konusunda kendinize güveniniz katlanarak artacak.
Baştan Sona Geçerli Bir XHTML Sayfası
Aşağıda XHTML 1.0 Strict uyumlu eksiksiz bir örnek sayfa bulacaksınız. Bu kodu bir .html veya .xhtml dosyasına kaydedip tarayıcınızda açabilirsiniz. W3C doğrulayıcısından da başarıyla geçecektir.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
<head>
<title>Örnek XHTML Sayfası | SYSNETTECH Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Geçerli bir XHTML 1.0 Strict belgesi örneği." />
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<h1>XHTML Dünyasına Hoş Geldiniz</h1>
<p>Bu sayfa XHTML 1.0 Strict kurallarına tamamen uygundur.</p>
<h2>Kurallar</h2>
<ul>
<li>Tüm etiketler küçük harfle yazılır.</li>
<li>Tüm etiketler kapatılır.</li>
<li>Öznitelik değerleri tırnak içinde verilir.</li>
</ul>
<hr />
<p>Telif Hakkı © 2026 SYSNETTECH Solutions</p>
</body>
</html>
Bu örnek üzerinde birkaç önemli noktaya dikkat çekmek istiyorum. İlk satırdaki XML bildirimi opsiyoneldir ancak karakter kodlamasını kesinleştirir. Biz DOCTYPE bildirimini Strict olarak seçtik. <html> etiketinde xmlns ve dil tanımlamaları eksiksizdir.
<hr /> etiketi kendiliğinden kapanan etiket kuralına uygun yazılmıştır. Son olarak telif işareti için © uygundur.
XHTML ile CSS ve JavaScript Kullanımı
XHTML CSS uyumu konusunda endişelenmenize gerek yok. CSS stilleriyle sorunsuz çalışır.
Harici stil dosyalarını <link /> etiketi ile bağlayabilirsiniz. Alternatif olarak <style> etiketi içinde gömülü stil de kullanabilirsiniz. Ancak gömülü stil kullanırken içeriği CDATA bölümü içine almanız şarttır.
XHTML ile Javascript kullanımı da benzer bir incelik gerektirir. Harici .js dosyalarını <script src="..."></script> ile çağırabilirsiniz.
Sayfa içinde doğrudan JavaScript kodu yazacaksanız yine CDATA bölümü kullanmalısınız. Aşağıda doğru kullanımı görebilirsiniz:
<script type="text/javascript">
// <![CDATA[
alert('XHTML ile JavaScript harika çalışıyor!');
// ]]>
</script>
Unobtrusive JavaScript felsefesini benimsemeniz çalışırken size büyük kolaylık sağlar. Bu yaklaşımda JavaScript kodları HTML içine gömülmez. Bunun yerine DOM işlemiyle olayları dışarıdan bağlarsınız. Bu sayede sayfanız hem daha temiz olur hem de hata ayıklaması kolaylaşır.
Gömülü script kodları XHTML içinde özel muamele istiyor. Doğrudan yazarsanız ayrıştırıcı hata verebilir. Çözüm olarak CDATA bölümlerini kullanmalısınız. Küçük ama etkili bir detay, ben bu hatayı yıllarca gördüm.
XHTML İçin İleri Okuma Kaynaklar
XHTML konusunda daha derinlemesine bilgi edinmek isterseniz aşağıdaki kaynakları mutlaka incelemenizi tavsiye ederim. Bu kaynaklar alanında en güncel ve en güvenilir bilgileri sunar.
- W3C Resmî XHTML 1.0 Tavsiyesi – XHTML’in anayasası niteliğindedir. Tüm kuralların orijinal kaynağıdır.
- WHATWG HTML Standardı – XML Serileştirmesi – HTML5 içinde sözdiziminin nasıl ele alındığını detaylıca açıklar.
- MDN Web Docs – XHTML Rehberi – Mozilla’nın geliştiriciler için hazırladığı kapsamlı kaynaktır.
XHTML Hakkında Merak Edilen 10 Soru
XHTML ile HTML arasındaki en belirgin farklar nelerdir?
kullanırsınız. Bu kurallar sayesinde belgeler her tarayıcıda aynı görünür.
XHTML hala kullanılıyor mu? Günümüzdeki yeri nedir?
XHTML 2.0 neden iptal edildi?
Strict, Transitional ve Frameset arasındaki fark nedir?
XHTML yazarken en sık yapılan hatalar nelerdir?
Belgemi W3C standartlarına göre nasıl doğrulayabilirim?
Mobil cihazlar için önemi nedir? Basic ve Mobile Profile nedir?
XHTML kullanmanın SEO açısından avantajları var mıdır?
XHTML belgesinde application/xhtml+xml ve text/html MIME type farkı nedir?
Geçerli bir XHTML belgesi için olmazsa olmaz 3 kural nedir?
Sonuç: XHTML Öğrenmeye Değer mi?
Kesinlikle evet. XHTML size web’in temel çalışma prensiplerini en saf haliyle öğretir. Katı kuralları sayesinde kod disiplininiz gelişir. Bu disiplin ister HTML5 ister React yazın her ortamda işinize yarar.
XHTML bilgisi sizi daha iyi bir web geliştiricisi yapar. Hataları anında fark etme yeteneğiniz artar. Ayrıca eski projeleri güncellerken veya EPUB gibi formatlarla çalışırken büyük avantaj sağlarsınız. Bu nedenle XHTML öğrenmeye ayıracağınız zaman asla boşa gitmez.
Umarım bu rehber XHTML dünyasına sağlam bir giriş yapmanızı sağlamıştır. Kendi projelerinizde edindiğiniz tecrübeleri benimle paylaşmayı unutmayın. Bir sonraki kapsamlı rehberde görüşmek üzere, temiz kodlar dilerim!
İlk yorumu sen paylaş