Ders 7 – Semantic HTML

1. Semantic HTML Nedir?

Semantic HTML, yapıyı anlamsal olarak ifade eden etiketlerin kullanılmasıdır. Örneğin bir menüyü <div> ile yapmak yerine <nav> ile yapmak sayfayı daha anlaşılır yapar.

Aşağıdaki örnek, klasik <div> kullanımına karşı semantic yapıyı gösterir:

<!-- KÖTÜ KULLANIM -->
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>

<!-- DOĞRU: SEMANTIC HTML -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

💡 Semantic HTML; SEO, ekran okuyucu desteği ve düzenli bir kod yapısı için çok önemlidir.

2. En Önemli Semantic Etiketler

<header>

Sayfanın veya bölümün başlık kısmını temsil eder.

<nav>

Menü ve linklerin bulunduğu navigasyon alanıdır.

<main>

Sayfanın ana içeriğinin bulunduğu bölümdür (sayfada 1 tane olur).

<section>

İçerikleri mantıksal bölümlere ayırır.

<article>

Kendi başına anlam taşıyan bağımsız içerikler (blog yazısı gibi).

<aside>

Ana içeriğin yanında yer alan yan bilgi kutularıdır.

<footer>

Sayfanın alt kısmı: telif, iletişim, sosyal medya.

3. Semantic HTML Örnek Taslak

Aşağıdaki örnek, bir web sayfasının temel iskeletini gösterir:

<header>
  <h1>Yeşil Bilişim Blog</h1>
</header>

<nav>
  <a href="#">Ana Sayfa</a>
  <a href="#">Projeler</a>
</nav>

<main>
  <article>
    <h2>İlk Yazım</h2>
    <p>Bugün HTML öğrenmeye başladım!</p>
  </article>
</main>

<aside>
  <p>Yan Bilgi Kutusu</p>
</aside>

<footer>
  © 2024 Yeşil Bilişim
</footer>

4. Mini Görev – Semantic Yapı ile Sayfa Oluştur

Aşağıdaki bölümlerden oluşan bir sayfa tasarla:

• <header> — başlık
• <nav> — menü
• <main> içinde bir <article>
• <aside> — yan kutu
• <footer> — telif bilgisi

Tasarladığın sayfayı ders sonunda bana göster, yorum yapayım :)