HTML · Anlamlı etiketler (semantik HTML) — videolu atölye

Anlamlı etiketler (semantik HTML)

Belgenin ana bölgelerini anlamlı etiketlerle düzenlemek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

nav her bağlantı için değil, temel gezinme grupları için kullanılır. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

section kullanıyorsan bölümün konusunu açıklayan bir başlık düşün.

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

Bir değeri sen değiştir

Bir önceki dersinin div gruplarını incele; yalnızca anlamı uygun olanları değiştir. Bir ana başlık ve iki alt bölüm kur.

Hata nereden gelir?

Başlıksız section sayısını artırmak yapıyı açıklamaz; tematik olmayan gruplarda div kullan.

Kendi çözümünü kur

CSS olmadan okuma sırasını kontrol et; menüden bölüm bağlantısını dene. Etiket seçimini kutunun rengine değil, içeriğin sayfadaki rolüne göre yap.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

Her görsel kutu neden section olmamalıdır? Yanıt: section tematik bir bölümü temsil eder; yalnızca görsel gruplama için div daha uygundur.

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