Semantik HTML, her etiketin içeriğinin anlamını tarif ettiği işaretlemedir: gezinme için , kendi başına anlamlı bir parça için , bir buton için . Tarayıcı, ekran okuyucular ve arama motorları böylece sayfayı class adlarından ya da stillerden tahmin etmeden anlayabilir.

Çalıştırılabilir HTML Dokümanları: Semantik HTML

Q: HTML'deki semantik etiketler nelerdir?

Yerleşim etiketleri , , , , , ve şeklindedir. Diğer yaygın semantik etiketler arasında , , , , , ve ile arası başlıklar vardır.

Q: div semantik bir element mi?

Hayır. elementinin kendine ait bir anlamı yoktur; stil ve yerleşim için genel bir kutudur. Hiçbir semantik etiket uymadığında onu, biri uyduğunda da , , ve diğerlerini kullan.

Q: Bir sayfada kaç tane main elementi olabilir?

Sayfa başına görünür tek bir . O sayfaya özgü içeriği sarar ve , , , ya da içinde durmamalıdır.

Semantik HTML nedir

Semantik (anlamsal) HTML, her etiketi içeriğin ne olduğuna göre seçmek demektir: gezinme <nav> içine, ana içerik <main> içine, bir blog yazısı <article> içine girer. Etiketler düz kutular gibi görünür, ama tarayıcıya, ekran okuyuculara ve arama motorlarına sayfanın her parçasının ne yaptığını söyler. İşte her biri çerçevelenmiş ve etiketlenmiş, semantik yerleşim etiketleriyle kurulmuş eksiksiz bir sayfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

<style> elementini sil, sayfa düz metin gibi görünür, ama yapı hem kodu okuyan herkes hem de onu piksellere bakmadan okuyan yazılımlar için hâlâ oradadır.

Semantik yerleşim etiketleri

Etiket	Ne için kullanılır	Ekran okuyucu landmark'ı
`<header>`	Sayfanın ya da bir makalenin girişi: logo, başlık, yazar satırı	banner (yalnızca `article`, `aside`, `main`, `nav` ya da `section` içinde değilse)
`<nav>`	Başlıca gezinme linklerinden oluşan bir blok	navigation
`<main>`	Bu sayfaya özgü içerik, sayfada bir kez	main
`<article>`	Kendi başına anlamlı, bağımsız bir parça: bir yazı, bir yorum, bir ürün kartı	varsayılan olarak yok
`<section>`	Kendi başlığı olan, bir temaya ait içerik grubu	region, yalnızca erişilebilir bir adı varsa
`<aside>`	Ana akışın yanındaki ilgili içerik: bir kenar çubuğu, bir not	complementary
`<footer>`	Sayfanın ya da bir makalenin kapanış bilgileri: telif hakkı, yazar, linkler	contentinfo (yalnızca sayfa seviyesinde)

Her etiketin daha fazla ayrıntı içeren kendi sayfası var: header, nav, section ve footer. Bu sayfa onların nasıl bir araya geldiğini anlatıyor.

Neden sadece div kullanılmamalı

Yalnızca <div> elementlerinden kurulmuş bir sayfa semantik olanla birebir aynı görünebilir. Fark, işaretlemenin ne söylediğidir. Her sürümde anlam taşıyan elementleri çerçevelemek için butonlara bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Div sürümü 0 bulur, semantik sürüm 4 bulur. Yardımcı teknolojilerin gördüğü budur: bir ekran okuyucu kullanıcısı semantik sayfada doğrudan gezinmeye ya da ana içeriğe atlayabilir, div sayfasında ise her şeyi baştan sona okumak zorunda kalır. class="nav" gibi class adları tarayıcı için hiçbir şey ifade etmez.

<div>, ilk örnekteki .cols flex sarmalayıcısı gibi yalnızca stil ya da yerleşim için var olan kutular için hâlâ doğru seçimdir.

main, article ve aside

<main> bu sayfaya özgü olanı sarar ve bir kez görünür. İçinde <article>, başka bir siteye tek başına kopyalandığında da anlamlı olacak içeriği; <aside> de ilgili olan ama makaleyi bozmadan çıkarılabilecek içeriği işaretler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

Makalenin kendi <header> ve <footer> elementleri var. Bunlar sayfa seviyesiyle sınırlı değildir: her biri en yakın makalesini ya da bölümünü açar veya kapatır. <time datetime> elementi, tarihi insanların okuyacağı biçimde gösterirken makinelerin okuyabileceği bir biçimde de verir.

Başlık ana hattını kontrol et

Başlıklar yapının diğer yarısıdır. Ekran okuyucu kullananlar bir sayfada çoğunlukla başlıktan başlığa ilerler, bu yüzden seviyeler, hiçbir seviye atlanmadan bir içindekiler tablosu gibi okunmalı. Bu script içinde çalıştığı sayfanın ana hattını yazdırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

"Brewing" altındaki h4 bir seviye atlıyor. Onu h3 yap, ana hat düzgün okunur. Başlık seviyelerini yapıya göre seç, daha büyük ya da küçük olmalarını istiyorsan boyutlarını CSS ile değiştir.

Daha fazla semantik etiket

Semantik yalnızca yerleşimle ilgili değildir. Bu metin seviyesindeki etiketler de anlam taşır:

Etiket	Anlamı
`<strong>`	Önemli metin (varsayılan olarak kalın)
`<em>`	Vurgulu metin (varsayılan olarak italik)
`<figure>` ve `<figcaption>`	Açıklamasıyla birlikte bir resim, grafik ya da kod örneği
`<time datetime="...">`	Makinelerin okuyabileceği biçimde bir tarih ya da saat
`<address>`	Sayfanın ya da makale yazarının iletişim bilgileri
`<mark>`	Bir arama eşleşmesi gibi vurgulanmış metin
`<abbr title="...">`	Açılımıyla birlikte bir kısaltma
`<button>`	Bir eylem gerçekleştiren şey

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Açılımını bir ipucunda görmek için "W3C" kısaltmasının üzerine gel.

Sık yapılan hatalar

Bir etiketi görünüşü için kullanmak. <blockquote> girinti için değil, alıntılar içindir; <h3> orta boyutlu kalın metin için değil, bir başlık seviyesi içindir. Stili CSS ile ver.
Her şeyi <section> ile sarmak. Bir section'ın bir başlığı ve bir teması olmalı. Stil için bir kutuya ihtiyacın varsa <div> kullan.
Birden fazla görünür <main>. Sayfa başına bir tane tut ve asla <article>, <aside>, <header>, <nav> ya da <footer> içine yerleştirme.
Her link listesini <nav> içine koymak. Onu site menüsü ya da içindekiler tablosu gibi başlıca gezinme blokları için sakla. Bir footer'daki birkaç link buna ihtiyaç duymaz.
Tıklanabilir <div> elementleri. Bir <div onclick> elementine klavyeyle ulaşılamaz. Eylemler için <button>, gezinme için <a href> kullan.

Sıkça Sorulan Sorular

Semantik HTML nedir?

Semantik HTML, her etiketin içeriğinin anlamını tarif ettiği işaretlemedir: gezinme için <nav>, kendi başına anlamlı bir parça için <article>, bir buton için <button>. Tarayıcı, ekran okuyucular ve arama motorları böylece sayfayı class adlarından ya da stillerden tahmin etmeden anlayabilir.

HTML'deki semantik etiketler nelerdir?

Yerleşim etiketleri <header>, <nav>, <main>, <article>, <section>, <aside> ve <footer> şeklindedir. Diğer yaygın semantik etiketler arasında <figure>, <figcaption>, <time>, <address>, <strong>, <em> ve <h1> ile <h6> arası başlıklar vardır.

div semantik bir element mi?

Hayır. <div> elementinin kendine ait bir anlamı yoktur; stil ve yerleşim için genel bir kutudur. Hiçbir semantik etiket uymadığında onu, biri uyduğunda da <header>, <main>, <nav> ve diğerlerini kullan.

aside etiketi ne için kullanılır?

<aside> ana içerikle ilgili ama onun akışının parçası olmayan içeriği tutar: bir kenar çubuğu, bir ilgili linkler kutusu, bir sözlük notu ya da bir alıntı. Sayfa seviyesinde ekran okuyucular onu complementary landmark olarak listeler.

Bir sayfada kaç tane main elementi olabilir?

Sayfa başına görünür tek bir <main>. O sayfaya özgü içeriği sarar ve <header>, <nav>, <article>, <aside> ya da <footer> içinde durmamalıdır.

Semantik HTML SEO'ya yardımcı olur mu?

Arama motorlarının sayfanın hangi kısmının ana içerik, hangisinin gezinme olduğunu ve başlıkların birbiriyle nasıl ilişkili olduğunu anlamasına yardım eder. Tek başına bir sıralama kestirmesi değildir, ama tahmin işini ortadan kaldırır ve zaten yapmaya değer olan erişilebilirliği iyileştirir.

İlgili kavramlar