HTML 5 Dersleri 2 - Semantik Elementler

Bu derste HTML5 ile birlikte gelen semantik (anlamlı) elementlerin ne olduğu, neden kullanılması gerektiği ve web sayfalarına sağladığı avantajlar anlatılmaktadır. Semantik etiketler, örnek HTML kodlarıyla birlikte detaylı şekilde ele alınır.

admin admin
Ekim 17, 2022 - 10:54 Updated: Ocak 8, 2026 - 23:34
0 241
HTML 5 Dersleri 2 - Semantik Elementler
HTML 5 Dersleri 2 - Semantik Elementler

Semantik Element Nedir?

Semantik elementler, HTML kodu içinde içeriğin ne anlama geldiğini açıkça belirten etiketlerdir. Bu etiketler sayesinde hem tarayıcılar hem de arama motorları sayfanın yapısını daha doğru analiz eder.

HTML5 öncesinde sayfa yapıları genellikle div etiketleriyle oluşturuluyordu. HTML5 ile birlikte içeriklere anlam kazandıran yeni etiketler tanıtıldı.

Semantik Elementler Neden Önemlidir?

Semantik etiketlerin sağladığı avantajlar:

  • SEO açısından daha güçlü yapı

  • Daha okunabilir ve düzenli kod

  • Erişilebilirlik (accessibility) desteği

  • Arama motorlarının içeriği daha iyi anlaması

Bu nedenle modern web sitelerinde semantik yapı kullanımı büyük önem taşır.

En Çok Kullanılan Semantik HTML5 Etiketleri

HTML5’te en sık kullanılan semantik etiketler şunlardır:

  • header

  • nav

  • main

  • section

  • article

  • aside

  • footer

Header Etiketi

header etiketi, sayfanın veya bir bölümün başlık alanını temsil eder.

Header Kullanım Örneği

<header>
    <h1>HTML5 Dersleri</h1>
    <p>Semantik Elementler</p>
</header>

Nav Etiketi

nav etiketi, site içi veya sayfa içi gezinme bağlantılarını içerir.

Nav Örneği

<nav>
    <a href="/">Anasayfa</a>
    <a href="/html-dersleri">HTML Dersleri</a>
    <a href="/iletisim">İletişim</a>
</nav>

Main Etiketi

main etiketi, sayfanın ana içeriğini kapsar ve sayfada yalnızca bir kez kullanılmalıdır.

Main Örneği

<main>
    <h2>Ders İçeriği</h2>
    <p>Bu bölüm sayfanın ana içeriğidir.</p>
</main>

Section Etiketi

section etiketi, içerik içinde mantıksal bölümler oluşturmak için kullanılır.

Section Örneği

<section>
    <h2>HTML5 Nedir?</h2>
    <p>HTML5 modern web standartlarını ifade eder.</p>
</section>

Article Etiketi

article etiketi, bağımsız ve tek başına anlamlı içerikler için kullanılır.

Article Örneği

<article>
    <h3>Semantik Yapının Önemi</h3>
    <p>Semantik etiketler SEO açısından avantaj sağlar.</p>
</article>

Aside Etiketi

aside etiketi, ana içerikten bağımsız yan bilgileri temsil eder.

Aside Örneği

<aside>
    <h4>Bilgi</h4>
    <p>Bu alan yan içerik olarak kullanılır.</p>
</aside>

Footer Etiketi

footer etiketi, sayfanın veya bir bölümün alt bilgi alanını ifade eder.

Footer Örneği

<footer>
    <p>© 2026 cilginyazilim.com</p>
</footer>

Semantik Olmayan Yapı ile Semantik Yapı Karşılaştırması

Eski Yöntem (Semantik Olmayan)

<div class="header">Başlık</div>
<div class="menu">Menü</div>
<div class="content">İçerik</div>
<div class="footer">Alt Bilgi</div>

HTML5 Semantik Yapı

<header>Başlık</header>
<nav>Menü</nav>
<main>İçerik</main>
<footer>Alt Bilgi</footer>

HTML5 semantik yapı hem okunabilirlik hem de SEO açısından çok daha avantajlıdır.

Semantik elementleri öğrendikten sonra, HTML5 ile birlikte gelen gelişmiş form input tiplerini inceleyebiliriz.

? Bir sonraki ders:
HTML 5 Dersleri 3 – Input Tipleri
https://cilginyazilim.com/html-5-dersleri-3-input-tipleri

Etiketler: