(Kod Dünyasının Karizmatik ve İşlevsel Kahramanları)

Merhaba benim kod yazarı tatlı böreğim 💕
Bugün HTML’in büyülü dünyasında bir yolculuğa çıkıyoruz.
Ama bu öyle sıradan bir yolculuk değil…

Bu yolculukta karşımıza:

• Kibar,
• Ne iş yaptığını bilen,
• Kendini tanıtan,
• Düzeni seven
  semantic element’lar çıkacak!

Bunlar HTML’in “ben sadece bir div değilim, bir amacım var!” diye bağıran elemanlarıdır.
Yani HTML’in CV sahibi, kariyer hedefi olan karakterleri diyebiliriz 😂

🍀 1. Semantic Element Nedir?

(Kendini ifade eden karizmatik etiketler)

Kısaca:
📌 Anlam taşıyan,
📌 İşlev belirten,
📌 Arama motoru ve tarayıcıya kendini tanıtan
HTML etiketleridir.

Yani semantic element bir mekâna girdiğinde şöyle der:

“Merhaba, ben <header> sayfanın tepesiyim. Tanıştığımıza memnun oldum.”

Bir div ise:

“Ben… div’im işte… Ne olduğumu anlaman için style’a bakman lazım…” 😭

İşte semantic element’lar tam da bu yüzden var!

🧠 2. Neden Semantic Element Kullanmalıyız?

Dilersen bunu hayat hikayesi gibi anlatalım 😄

⭐ 2.1. SEO’nun kalbini kazanırsın (Google seni affeder 😄)

Google bir siteyi incelerken şunu anlamaya çalışır:
“Bu sayfa ne anlatıyor?”
“Menü nerede?”
“İçerik nerede başlıyor?”

Semantic element’lar → Google’ın işini kolaylaştırır.

Örnek:

<main>
  <article>
    <h1>Semantic Elements Nedir?</h1>
    <p>Bla bla bla...</p>
  </article>
</main>

Google der ki:

“Oo süper. Bu ana içerik. Bu da makale. Helal lan!”

Ama şöyle yazarsan:

<div class="main">
  <div class="article">

SEO:

“Burası ne ya? Noluyo?” 😵‍💫

⭐ 2.2. Erişilebilirlik (Accessibility) kral olur!

Ekran okuyucular semantic element görünce coşar.

<nav> görünce:

“Navigasyona geçiliyor.”

<footer> görünce:

“Bu sayfanın alt kısmı.”

<section> görünce:

“Yeni bölüm başlıyor.”

Ama her şeyi DIV ile yaparsan:

“Div… Div… Div… Div…”

Kullanıcı:

“Tamam yeter!” 😭

⭐ 2.3. Kod daha okunabilir olur

6 ay sonra projeye döndüğünde:

Semantic kod:

“Aa evet, burası menü, burası makale. Tamam hatırladım.”

DIV çöplüğü:

“Bu div neden var? Bu ne amaçla yazılmış? Ben kimim? Neredeyim?” 🤯

⭐ 2.4. Bakımı kolaydır

Kodun amacı etikette yazıyor zaten.
Her şey düzenli, mantıklı, takip edilebilir.

🧱 3. Semantic Element’ların Tam Liste ve Derin Analizi

(Bu bölüm uzmanlık seviyesi +2 charisma bonus verir 😄)

Şimdi her etiketi sana hem komik hem öğretici şekilde açıklıyorum.

🎩 3.1. <header> — Sayfanın karizmatik girişi

Görevi:
Sayfanın ya da bir bölümün başlık kısmı.

Genelde şunlar bulunur:

• Logo
• Menü
• Üst görsel
• Sayfa başlığı

Kod örneği:

<header>
  <h1>Benim Süper Blogum</h1>
  <nav>
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkımda</a>
  </nav>
</header>

Püf Nokta:
Bir sayfada birden fazla header olabilir.
Her section’ın kendi header’ı olabilir.

🧭 3.2. <nav> — Gezinme kahramanı

Görevi:
Menüleri taşır.

Kod örneği:

<nav>
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Püf:
Her link listesi nav olmaz!
Sadece SAYFAYI GEZDİREN kısımlar nav’dır.

🧱 3.3. <main> — İçeriğin kalbi

Sadece bir tane olur!

Kod örneği:

<main>
  <article>
    <h2>Giriş</h2>
    <p>Merhaba!</p>
  </article>
</main>

Püf:
Footer, header, aside gibi şeyler main’in içinde olmaz.

📚 3.4. <section> — Konuları düzenleyen disiplinli çocuk

Görevi:
İçeriği konu konu ayırmak.

<section>
  <h2>HTML Nedir?</h2>
  <p>Temel yapı...</p>
</section>

İpucu:
Bir section’ın mutlaka bir başlığı olmalı.

📰 3.5. <article> — Tek başına bile anlamlı içerik

Tek başına paylaşılabilir içerik parçaları.

Örnekler:

• Blog yazısı
• Haber
• Forum gönderisi

<article>
  <h2>Bugünkü Blog Yazım</h2>
  <p>Bugün çok tatlıyım.</p>
</article>

🧊 3.6. <aside> — Kenarda duran tatlı bilgiler

Reklamlar, yan notlar, ek bilgiler.

<aside>
  <h3>Bilgi Kutusu</h3>
  <p>HTML 1993 yılında doğdu.</p>
</aside>

🪞 3.7. <footer> — Sahneyi kapatan son söz

Sayfanın ya da bölümün alt kısmı.

<footer>
  <p>© 2025 Tüm hakları saklıdır.</p>
</footer>

🧪 4. Semantic Element Kullanımı – Mini Proje Örneği

Sana full semantic bir örnek veriyorum 😘

<header>
  <h1>HTML Öğreniyorum</h1>
  <nav>
    <a href="#giris">Giriş</a>
    <a href="#semantik">Semantic</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2 id="giris">Giriş</h2>
    </header>
    <p>Bugün HTML öğreniyoruz!</p>
  </article>

  <section id="semantik">
    <h2>Semantic Elements</h2>
    <p>HTML'de anlam katan etiketler...</p>
  </section>

  <aside>
    <p>Ek Bilgi: HTML5 ile geldi!</p>
  </aside>
</main>

<footer>
  <p>💕 Kodlamayı sevin!</p>
</footer>

🚀 5. Uzman Seviyesi İpuçları ve Hileler

Bunlar geliştiricilerin bilmediği gizli kaşık darbeleri 😄👇

💡 IPUCU 1 — Her şeyi section yapma!

Section → sadece mantıklı konu başlıkları içindir.

Her div yerine section kullanmak ❌

💡 IPUCU 2 — Article içinde section olabilir

Ama section içinde article olabilir mi? EVET!
Sadece mantığa uyuyorsa.

💡 IPUCU 3 — Google nav içindeki linklere ayrı bir önem verir

Menü linklerinin SEO gücü artar.

💡 IPUCU 4 — Semantic yapılar sayfayı daha hızlı indekslettirir

Botlar daha iyi anlar → Daha hızlı index → Daha hızlı trafik.

💡 IPUCU 5 — CSS için yakalamak çok kolaydır

header nav a {} gibi target’lar mis gibi olur.

🎉 Sonuç: Semantic Elements = Düzen + Anlam + Estetik + SEO + Accessibility

Yani…
Semantic element kullanmak = profesyonel görünmek + Google tarafından öpücük almak

Hem kullanıcı memnun, hem Google memnun, hem sen memnun.
Tam bir kazan-kazan-kazan durumu!