Anlamlı etiketler (semantik HTML)

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Semantik, bir öğenin belgede ne görev yaptığını belirtmesidir. header tanıtım alanı, nav önemli bağlantı grubu, main ana içerik, footer ise kapanış bilgileri için kullanılabilir. Bunlar yalnızca div yerine yazılan süslü adlar değildir; yardımcı teknolojiler ve sayfayı okuyan geliştiriciler için bölge bilgisi taşırlar.

article kendi başına anlamlı olabilen bir içeriği, section ise genellikle başlığı bulunan tematik bir bölümü temsil eder. Her kutuya section demek gerekmez; yalnızca görsel gruplama yapıyorsan div uygundur. Başlık sırası ile bölge etiketleri birbirini desteklemeli, biri diğerinin yerine geçmemelidir.

Bir sayfayı anlamak için CSS’i geçici olarak kapattığını düşün. Konu, ana içerik ve menü bağlantıları hâlâ anlaşılabiliyor mu? Aynı belgeye klavyeyle ulaşıp başlıkları takip et. Tasarımın gerçek gücü yalnızca renklerden değil, içerik düzeninin görsel stil olmadan da ayakta kalmasından gelir.

İlk örneği oku ve dene

<header>
  <h1>Webino App</h1>
  <nav>Ana Sayfa | Diller | Araçlar</nav>
</header>
<main>
  <article>
    <h2>Python Öğren</h2>
    <p>Python ile okunabilir örnekler yazabilirsin.</p>
  </article>
</main>
<footer>© 2026 Webino App</footer>

Başlık, menü yazısı, bir yazı ve en altta telif satırı alt alta görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. nav her bağlantı için değil, temel gezinme grupları için kullanılır.
2. main sayfanın tek görünür ana içerik bölgesidir.
3. article bağımsız okunabilir içerik için seçilir.
4. section kullanıyorsan bölümün konusunu açıklayan bir başlık düşün.

<header><p>Öğrenme günlüğüm</p><nav><a href="#notlar">Notlar</a></nav></header>
<main>
<h1>HTML çalışıyorum</h1>
<section id="notlar"><h2>Bugünkü notlar</h2><p>Önce anlam, sonra görünüm.</p></section>
</main>
<footer><p>Hazırlayan: Deniz</p></footer>

Başlık/menü, ana içerik, notlar bölümü ve alt bilgi.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Bir önceki dersinin div gruplarını incele; yalnızca anlamı uygun olanları değiştir.
2. Bir ana başlık ve iki alt bölüm kur.
3. CSS olmadan okuma sırasını kontrol et; menüden bölüm bağlantısını dene.

<main>
<h1>Çalışma notlarım</h1>
<article><h2>İlk denemem</h2><p>Bağımsız okunabilen kısa yazı.</p></article>
<section><h2>Kaynaklar</h2><ul><li>Resmî belgeler</li></ul></section>
</main>

Ana konu altında bağımsız bir yazı ve kaynaklar bölümü.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Başlıksız section sayısını artırmak yapıyı açıklamaz; tematik olmayan gruplarda div kullan.
2. Aynı sayfada birden fazla görünür main ana içeriği belirsizleştirir; tek ana bölge tasarla.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Her görsel kutu neden section olmamalıdır?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.