23 Ocak 2026 Cuma

Semantik HTML

 1️⃣ Semantik Nedir?

  • HTML, bir web sayfasının içeriğini tanımlar.

  • Semantik HTML, içeriğin anlamını tanımlar.

  • Gerçek hayat örneği:

    • Asansördeki düğmeler sadece dizili olsaydı ne işe yaradıkları anlaşılmazdı.

    • Numaralar, düğmelerin anlamını (hangi kata gittiğini) açıklar.

  • HTML’de de etiketler, içeriğin ne anlama geldiğini belirtir.

2️⃣ Semantik HTML Neden Önemlidir?

  • 🔍 Arama motorları sayfayı daha iyi anlar.

  • ♿ Erişilebilirlik yazılımları (screen reader) içeriği doğru okur.

  • 📐 Sayfa yapısı daha anlaşılır ve düzenli olur.

  • 🧠 Kodun okunabilirliği artar (sen ve ekip arkadaşların için).

3️⃣ Temel Semantik HTML Etiketleri

  • <h1> - <h6> → Başlıklar

  • <ul> / <ol> → Listeler

  • Ama bununla sınırlı değil, çok daha fazla semantik etiket vardır.

4️⃣ HTML Sayfasının Temel Yapısı

<html>
  <head></head>
  <body></body>
</html>

  • Asıl semantik yapı body içinde kurulur.

5️⃣ Sayfa Genel Semantik Yapısı

Tipik bir HTML sayfası şu şekilde düzenlenir:

<header></header>
<nav></nav>
<main></main>
<footer></footer>

🔹 <header>

  • Logo

  • Site başlığı

  • Üst alan bilgileri

🔹 <nav>

  • Ana menü linkleri

  • Genellikle <ul> içinde <a> etiketleri kullanılır

  • Çoğu zaman <header>’dan sonra gelir

🔹 <main>

  • Sayfanın asıl içeriği

  • Sayfada yalnızca 1 tane olmalıdır

🔹 <footer>

  • İletişim bilgileri

  • Sosyal medya linkleri

  • Telif hakkı bilgisi

6️⃣ <article> Etiketi

Tanım (W3C):

  • Kendi başına anlamlı,

  • Bağımsız olarak paylaşılabilir içerik.

📰 Gazete örneği:

  • Bir sayfada birçok haber vardır

  • Makasla kesip çıkarabildiğin her haber → article

📌 Örnek Article İçerikleri:

  • Blog yazısı

  • Forum gönderisi

  • Gazete / dergi makalesi

  • Kullanıcı yorumu

  • Widget / küçük uygulama

Blog Örneği:

  • Blog yazısı mutlaka <article> içinde olmalı

  • <article>, <main> içinde yer alır

7️⃣ Article İçinde Semantik Yapı

<article>
  <header>
    <h1>Blog Başlığı</h1>
    <p>Tarih - Yazar</p>
  </header>

  <p>Blog içeriği...</p>
</article>

  • Semantik etiketler iç içe kullanılabilir

  • Amaç: içeriği en doğru şekilde tanımlamak

8️⃣ <section> Etiketi

  • İçeriği bölümlere ayırmak için kullanılır

  • Her section başlık içermelidir

📌 Kullanım Alanları:

  • Makale içindeki alt bölümler

  • Sayfa içindeki farklı alanlar

⚠️ Önemli:

  • <section> article olmak zorunda değildir

  • Sayfanın yapısına göre bağımsız da kullanılabilir

9️⃣ Article mi Section mı?

DurumKullan
Bağımsız içerik<article>
Konu bölümü<section>
Blog yazısı<article>
Blog içindeki başlıklar<section>

🔟 Sonuç

  • Semantik HTML:

    • Sayfaya anlam kazandırır

    • Erişilebilirliği artırır

    • Arama motorlarının sayfayı daha iyi anlamasını sağlar

  • Doğru semantik yapı = iyi yazılmış web sayfası


zaman:
Etiketler:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)

Semantik HTML

  🎯 Semantik HTML Nedir? Semantik HTML, bir etiketin ne işe yaradığını ve anlamını açıkça belirtmesidir. Bu sayede: 🔍 Arama motorlar...

  • HTML ve CSS
      1. HTML ve CSS’in Tanımı ve Önemi HTML: Web sayfaları oluşturmak için temel işaretleme dili. İçeriğin yapısını tanımlar. CSS: HTML b...
  • Semantik HTML
      🎯 Semantik HTML Nedir? Semantik HTML, bir etiketin ne işe yaradığını ve anlamını açıkça belirtmesidir. Bu sayede: 🔍 Arama motorlar...