HTML5 Etiketleri: İnternet Dünyasının Temelleri 🕸️

Merhaba dijital kaşif! 🌍
Bugün sana HTML5’in sihirli ve bir o kadar da eğlenceli dünyasını göstereceğim. Eğer interneti bir ev olarak düşünürsek, HTML5 etiketleri bu evin duvarları, kapıları, pencereleri, hatta elektrik tesisatıdır. 😎 Yani, HTML5 olmasa, tüm web siteleri “boş odalar” gibi olurdu. Ama korkma! Bu yazıda hem temel etiketleri tanıyacak, hem ipuçlarıyla donanacak hem de kodlarıyla eğleneceksin.

HTML5 Nedir? 🤔

HTML5, internetin yapı taşı olan HyperText Markup Language’in beşinci versiyonudur.
Kısaca: HTML5, tarayıcının “Hey! Bu metin başlık mı, paragraf mı, resim mi?” diye anlamasını sağlayan sihirli bir dil.

Yeni HTML5’in en güzel yanlarından biri semantik etiketler kullanması. Yani <div>’ler yerine, içerik türünü açıklayan <header>, <footer>, <article> gibi etiketler var. Tarayıcılar, arama motorları ve ekran okuyucular bunu çok sever. 😎

Temel HTML5 Etiketleri 🏗️

Artık sıradan <div> çöplüğünden çıkıyoruz! İşte HTML5’in yıldızları:

1. <header> – Web Sitesinin Forehead’i 👑

Header, sayfanın “merhaba, ben buradayım!” kısmıdır.
Genellikle logo, menü ve başlıklar burada bulunur.

<header>
  <h1>Hoşgeldin Dijital Kaşif!</h1>
  <nav>
    <a href="#">Anasayfa</a>
    <a href="#">Blog</a>
    <a href="#">Hakkımda</a>
  </nav>
</header>

Pratik ipucu:

• <header> sayfa başlıkları için kullanılır. Ama dikkat! Her <section> veya <article> da kendi <header>’ına sahip olabilir.
• SEO dostu olmak için başlıklarda <h1> sadece bir kez, alt başlıklarda <h2>, <h3> kullan.

Eğlenceli not:
Header, sayfanın “ilk izlenim” kısmıdır. Eğer header kötü tasarlanırsa, kullanıcı da “Aaa, burası da neymiş?” diyebilir. 😅

2. <nav> – İnternetin Haritası 🗺️

Web sitesinde gezinmek mi istiyorsun? İşte <nav> sana yol gösterir. Menülerin çoğu burada saklanır.

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

Pratik ipucu:

• Menüleri <ul> ve <li> ile listelemek daha düzenli olur.
• <nav> sadece ana navigasyon için kullan, ekstra dekoratif linkler için değil.

Sıradışı ipucu:

• CSS ile menüyü gizleyip hamburger menüye çevirebilirsin. Böylece mobil kullanıcılar da mutlu olur. 🍔

3. <main> – İçeriğin Kalbi ❤️

Sayfanın ana içeriği burada saklanır. <main> etiketi, ekran okuyucular ve arama motorları için “Buraya odaklanın!” mesajı verir.

<main>
  <h2>HTML5 ile Harikalar Yarat!</h2>
  <p>İster blog yaz, ister oyun sitesi, içerik burada parlar. <strong>Güç sende!</strong></p>
</main>

Pratik ipucu:

• <main> sayfada sadece bir kez kullanılmalı.
• Diğer içerikler <article> veya <section> içinde yer almalı.

Sıradışı ipucu:

• <main> içinde <aside> kullanarak yan içerik ekleyebilirsin. Böylece haber sitelerindeki popüler içerikler gibi bir etki yaratılır.

4. <article> – Tek Tek Hikayeler 📖

Blog yazıları, haberler veya tekil içerikler için birebir. Bir yazı, kendi içinde bir mini belge gibidir.

<article>
  <header>
    <h3>HTML5’in 5 Harika Özelliği</h3>
    <p>Yayın tarihi: 26 Aralık 2025</p>
  </header>
  <p>1. Semantik yapısı… 2. Video ve audio desteği… 3. Offline depolama…</p>
  <footer>
    <p>Yazar: Dijital Kaşif</p>
  </footer>
</article>

Pratik ipucu:

• <article> içinde kendi <header> ve <footer>’ını kullanabilirsin.
• Sosyal medya paylaşım butonları için harika bir yer.

Sıradışı ipucu:

• Her <article> için benzersiz id kullan; böylece CSS veya JavaScript ile kişiselleştirebilirsin.

5. <section> – Bölüm, Bölüm, Bölüm 🧩

Bir web sayfasını mantıklı parçalara ayırmak için <section> kullan. Her bölüm, kendi başlığıyla olmalı.

<section>
  <h2>Öğrenme Kaynakları</h2>
  <p>HTML5, CSS3 ve JavaScript kaynaklarını burada bulabilirsin.</p>
</section>

Pratik ipucu:

• <section> içerik bölümlerini mantıklı bir şekilde ayırır.
• Başlığı olmayan <section> kullanma; SEO için başlık şart!

Sıradışı ipucu:

• <section>’ları farklı arka plan renkleriyle ayır; sayfa daha canlı ve okunabilir olur.

6. <footer> – Hoşçakal Dediğimiz Yer 👋

Tıpkı bir kitabın son sayfası gibi, site hakkında bilgiler burada saklanır: telif hakkı, iletişim, sosyal medya linkleri…

<footer>
  <p>© 2025 Dijital Kaşif. Tüm hakları saklıdır.</p>
  <nav>
    <a href="#">Gizlilik Politikası</a>
    <a href="#">İletişim</a>
  </nav>
</footer>

Pratik ipucu:

• <footer> hem sayfa hem de <article> içinde olabilir.
• Küçük notlar veya linkler için mükemmel yer.

Sıradışı ipucu:

• CSS ile footer’ı sabitleyip her zaman görünür yapabilirsin. Böylece kullanıcı sayfayı kaydırsa bile iletişim bilgileri hep ulaşılabilir olur.

HTML5 ile Daha Fazlası ✨

HTML5 sadece metinlerle sınırlı değil:

• <video> ve <audio> ile medya ekle
• <canvas> ile oyun ve animasyon yarat
• <form> ile kullanıcıdan bilgi al
• <figure> ve <figcaption> ile görsellere açıklama ekle

<figure>
  <img src="dijital-kasif.png" alt="Dijital Kaşif">
  <figcaption>Dijital Kaşif’in resmi</figcaption>
</figure>

Pratik ipucu:

• Her <img> etiketi için alt ekle; SEO ve erişilebilirlik için önemli.
• <video> ve <audio>’ya controls ekle ki kullanıcı oynatabilsin.

HTML5 etiketlerini öğrenmek, internet dünyasında gezinmenin temel kurallarını anlamak gibidir. Bir kez öğrendiğinde, her web sayfasına baktığında “Ah işte burada <header> var, burası <footer>…” diye gülümseyeceksin. 😄

Mini challenge:
Kendi HTML5 mini sayfanı oluştur ve her etiketi bir süper kahraman gibi kişiselleştir. <header> lider, <footer> bilge dede, <article> maceracı… Hayal gücünü serbest bırak! 🚀