Bir cümlelik özet
Semantik HTML, sayfadaki her bölümü anlamına uygun etiketle işaretlemektir; böylece kod hem tarayıcıya hem ekran okuyuculara hem de arama motorlarına parçaların ne işe yaradığını söyler.
Neden önemli?
Bir önceki derste bir sayfanın iskeletini <!DOCTYPE html>, <head> ve <body> ile kurmuştuk. O iskelet, sayfanın en dış kabuğuydu. Şimdi <body> içindeki bölümleri anlamlarına göre düzenlemenin sırası geldi.
Her şeyi <div> etiketiyle yazabilirsin. <div> çalışır ve ekranda istediğin gibi görünebilir, ama hiçbir anlam taşımaz. Tarayıcıya “burası bir menü mü, yoksa asıl içerik mi?” sorusunun cevabını vermez. <div>, adı olmayan boş bir kutuya benzer.
Semantik etiketler bu cevabı verir. Semantik kelimesi “anlamla ilgili” demektir. Yani <nav> etiketi sadece bir kutu değildir; “burası gezinme menüsü” anlamını taşır. Etiketin adı, içindeki parçanın ne işe yaradığını anlatır.
Bu anlam üç grup için önemlidir:
- Ekran okuyucular: Görme engelli kullanıcılar sayfayı sesli okuyan yazılımlarla dolaşır. Bu yazılım
<nav>gördüğünde “gezinme bölgesi” diyerek kullanıcının doğrudan menüye atlamasını sağlar. Sürekli<div>olsa bu mümkün olmazdı. - Arama motorları: Google gibi motorlar
<main>ve<article>etiketlerine bakarak sayfanın asıl içeriğini daha iyi anlar. - Diğer geliştiriciler: Kodu sonradan okuyan kişi (belki gelecekteki sen) etiketlerin adından bölümün ne olduğunu hemen görür.
Anlam taşıyan yapı etiketleri
Bir web sayfası çoğu zaman aynı büyük parçalardan oluşur: üst kısım, menü, asıl içerik, yan bilgiler ve alt kısım. Her biri için ayrı bir semantik etiket vardır.
En sık kullanılan etiketler
<header>: Sayfanın veya bir bölümün üst kısmı. Genelde başlık ve logo burada olur.<nav>: Gezinme menüsü. Bağlantıların bulunduğu bölge.<main>: Sayfanın asıl içeriği. Bir sayfada yalnızca bir tane<main>olmalı.<section>: Kendi başlığı olan, konu bakımından bir bütün oluşturan bölüm.<article>: Tek başına anlamlı, kendi kendine yeten içerik. Bir blog yazısı, bir haber, bir yorum gibi.<aside>: Asıl içeriğin yanındaki ek bilgi. Kenar çubuğu, ilgili bağlantılar, kutucuklar.<footer>: Sayfanın veya bir bölümün alt kısmı. İletişim bilgisi, telif notu gibi.
İki küçük örnek
Aynı bölümü önce anlamsız, sonra semantik yazalım.
Anlamsız hâli:
<div class="ust">
<div class="baslik">Robotik Günlüğü</div>
</div>
<div class="menu">
<a href="/">Ana Sayfa</a>
<a href="/dersler">Dersler</a>
</div>Semantik hâli:
<header>
<h1>Robotik Günlüğü</h1>
</header>
<nav>
<a href="/">Ana Sayfa</a>
<a href="/dersler">Dersler</a>
</nav>İkisi de ekranda benzer görünür. Fark, ikinci kodun anlamını da söylemesidir: burası başlık, şurası menü. Bir ekran okuyucu ilk kodu okurken sadece iki kutu görür; ikinci kodu okurken “gezinme menüsü” diyerek kullanıcıya yol gösterir.
Resim ve açıklaması: figure ve figcaption
Bir görsele altyazı eklemek istediğinde iki etiket daha işine yarar.
<figure>: Bir resmi, şemayı veya kod parçasını saran kapsayıcı.<figcaption>: O görselin altyazısı, yani açıklaması.
<figure>
<img src="robot.jpg" alt="Karton gövdeli, iki tekerlekli robot">
<figcaption>İlk çizgi izleyen robot denememiz.</figcaption>
</figure>Buradaki alt metnini unutma. alt, resim yüklenmezse veya kullanıcı resmi göremezse okunan açıklamadır. Erişilebilirlik için her anlamlı resimde alt bulunmalıdır.
Doğru etiketi seçmek
Yeni başlayanların en büyük sorusu şu olur: “Ne zaman <div>, ne zaman semantik etiket?”
Basit kural: Önce anlamı olan bir etiket var mı diye bak. Varsa onu kullan. Bölüm gerçekten sadece bir “kutu” ise ve stil vermek dışında bir amacı yoksa <div> uygundur. Yani <div> yasak değildir; sadece son seçenektir.
Aşağıdaki soruları kendine sorarak doğru etiketi hızlıca bulabilirsin:
- Menü mü? →
<nav> - Bağımsız bir yazı mı? →
<article> - Asıl içerik mi? →
<main> - Sadece renk veya boşluk için sarmalayıcı mı? →
<div>
<section> ile <div> sık karıştırılır. <section> kendi başlığı olan bir konu bölümüdür; <div> ise anlamı olmayan bir gruplamadır. Bir bölüme başlık (<h2> gibi) yazacaksan büyük ihtimalle <section> doğru seçimdir.
Başlangıçta bu seçimler zor gelebilir. Zamanla, tıpkı bir yazıda paragrafları bölmeyi öğrendiğin gibi, sayfayı anlamlı parçalara ayırmayı da doğal biçimde yaparsın.
Mini uygulama
Bir blog yazısının iskeletini semantik etiketlerle kur. Aşağıdaki parça, önceki dersteki <body> içine yerleşir.
<body>
<header>
<h1>Robotik Günlüğü</h1>
<nav>
<a href="/">Ana Sayfa</a>
<a href="/yazilar">Yazılar</a>
</nav>
</header>Devamında asıl içerik ve yan bilgi gelir:
<main>
<article>
<h2>İlk Robotumu Nasıl Yaptım?</h2>
<p>Bu yazıda ilk denememi anlatıyorum.</p>
<figure>
<img src="robot.jpg" alt="İki tekerlekli küçük robot">
<figcaption>Denediğim ilk tasarım.</figcaption>
</figure>
</article>
<aside>
<h2>İlgili Yazılar</h2>
<p>Motor seçimi üzerine notlar.</p>
</aside>
</main>En sonda alt kısmı ekle:
<footer>
<p>Bu bir öğrenme projesidir.</p>
</footer>
</body>Üç parçayı sırayla birleştirdiğinde tamamen semantik bir sayfa iskeleti elde edersin. Görev: Kendi ilgi alanınla (örneğin bisiklet, uzay, oyunlar) ilgili bir blog yazısı için aynı iskeleti yeniden yaz.
Uygulama laboratuvarı: Semantik HTML
Semantik HTML konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada Anlam taşıyan yapı etiketleri ile İki küçük örnek arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.
Görev senaryosu
Şu senaryoyu ele al: bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa. Dersin ana hedefi “header, nav, main, article gibi semantik etiketlerle anlamlı ve erişilebilir sayfa yapısı kurmayı öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.
- Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
- En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
- Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
- Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
- Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.
Başarı ölçütleri
- Başlık hiyerarşisi mantıklı mı?
- Bağlantılar klavye ve dokunmayla çalışıyor mu?
- Mobil ekranda yatay taşma var mı?
- Görsellerin alternatif metni ve boyutları tanımlı mı?
- HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?
“Semantik HTML” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, Anlam taşıyan yapı etiketleri ve İki küçük örnek ilişkisini daha küçük adımlara bölerek düzelt.
Sık yapılan hatalar
Her şeyi div ile yazmak
Sadece <div> kullanan sayfa çalışır ama anlamı kaybolur. Ekran okuyucu ve arama motoru için sayfa bir “anlamsız kutular yığını” olur. Anlamlı bir etiket varken <div> seçme.
Birden çok main kullanmak
Bir sayfada yalnızca bir tane <main> olmalı. Asıl içeriği tek bir <main> içinde topla.
Etiketi görünüşe göre seçmek
<section>, <article> veya <div> seçimini “ekranda nasıl görünsün” diye değil, “bu parçanın anlamı ne” diye düşünerek yap. Görünüşü CSS ile ayrı olarak ayarlayacaksın.
Resimde alt metnini unutmak
alt olmadan resim, göremeyen kullanıcı için tamamen kaybolur. Anlamlı her resme kısa ve açıklayıcı bir alt yaz.
Güvenlik notu
Bu derste blog örneği kullanıyoruz ama yazdığın sayfalar gerçekten internette yayımlanabilir. Bu yüzden örneklere gerçek kişisel bilgi koyma: tam adres, telefon numarası, okul adı veya doğum tarihi gibi bilgileri sayfaya yazma. Bu akademideki tüm örnekler öğrenme amaçlıdır; gerçek bir kayıt formu veya gerçek bir iletişim bölümü değildir. Bir sayfayı gerçekten yayımlamadan önce mutlaka bir yetişkinle birlikte kontrol et.
Ders özeti
- Semantik HTML, her bölümü anlamına uygun etiketle işaretlemektir.
<header>,<nav>,<main>,<section>,<article>,<aside>ve<footer>sayfanın büyük parçalarını tanımlar.- Semantik etiketler ekran okuyucular, arama motorları ve diğer geliştiriciler için sayfayı anlaşılır kılar.
- Anlamlı bir etiket varken
<div>yerine onu tercih et;<div>sadece anlamsız gruplamalar içindir. - Resimlerde
altmetni erişilebilirlik için zorunludur.
Kontrol soruları
- “Semantik” kelimesi ne anlama gelir?
- Bir sayfada kaç tane
<main>etiketi bulunmalıdır? - Bir gezinme menüsü için hangi etiketi kullanırsın?
<figure>ile<figcaption>birlikte ne işe yarar?- Neden her şeyi
<div>ile yazmak iyi bir fikir değildir?
Cevaplar
- “Anlamla ilgili” demektir. Semantik etiket, bölümün ne işe yaradığının anlamını taşır.
- Yalnızca bir tane. Asıl içerik tek bir
<main>içinde toplanır. <nav>etiketini kullanırız.<figure>bir görseli sarar,<figcaption>ise o görselin altyazısını verir.- Çünkü
<div>anlam taşımaz; ekran okuyucular, arama motorları ve diğer geliştiriciler bölümlerin ne olduğunu anlayamaz.
Kaynak ve doğrulama notu
“Semantik HTML” dersi için doğrulama odağı Anlam taşıyan yapı etiketleri ile İki küçük örnek arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.
Sonraki ders
CSS ile Görsel Düzen: Semantik olarak düzenlediğin sayfaya renk, boşluk ve yerleşim ekleyerek onu görünür biçimde biçimlendirmeye başlayacaksın.