Semantik HTML Nedir

admin · 04-21-2025, 06:11 PM

Semantik HTML Nedir
Semantik HTML, web sayfalarının içeriğini hem tarayıcılara hem de geliştiricilere anlamlı bir şekilde açıklayan HTML etiketlerini kullanma pratiğidir. Temel amaç, içeriğin yalnızca nasıl göründüğünü değil, ne anlama geldiğini de vurgulamaktır.
Geleneksel HTML'de, içeriği biçimlendirmek için sıklıkla

<div>

ve

<span>

gibi genel amaçlı etiketler kullanılırdı. Bu etiketler, içeriğin yapısı hakkında çok az bilgi verir veya hiç bilgi vermezdi. Semantik HTML ise

<article>

,

<nav>

,

<aside>

,

<header>

,

<footer>

gibi içeriğin rolünü ve anlamını açıkça belirten etiketler sunar.
Semantik HTML'in Faydaları Nelerdir?

Daha İyi SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik etiketleri kullanarak içeriğin bağlamını ve önemini daha iyi anlayabilir. Bu da arama sonuçlarında daha iyi sıralamalar elde etmeye yardımcı olabilir. Örneğin, bir

Kod:
<article>
etiketi içindeki içeriğin bir makale olduğunu anlarlar ve buna göre değerlendirirler.
Daha Erişilebilir Web Siteleri: Ekran okuyucular gibi yardımcı teknolojiler, semantik etiketleri kullanarak içeriği daha doğru bir şekilde yorumlayabilir ve kullanıcılara aktarabilir. Bu, web sitenizin daha geniş bir kitleye ulaşmasını sağlar. Örneğin,

Kod:
<nav>
etiketi bir gezinme bölümünü işaret eder ve ekran okuyucular bu bilgiyi kullanıcılara iletebilir.
Daha Anlaşılır ve Bakımı Kolay Kod: Semantik etiketler, HTML kodunun okunabilirliğini ve anlaşılırlığını artırır. Geliştiriciler, etiketlerin anlamını bildikleri için kodun ne yaptığını daha kolay anlayabilir ve üzerinde değişiklik yapabilirler. Bu da uzun vadede web sitesinin bakımını kolaylaştırır.
Daha İyi Yapılandırılmış İçerik: Semantik etiketler, içeriğin mantıksal yapısını vurgular. Bu, içeriğin düzenlenmesini ve stilendirilmesini kolaylaştırır. Örneğin, bir

Kod:
<aside>
etiketi genellikle ana içerikle ilgili ancak ayrı bir bilgi bölümünü işaret eder.
Daha İyi Tarayıcı Anlaması: Tarayıcılar, semantik etiketleri kullanarak içeriği daha iyi işleyebilir ve sunabilir. Bu, performansı artırabilir ve gelecekteki web teknolojileri için daha iyi bir temel oluşturabilir.

Bazı Yaygın Semantik HTML Etiketleri ve Kullanım Alanları:

Kod:
<article>
: Bağımsız ve kendi içinde anlamlı bir içeriği temsil eder (örneğin, bir blog gönderisi, bir haber makalesi).
Kod:
<aside>
: Ana içerikle dolaylı olarak ilişkili ancak ayrı bir içeriği temsil eder (örneğin, kenar çubuğu, alıntılar).
Kod:
<nav>
: Gezinme bağlantılarını içeren bir bölümü temsil eder (örneğin, menüler).
Kod:
<header>
: Bir bölümün veya tüm sayfanın tanıtım içeriğini temsil eder (örneğin, başlık, logo).
Kod:
<footer>
: Bir bölümün veya tüm sayfanın alt bilgisini temsil eder (örneğin, telif hakkı bilgileri, iletişim bilgileri).
Kod:
<main>
: Belgenin ana içeriğini temsil eder.
Kod:
<section>
: Tematik olarak gruplandırılmış içeriğin bir bölümünü temsil eder.
Kod:
<figure>
ve

Kod:
<figcaption>
: Resimler, grafikler vb. gibi bağımsız medyaları ve bunların başlıklarını temsil eder.
Kod:
<mark>
: Metin içinde vurgulanması gereken bir bölümü işaretler.
Kod:
<time>
: Tarih ve/veya saat bilgisini temsil eder.

Örnek:
Semantik olmayan HTML:
HTML

<div id="header">

  <div class="logo">Web Sitem</div>

  <div class="navigation">

    <ul>

      <li><a href="#">Anasayfa</a></li>

      <li><a href="#">Hakkımızda</a></li>

      <li><a href="#">İletişim</a></li>

    </ul>

  </div>

</div>

<div id="main">

  <div class="article">

    <h1>Makale Başlığı</h1>

    <p>Makale içeriği...</p>

  </div>

  <div class="sidebar">

    <h3>İlgili Bağlantılar</h3>

    <ul>

      <li><a href="#">Bağlantı 1</a></li>

      <li><a href="#">Bağlantı 2</a></li>

    </ul>

  </div>

</div>

<div id="footer">

  <p>© 2023 Tüm Hakları Saklıdır.</p>

</div>

Semantik HTML:
HTML

<header>

  <div class="logo">Web Sitem</div>

  <nav>

    <ul>

      <li><a href="#">Anasayfa</a></li>

      <li><a href="#">Hakkımızda</a></li>

      <li><a href="#">İletişim</a></li>

    </ul>

  </nav>

</header>

<main>

  <article>

    <h1>Makale Başlığı</h1>

    <p>Makale içeriği...</p>

  </article>

  <aside>

    <h3>İlgili Bağlantılar</h3>

    <ul>

      <li><a href="#">Bağlantı 1</a></li>

      <li><a href="#">Bağlantı 2</a></li>

    </ul>

  </aside>

</main>

<footer>

  <p>© 2023 Tüm Hakları Saklıdır.</p>

</footer>

Bu örnekte görüldüğü gibi, semantik etiketler kullanılarak içeriğin farklı bölümleri (başlık, gezinme, ana içerik, kenar çubuğu, alt bilgi) daha anlamlı bir şekilde işaretlenmiştir. Bu, hem geliştiricilerin hem de tarayıcıların içeriği daha iyi anlamasına yardımcı olur.
Semantik HTML, modern web geliştirmenin önemli bir parçasıdır ve daha erişilebilir, SEO dostu ve bakımı kolay web siteleri oluşturmak için temel bir prensiptir.