HTML Semantik Elementler — Gerçekten Anlam İfade Eden HTML Yazın

Her şey için <div> kullandıysanız — sayfa sarmalayıcı, gezinme, makale kapsayıcı, kenar çubuğu — yalnız değilsiniz. Yıllarca bu standart yoldu. Ancak HTML, HTML5'ten bu yana uygun anlamsal öğelere sahip ve bunları kullanmak kodunuzu daha okunabilir, SEO açısından daha iyi ve gerçekten daha erişilebilir kılıyor. Gerçekten önemli öğeleri inceleyelim.

"Anlamsal" kelimesi, öğenin görsel sunumunun ötesinde bir anlam taşıdığı anlamına gelir. <div> hiçbir şey ifade etmez — genel bir bloktur. <nav> ise tarayıcıya, arama motorlarına ve yardımcı teknolojilere şunu söyler: "bu gezinme bağlantıları içeriyor." Bu bağlamı eklemek size hiçbir maliyete yol açmaz ve birçok açıdan karşılığını verir.

Semantik Neden Önemlidir

Teorik değil, üç gerçek fayda:

SEO. Arama motorları, içerik hiyerarşisini anlamak için belge yapısını kullanır. <main> öğesi birincil içeriği işaret eder. İçindeki <article> bağımsız bir parçayı işaret eder. Google, sayfaları sıralarken bu sinyalleri kullanır.
Erişilebilirlik. Ekran okuyucular kullanıcılara yer imi bölgelerini sunar. <nav>, <main> ve <aside> mevcut olduğunda, klavye kullanıcıları sayfadaki her bağlantıya sekme yapmadan doğrudan istedikleri bölüme atlayabilir.
Sürdürülebilirlik. Şablonunuzu okuyan yeni bir geliştirici sayfa yapısını hemen anlar. <header>/<main>/<footer>, <div class="top">/<div class="content">/<div class="bottom">'un yapamadığı şekilde kendini belgeler.

Temel Düzen Öğeleri

Bu beş öğe, çoğu sayfanın dış iskeletini yönetir. Her sayfada kullanın ve anlamsal savaşın yarısını çoktan kazanmış olursunuz:

html

<body>
  <header>
    <a href="/" class="logo">MyBlog</a>
    <nav>
      <ul>
        <li><a href="/articles">Articles</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Primary page content goes here -->
  </main>

  <aside>
    <!-- Sidebar: related links, ads, author bio -->
  </aside>

  <footer>
    <p>&copy; 2026 MyBlog. All rights reserved.</p>
  </footer>
</body>

<header>. Sayfa veya bölüm için giriş içeriği. Genellikle logo, site başlığı ve birincil gezinmeyi içerir. Ayrıca bir <article> içinde makalenin kendi başlık bloğu için de kullanabilirsiniz.
<nav>. Bir dizi gezinme bağlantısı. Her bağlantı grubu <nav> gerektirmez — site gezinmesi veya sayfalama gibi büyük gezinme blokları için kullanın.
<main>. Sayfanın baskın içeriği. Sayfa başına yalnızca bir <main> olmalı ve sayfalar arasında tekrarlanan hiçbir şeyi (header, nav, footer) içermemelidir.
<aside>. Ana içerikle dolaylı olarak ilgili içerik. Kenar çubukları, alıntılar, ilgili makaleler. Ekran okuyucular bunu tamamlayıcı bir yer imi olarak sunar.
<footer>. Sayfa veya bölüm için alt bilgi. Telif hakkı bilgisi, ikincil gezinme, iletişim bağlantıları veya kısa bir yazar notu içerebilir.

Yaygın hata: <header> ve <footer> yalnızca sayfa düzeyiyle sınırlı değildir. Her <article> veya <section> kendi <header> ve <footer>'ına sahip olabilir. Bu, blog yazısı imza satırları ve makale düzeyi meta veriler için özellikle kullanışlıdır.

article ve section — Her Birini Ne Zaman Kullanmalı

İnsanları en çok şaşırtan konu bu. Gerçekten işe yarayan pratik kural: içerik kendi başına yayımlansa mantıklı olur muydu (örneğin RSS girdisi olarak veya başka bir sitede paylaşılsa) — evet ise <article>. Yalnızca daha büyük bir bütünün parçası olarak anlam taşıyorsa <section>.

html

<!-- article: self-contained, could stand alone -->
<article>
  <header>
    <h2>Understanding HTTP/2 Push</h2>
    <p>By Alice Chen — <time datetime="2026-03-15">March 15, 2026</time></p>
  </header>
  <p>HTTP/2 Server Push lets the server send resources...</p>
  <footer>
    <p>Tagged: <a href="/tags/http">HTTP</a>, <a href="/tags/performance">Performance</a></p>
  </footer>
</article>

<!-- section: thematic grouping within a page -->
<section>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/http3-quic">HTTP/3 and QUIC Explained</a></li>
    <li><a href="/cdn-strategy">CDN Strategy for Global Apps</a></li>
  </ul>
</section>

<section> her zaman bir başlığa sahip olmalıdır (<h2>'den <h6>'ya kadar). Bölümünüzün başlığı yoksa bu genellikle <div> kullanmanız gerektiğinin işaretidir. WHATWG spesifikasyonu bu konuda açıktır: <section> tematik gruplamalar içindir, rastgele düzen bölümleri için değil.

figure, figcaption, time ve address

Geliştiricilerin sıkça gözden kaçırdığı ama düzenli olarak ihtiyaç duyduğu dört öğe:

html

<!-- figure + figcaption: images, code blocks, diagrams, charts -->
<figure>
  <img src="/images/latency-chart.png" alt="P99 latency over 24 hours showing a spike at 14:30">
  <figcaption>Figure 1: API latency during the Tuesday incident (UTC).</figcaption>
</figure>

<!-- A code block as a figure (totally valid) -->
<figure>
  <pre><code>const result = await db.query('SELECT * FROM users WHERE active = true');</code></pre>
  <figcaption>Listing 1: Basic active user query.</figcaption>
</figure>

<!-- time: machine-readable dates and times -->
<p>Published <time datetime="2026-04-16T09:00:00Z">April 16, 2026</time></p>
<p>Sale ends in <time datetime="PT2H30M">2 hours 30 minutes</time></p>

<!-- address: contact info for nearest article or body ancestor -->
<address>
  Written by <a href="mailto:[email protected]">Alice Chen</a>.<br>
  123 Dev Street, San Francisco, CA.
</address>

<figure>. Ana akıştan atıfta bulunulan bağımsız içerik — görüntüler, kod listeleri, grafikler, videolar. Temel nokta: okuma akışını bozmadan eke taşınabilir olması.
<figcaption>. <figure> için açıklama yazısı. <figure>'ın ilk veya son çocuğu olmalıdır. Bir görüntünün altındaki <p>'nin sağlamadığı anlamsal bir ilişki kurar.
<time>. Makine tarafından okunabilir datetime özelliğiyle insan tarafından okunabilir tarihler. datetime değeri ISO 8601 formatını kullanır. Arama motorları bunu etkinlik işaretlemesi ve tazelik sinyalleri için kullanır.
<address>. En yakın <article> atası için iletişim bilgisi (veya tüm <body>). Genel amaçlı bir adres öğesi değildir — özellikle içerik yazarının veya site sahibinin iletişim bilgileri içindir.

Divitis Anti-Kalıbı

"Divitis", HTML'inizdeki her öğenin bir <div> olması durumudur. İşte sorunu gösteren gerçek bir önce/sonra karşılaştırması:

html

<!-- Before: divitis -->
<div class="page">
  <div class="header">
    <div class="brand">TechBlog</div>
    <div class="nav">
      <div class="nav-item"><a href="/posts">Posts</a></div>
    </div>
  </div>
  <div class="post">
    <div class="post-title">Why TypeScript Is Worth It</div>
    <div class="post-meta">By Bob — Jan 2026</div>
    <div class="post-body">TypeScript adds static types to JavaScript...</div>
  </div>
</div>

<!-- After: semantic HTML -->
<body>
  <header>
    <span class="brand">TechBlog</span>
    <nav>
      <a href="/posts">Posts</a>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Why TypeScript Is Worth It</h1>
        <p>By Bob — <time datetime="2026-01-10">January 10, 2026</time></p>
      </header>
      <p>TypeScript adds static types to JavaScript...</p>
    </article>
  </main>
</body>

Anlamsal sürüm aslında daha kısa, daha az CSS sınıf adı gerektiriyor ve tarayıcılara ile yardımcı araçlara sayfa yapısını anlamak için ihtiyaç duydukları her şeyi sağlıyor. CSS ile her şeyi tamamen aynı şekilde stillendirmeye devam edebilirsiniz — anlamsal öğeler hiçbir görsel kısıtlama getirmez.

ARIA Rolleri — Son Çare, İlk Tercih Değil

ARIA rolleri, doğal olarak anlam taşımayan öğelere anlamsal anlam eklemenizi sağlar. Sorun şu ki geliştiriciler, anlamsal bir HTML öğesinin işi daha iyi yapacağı durumlarda ARIA'ya başvuruyor. ARIA'nın birinci kuralı: native HTML kullanabiliyorsanız ARIA kullanmayın.

html

<!-- Wrong: using ARIA where native HTML works -->
<div role="navigation">
  <a href="/home">Home</a>
</div>

<!-- Right: just use the semantic element -->
<nav>
  <a href="/home">Home</a>
</nav>

<!-- ARIA is appropriate here: custom widget with no HTML equivalent -->
<div
  role="tablist"
  aria-label="Code examples"
>
  <button role="tab" aria-selected="true" aria-controls="panel-js">JavaScript</button>
  <button role="tab" aria-selected="false" aria-controls="panel-py">Python</button>
</div>

ARIA'yı native HTML'nin kapsamadığı etkileşimli widget'lar için kullanın — sekme panelleri, birleşik kutular, ağaç görünümleri, tarih seçiciler. Gezinme, başlıklar ve ana içerik gibi yapısal yer imleri için her seferinde native öğelere güvenin.

Tam Blog Yazısı Sayfa Yapısı

Tam anlamsal bir blog yazısı sayfası şöyle görünür. Bu, ekstra çaba harcamadan erişilebilirlik denetimlerinde iyi puan alan sitelerde kullanılan kalıptır:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Why TypeScript Is Worth It — TechBlog</title>
</head>
<body>
  <header>
    <a href="/" class="logo">TechBlog</a>
    <nav aria-label="Site navigation">
      <ul>
        <li><a href="/posts">Posts</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Why TypeScript Is Worth It</h1>
        <address>
          By <a rel="author" href="/authors/bob">Bob Martinez</a>
        </address>
        <p>Published <time datetime="2026-01-10">January 10, 2026</time></p>
      </header>

      <section>
        <h2>The Setup Cost Is Real but Front-Loaded</h2>
        <p>TypeScript adds a compilation step and requires type annotations...</p>

        <figure>
          <pre><code>interface User {
  id: number;
  name: string;
  email: string;
}</code></pre>
          <figcaption>Listing 1: A typed User interface catches shape errors at compile time.</figcaption>
        </figure>
      </section>

      <section>
        <h2>Where TypeScript Pays Off</h2>
        <p>The ROI kicks in as team size and codebase complexity grows...</p>
      </section>

      <footer>
        <p>
          Tagged: <a href="/tags/typescript">TypeScript</a>,
          <a href="/tags/javascript">JavaScript</a>
        </p>
      </footer>
    </article>

    <aside aria-label="Related articles">
      <h2>You Might Also Like</h2>
      <ul>
        <li><a href="/ts-vs-js">TypeScript vs JavaScript — A Practical Comparison</a></li>
        <li><a href="/ts-generics">TypeScript Generics Explained</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <nav aria-label="Footer navigation">
      <a href="/privacy">Privacy</a>
      <a href="/terms">Terms</a>
    </nav>
    <p><small>&copy; 2026 TechBlog</small></p>
  </footer>
</body>
</html>

<header> ve <footer>'ın çift kullanımına dikkat edin — bir kez sayfa düzeyinde, bir kez <article> içinde. Bu kasıtlı ve doğrudur. Ayrıca farklı aria-label değerlerine sahip iki <nav> öğesine dikkat edin — bu, ekran okuyucuların iki özdeş "gezinme" bölgesi listelemesini önler.

Hızlı Referans: Faydalı Araçlar

HTML ile çalışıyor ve işaretlemenizi temizlemek veya doğrulamak istiyorsanız, HTML Formatter kodunuzu düzgün biçimlendirir, HTML Validator ise kapatılmamış etiketler ve eksik gerekli özellikler gibi yapısal hataları yakalar. Daha kapsamlı bir erişilebilirlik denetimi için web.dev/accessibility mükemmel tanı araçları ve açıklamalar sunar.

Özet

Anlamsal HTML, kuralları salt kural olsun diye izlemekle ilgili değildir — tarayıcılara, arama motorlarına, yardımcı araçlara ve şablonunuzu okuyacak bir sonraki geliştiriciye açıkça iletişim kuran kod yazmakla ilgilidir. Temel öğeler basittir: <header>, <nav>, <main>, <article>, <section>, <aside> ve <footer>, gerçek sayfa yapılarının büyük çoğunluğunu karşılar. Uygun olduğunda <figure>, <time> ve <address> ekleyin, native HTML yetersiz kaldığında ARIA'ya başvurun; böylece gerçekten çalışmaktan zevk alınan bir işaretlemeniz olur.

← All HTML articles Browse all categories →