HTML Nedir? Web Sayfalarının İskeleti

HTML (HyperText Markup Language, Türkçesiyle "hipermetin işaretleme dili"), bir web sayfasındaki her içeriğin ne olduğunu tarif eden dildir: bu bir başlık, bu bir paragraf, bu bir menü, bu bir görsel, bu bir bağlantı. Tarayıcılar ve arama motorları sayfanızı bu tarif üzerinden okur. Bu yüzden HTML'in düzgün kurulması, sitenizin hem Google'da anlaşılmasını hem de herkes tarafından kullanılabilmesini doğrudan etkiler.

HTML nedir?

MDN'in tanımıyla HTML, web'in en temel yapı taşıdır ve web içeriğinin anlamını ve yapısını tanımlar. Bir web sayfasını bina gibi düşünürseniz:

• HTML taşıyıcı sistemdir: duvarlar, katlar, kapılar.
• CSS iç mimaridir: renkler, yazı tipleri, yerleşim.
• JavaScript tesisattır: düğmeye basınca bir şeyin olmasını sağlar.

Bir HTML parçası şöyle görünür:

“html <h1>Karot Delme Hizmeti</h1> <p>Betonarme duvarlarda 300 mm'ye kadar karot delme yapıyoruz.</p> <a href="/iletisim/">Teklif isteyin</a> “

Burada <h1> sayfanın ana başlığını, <p> bir paragrafı, <a> ise başka bir sayfaya giden bağlantıyı işaretler. Tarayıcı bu etiketleri görüntüye çevirir. Arama motoru ise aynı etiketlerden sayfanın neyle ilgili olduğunu, hangi bilginin daha önemli olduğunu ve hangi sayfalara bağlandığını anlar.

HTML5 ne demek?

"HTML5", 2010'lu yıllarda yaygınlaşan modern HTML'in adıdır. Video ve ses için yerleşik etiketler (<video>, <audio>), çizim alanı (<canvas>) ve anlamlı yapı etiketleri (<header>, <nav>, <main>, <footer>) bu dönemle gelir. Bugün ise ayrı sürüm numaraları yerine tek bir "yaşayan standart" vardır: W3C ile WHATWG, Mayıs 2019'da imzaladıkları mutabakatla HTML'in WHATWG tarafından sürekli güncellenen tek bir belge olarak geliştirilmesinde anlaştı. Yani "HTML6" diye bir sürüm beklemenize gerek yok; standart küçük adımlarla güncelleniyor.

Nasıl çalışır?

Birisi sitenize girdiğinde süreç kabaca şöyle işler:

1. Tarayıcı, sunucudan sayfanın HTML dosyasını ister ve alır (bu iletişim HTTP ya da HTTPS üzerinden olur; ayrıntısı HTTP ve HTTPS farkı yazımızda).
2. HTML'i baştan sona okur ve sayfanın bir ağaç yapısını kurar.
3. HTML'in içinde adı geçen CSS, JavaScript, görsel ve font dosyalarını ayrıca indirir.
4. Hepsini birleştirip ekrana çizer.

Arama motoru tarayıcısı (Google için Googlebot) da benzer biçimde çalışır. Google, bağlantıları güvenilir biçimde takip edebilmesi için bunların href niteliği olan gerçek <a> etiketleri olması gerektiğini belirtiyor. Yalnızca JavaScript'le tıklanabilir hale getirilmiş bir <div> ya da <span>, ziyaretçi için çalışsa bile arama motoru için bir bağlantı olmayabilir.

Web sitenize ve işinize etkisi

HTML'i kendiniz yazmayacak olabilirsiniz. Yine de sitenizin HTML kalitesi şu dört alanda doğrudan sonuç doğurur:

1. Arama motorlarında anlaşılma

Başlık etiketleri (<h1>–<h6>) bir kitabın bölüm başlıkları gibidir. Her sayfada konuyu anlatan bir ana başlık ve mantıklı bir alt başlık sırası olması, hem okurun hem arama motorunun sayfayı hızlı kavramasını sağlar. Sayfa başlığı (<title>) ve meta açıklama da HTML'in bir parçasıdır ve arama sonucunda nasıl göründüğünüzü etkiler. Bu konunun genel çerçevesini SEO nedir yazımızda anlattık.

2. Erişilebilirlik

Görme engelli kullanıcılar sayfaları ekran okuyucularla dinler. Ekran okuyucu, görselin ne olduğunu alt niteliğinden, sayfanın bölümlerini <nav>, <main> gibi anlamlı etiketlerden, form alanlarının ne istediğini <label> etiketlerinden öğrenir. Bunlar eksikse sayfa bu kullanıcılar için büyük ölçüde kullanılamaz. Google da bir görsel bağlantıysa, görselin alt metnini bağlantı metni olarak kullandığını belirtiyor. Yani iyi bir alt metin hem insana hem arama motoruna hizmet eder.

3. Hız

Gereksiz iç içe kutularla şişirilmiş bir HTML, tarayıcının daha fazla iş yapmasına yol açar. Özellikle bazı sayfa oluşturucular, basit bir bölüm için bile çok katmanlı yapı üretebilir. Bu, tek başına siteyi çökertmez ama telefonda yavaşlık hissine katkıda bulunur.

4. Bakım ve taşınabilirlik

Anlamlı ve düzenli HTML, sitenizi yıllar sonra başka bir ekibe devrettiğinizde ya da yeniden tasarladığınızda işleri kolaylaştırır. İçerik yapı olarak doğru işaretlendiyse görünümü değiştirmek için içeriğe dokunmak gerekmez.

Sık yapılan hatalar

• Başlık etiketlerini görünüm için kullanmak: "Bu yazı büyük olsun" diye her şeyi <h1> yapmak ya da başlık sırasını atlamak. Boyut CSS'in işidir; başlık etiketi anlamı belirtir.
• Görsellerde alt metin olmaması ya da alt metne anahtar kelime yığılması. Alt metin görseli kısaca ve doğal biçimde anlatmalıdır.
• Önemli metni görselin içine gömmek: Afiş görselinin içindeki "Kampanya 31 Aralık'a kadar" yazısını arama motoru da ekran okuyucu da metin olarak okuyamaz.
• Bağlantı yerine tıklanabilir kutu: Menü ya da düğmelerin gerçek <a href> bağlantısı olmaması.
• "Buraya tıklayın" bağlantıları: Bağlantı metni, gittiği sayfayı anlatmalıdır.
• Formlarda etiketsiz alanlar: Yalnızca gri yer tutucu metinle bırakılmış form alanları, yazmaya başlayınca kaybolur ve ekran okuyucular için belirsizdir.

Bizim deneyimimiz

Web projelerimizde içeriği önce yapı olarak planlıyoruz: hangi sayfada hangi ana başlık olacak, hizmet sayfaları hangi alt başlıklarla ilerleyecek, iletişim aksiyonları nerede duracak. Tasarım bu yapının üzerine giydiriliyor.

Kurumsal sitelerin büyük çoğunluğunu WordPress üzerinde kuruyoruz. Bu durumda HTML'i elle değil, tema ve sayfa oluşturucu üretiyor. Bu yüzden teslimden önce başlık sırasını, görsel alt metinlerini ve menü bağlantılarını ayrıca kontrol ediyoruz; çünkü görsel olarak doğru görünen bir sayfanın yapısı hatalı olabiliyor. Yerel işletmeler için SEO uyumlu web sitesi yazımızda anlattığımız hizmet sayfası yapısı da doğru HTML iskeletine dayanıyor.

Sık sorulan sorular

Sonuç

HTML, web sitenizin görünmeyen ama her şeyi taşıyan katmanıdır. Doğru kurulduğunda Google sayfanızı daha iyi anlar, ekran okuyucu kullananlar sitenizi kullanabilir, siteniz de yıllar içinde daha kolay bakılır. Siteniz nasıl görünürse görünsün, iskeleti sağlam değilse bu avantajların çoğunu kaybedersiniz.

Sitenizin yapısını birlikte gözden geçirmek isterseniz web tasarım ve WordPress geliştirme hizmetlerimize göz atabilir ya da bize yazabilirsiniz.