Bir web sayfasını yalnızca <div> etiketleriyle de düzenleyebilirsiniz. Ancak tarayıcıya, ekran okuyucuya ve arama motoruna içeriğin hangi bölümünün ne işe yaradığını anlatmak istiyorsanız semantik HTML kullanmanız gerekir.
Bu rehberde semantik HTML'in ne olduğunu, <header>, <nav>, <main>, <article>, <section> ve <footer> etiketlerinin farklarını, SEO ve erişilebilirlik açısından neden önemli olduklarını örneklerle öğreneceksiniz.
1. Semantik HTML Nedir?
Semantik HTML (Semantic HTML), içeriğin anlamına ve görevine uygun HTML elementlerini kullanma yaklaşımıdır.
Örneğin bir gezinme alanını <nav>, bağımsız bir yazıyı <article>, sayfanın ana içeriğini <main> ile belirtiriz.
<div> ve <span> da geçerli ve yararlı elementlerdir; ancak tek başlarına içeriğin işlevini ifade etmezler. Özel bir anlam taşımayan gruplamalar için onları kullanmaya devam edebilirsiniz.
2. Semantik HTML Neden Önemlidir?
Semantik HTML kullanmanın başlıca avantajları şunlardır:
- Erişilebilirlik: Ekran okuyucular, sayfanın ana içeriği ve gezinme bölümleri gibi anlamlı bölgeler arasında daha kolay hareket edilmesini sağlayabilir.
- Bakım kolaylığı: Kodun hangi parçasının menü, içerik veya alt bilgi olduğu daha hızlı anlaşılır.
- Arama motorları: İyi yapılandırılmış içerik, sayfanın düzeninin ve bağlamının anlaşılmasına yardımcı olabilir.
- Tutarlılık: Farklı geliştiriciler aynı sayfanın yapısını daha rahat okuyabilir.
Önemli: Semantik HTML kullanmak tek başına Google'da üst sıralarda yer alma garantisi değildir. Ancak doğru yapılandırılmış, anlaşılır ve erişilebilir içerikler oluşturmanın önemli bir parçasıdır.
3. En Önemli Semantik HTML Etiketleri
3.1. header: Giriş ve Başlık Bölümü
<header>, sayfanın veya bir bölümün giriş içeriğini barındırabilir. Logo, başlık ve bazı gezinme öğeleri burada yer alabilir.
Bir sayfada farklı bölümlere ait birden fazla <header> bulunabilir.
<header>
<h1>Nizokka Akademi</h1>
<p>Web geliştirme rehberleri</p>
</header>3.2. nav: Gezinme Bağlantıları
<nav>, sitenin ana menüsü veya içindekiler gibi önemli gezinme bağlantılarını gruplamak için kullanılır.
Sayfadaki her bağlantıyı mutlaka <nav> içine koymanız gerekmez.
<nav aria-label="Ana menü">
<ul>
<li>
<a href="/">Ana Sayfa</a>
</li>
<li>
<a href="/academy">Akademi</a>
</li>
</ul>
</nav>Birden fazla gezinme bölümü varsa aria-label gibi açıklayıcı bir ad, bölgelerin ayırt edilmesine yardımcı olur.
3.3. main: Sayfanın Ana İçeriği
<main>, sayfaya özgü temel içeriği kapsar.
Genel kullanımda bir sayfada tek bir görünür ana içerik bölgesi bulunmalıdır. Tekrarlanan menü ve site alt bilgisi bu bölgenin dışında kalır.
<main id="icerik">
<h1>HTML Dersleri</h1>
<p>
Bu sayfada HTML konularını
öğreneceksiniz.
</p>
</main>3.4. article: Bağımsız İçerik
<article>, tek başına anlam taşıyabilen bir blog yazısı, haber, forum gönderisi veya ürün değerlendirmesi için uygundur.
<article>
<h2>HTML Etiketleri Rehberi</h2>
<p>
Temel etiketleri örneklerle öğrenin.
</p>
</article>3.5. section: Konuya Göre Bölümlendirme
<section>, belirli bir temaya sahip içerik bölümünü temsil eder. Genellikle anlamlı bir başlığı olmalıdır.
Yalnızca CSS ile kutu oluşturmak için her yerde <section> kullanmayın. Böyle durumlarda <div> daha uygun olabilir.
<section>
<h2>HTML Nedir?</h2>
<p>
HTML, web içeriğini yapılandırır.
</p>
</section>3.6. aside: İlişkili Yan İçerik
<aside>, ana içerikle bağlantılı ama onun doğrudan parçası olmayan ek bilgiler için kullanılabilir.
Örneğin:
- İlgili blog yazıları
- Yazar hakkında kısa bilgiler
- Ek açıklamalar
- Yardımcı kaynaklar
3.7. footer: Alt Bilgi
<footer>, sayfanın ya da bir içerik bölümünün alt bilgisini ifade eder.
Telif hakkı, iletişim bağlantıları veya yazara ilişkin bilgiler içerebilir.
Bir <article> kendi <footer> elementine de sahip olabilir.
4. div ile Semantik Etiket Arasındaki Fark
Aşağıdaki iki yapı ekranda benzer görünebilir. Ancak ikinci yapı, içerik bölgelerinin görevini daha iyi anlatır.
Anlamı Belirsiz Yapı
<div class="ust-alan">
Site başlığı
</div>
<div class="menu">
Menü bağlantıları
</div>
<div class="icerik">
Makale içeriği
</div>Anlamlı Yapı
<header>
Site başlığı
</header>
<nav aria-label="Ana menü">
Menü bağlantıları
</nav>
<main>
Makale içeriği
</main>Unutmayın: Semantik etiketler tasarımı otomatik olarak değiştirmez. Görünüm için yine CSS kullanabilirsiniz.
5. Gerçek Bir Blog Sayfasının Semantik HTML Yapısı
Aşağıdaki örnek, sitenin genel düzeni içinde bir blog yazısının nasıl konumlandırılabileceğini gösterir.
Kodları bir HTML dosyasında deneyebilirsiniz.
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>
Semantik HTML Rehberi
</title>
</head>
<body>
<a href="#icerik">
Ana içeriğe geç
</a>
<header>
<p>Nizokka Akademi</p>
<nav aria-label="Ana menü">
<a href="/">Ana Sayfa</a>
<a href="/academy">Akademi</a>
</nav>
</header>
<main id="icerik">
<article>
<h1>
Semantik HTML Nedir?
</h1>
<p>
Doğru etiket seçimini öğrenin.
</p>
<section>
<h2>Temel Etiketler</h2>
<p>
header, nav ve main...
</p>
</section>
<footer>
Yazar: Nizokka Akademi
</footer>
</article>
<aside>
<h2>İlgili Konular</h2>
<p>
HTML ve CSS dersleri
</p>
</aside>
</main>
<footer>
<p>Nizokka Soft</p>
</footer>
</body>
</html>Not: Yukarıdaki örnek tam bir HTML belgesidir. Bir içerik yönetim panelindeki makale alanına ise yalnızca makalenin gövde içeriği eklenmelidir. Yeni bir <html> veya <head> yapısı eklemeyin.
6. Semantik HTML ve SEO İlişkisi
SEO (Search Engine Optimization), web sayfalarının arama motorlarında daha iyi anlaşılmasını ve uygun aramalarda görünür olmasını hedefleyen optimizasyon çalışmalarının genel adıdır.
Arama motorları bir sayfanın içeriğini birçok sinyalle değerlendirir.
Anlamlı başlıklar, açıklayıcı bağlantılar ve düzenli içerik yapısı hem okuyucuların hem de sistemlerin konuyu takip etmesini kolaylaştırır.
Ancak yalnızca <article> veya <section> kullanmak sıralama artışı garantilemez.
SEO İçin HTML Önerileri
- Sayfanın asıl konusunu açıklayan bir
<h1>kullanın. - Konuları
<h2>ve<h3>başlıklarıyla mantıklı sırada bölün. - Bağlantılara "buraya tıkla" yerine hedefi açıklayan metinler verin.
- Görseller için amaca uygun alternatif metin yazın.
- İçerik kalitesi, sayfa hızı ve mobil kullanım gibi diğer önemli unsurları ihmal etmeyin.
7. Erişilebilirlik İçin Üç Kritik Örnek
7.1. Bağlantı mı, Buton mu?
Başka bir sayfaya gitmek için <a>, sayfa üzerinde bir işlem başlatmak için <button> kullanın.
Sadece tıklama davranışı eklenmiş bir <div>, kendiliğinden klavye ve erişilebilirlik özelliklerini sağlamaz.
<a href="/academy">
Dersleri görüntüle
</a>
<button type="button">
Menüyü aç
</button>7.2. Form Alanlarında label Kullanın
Form alanları kullanıcıya ne yazması gerektiğini açıkça anlatmalıdır.
<label for="eposta">
E-posta adresi
</label>
<input
id="eposta"
name="eposta"
type="email"
autocomplete="email"
>Görünür bir etiket, kullanıcıya alanın amacını söyler.
placeholder tek başına kalıcı bir alan etiketi yerine geçmez.
7.3. Görselleri Doğru Açıklayın
Görseller için kullanılan alt özelliği, özellikle ekran okuyucu kullanan ziyaretçiler açısından önemlidir.
<img
src="html-akisi.png"
alt="HTML sayfasında header, main ve footer bölgelerinin yerleşimi"
>
<img
src="dekoratif-cizgi.svg"
alt=""
>Anlam taşıyan görsellerin alternatif metni açıklayıcı olmalıdır. Sadece süsleme amaçlı görsellerde boş alt="" kullanmak genellikle uygundur.
8. Sık Yapılan Semantik HTML Hataları
- Her alanı
<div>ile oluşturmak ve anlamlı elementleri hiç kullanmamak. - Sırf görünümü beğenildiği için
<h4>seçerek başlık sırasını bozmak. - Sıradan bir tasarım kapsayıcısını gereksiz yere
<section>yapmak. - Birden fazla görünür
<main>oluşturarak ana bölgeyi belirsizleştirmek. - Görselleri açıklamasız bırakmak veya alternatif metinlere anlamsız anahtar kelimeler doldurmak.
- Semantik HTML kullanınca ayrıca erişilebilirlik testi yapmaya gerek olmadığını düşünmek.
9. Yayınlamadan Önce Kontrol Listesi
Bir web sayfasını yayına almadan önce şu soruları kendinize sorun:
- Sayfanın ana içeriği açıkça ayırt edilebiliyor mu?
- Başlıklar içerik hiyerarşisini doğru yansıtıyor mu?
- Menüler, bağlantılar ve butonlar amaçlarına uygun etiketlerle mi yazıldı?
- Form alanlarının görünür etiketleri var mı?
- Görsellerin alternatif metinleri anlamlı mı?
- Sayfa yalnızca klavyeyle kullanılabiliyor mu?
10. Sık Sorulan Sorular
Her div Etiketini section ile Değiştirmeli miyim?
Hayır. <div> genel amaçlı gruplamalar için uygundur. <section> ise tematik olarak anlamlı bir bölüm olduğunda tercih edilmelidir.
Bir Sayfada Birden Fazla header ve footer Olur mu?
Evet. Sayfanın kendisinin yanı sıra bağımsız bir makalenin veya bölümün de kendi giriş ve alt bilgi alanı olabilir.
Semantik HTML Tek Başına SEO Sıralamasını Yükseltir mi?
Hayır. Semantik HTML, anlaşılır bir sayfa yapısına katkı sağlar; ancak arama sonuçlarındaki konumu belirleyen tek faktör değildir.
Semantik HTML Öğrenmek Zor mu?
Hayır. Temel HTML etiketlerini biliyorsanız semantik HTML öğrenmeye başlayabilirsiniz. En önemli nokta, etiketleri görünüşlerine göre değil, içeriğin anlamına göre seçmektir.
11. Sonuç
Semantik HTML, yalnızca kodu daha düzenli yazma alışkanlığı değildir. İçeriği doğru anlamlarla sunmanın temel yoludur.
<header>, <nav>, <main>, <article> ve diğer elementleri yerinde kullanmak, daha anlaşılır ve erişilebilir web sayfaları geliştirmenize yardımcı olur.
Bu etiketleri küçük projelerde deneyerek aralarındaki farkları daha kolay kavrayabilirsiniz.
Nizokka Akademi serisinin sonraki dersinde HTML formlarını, <input> ve <label> kullanımını ve temel doğrulama yöntemlerini işleyeceğiz.