Html Ders 8 – Semantik HTML

Semantik HTML, web sayfalarınızı daha anlamlı, erişilebilir ve arama motorları için optimize edilmiş hale getiren bir yaklaşımdır. Geleneksel HTML etiketleri sadece görünümü tanımlarken, semantik etiketler içeriğin anlamını belirtir.

Semantik HTML Nedir?

Semantik HTML, web sayfalarındaki öğelerin anlamlarını doğru bir şekilde ifade eden HTML etiketlerini kullanmayı ifade eder. Geleneksel HTML (örneğin <div> ve <span>) sadece görünümü tanımlarken, semantik etiketler içeriğin rolünü ve amacını belirtir. Örneğin, <article> etiketi bir makaleyi temsil ederken, <nav> etiketi navigasyon menüsünü temsil eder.

Neden Semantik HTML Kullanılmalı?

  • Erişilebilirlik: Ekran okuyucular ve diğer yardımcı teknolojiler, semantik etiketleri kullanarak içeriği daha iyi anlayabilir ve kullanıcılara daha anlamlı bir deneyim sunabilir.
  • SEO (Arama Motoru Optimizasyonu): Arama motorları, sayfa içeriğini anlamak için semantik etiketleri kullanır. Bu, web sitenizin arama sonuçlarında daha üst sıralarda yer almasına yardımcı olabilir.
  • Bakım Kolaylığı: Semantik HTML, kodunuzu daha okunabilir ve anlaşılır hale getirir, bu da bakımını ve güncellenmesini kolaylaştırır.
  • Duyarlı Tasarım: Semantik etiketler, duyarlı tasarımlar oluşturmayı kolaylaştırır çünkü içeriğin anlamı korunur ve farklı ekran boyutlarına uyum sağlamak daha basittir.

Yaygın Kullanılan Semantik Etiketler:

  • <header>: Bir sayfanın veya bölümün başlığını tanımlar. Genellikle logo, navigasyon menüsü ve arama çubuğu gibi öğeleri içerir.
  • <nav>: Web sitesinin ana navigasyon menüsünü tanımlar.
  • <main>: Sayfanın ana içeriğini tanımlar. Bir sayfada sadece bir <main> etiketi olmalıdır.
  • <article>: Bağımsız, kendi başına anlamlı bir içerik parçasını temsil eder (örneğin, blog yazısı, haber makalesi).
  • <aside>: Ana içerikle ilişkili ancak ondan bağımsız olan içeriği tanımlar (örneğin, reklamlar, yan sütunlar, ilgili bağlantılar).
  • <footer>: Bir sayfanın veya bölümün altbilgisini tanımlar. Genellikle telif hakkı bilgileri, iletişim bilgileri ve sosyal medya bağlantıları gibi öğeleri içerir.
  • <section>: Sayfadaki bir bölümü tanımlar. Her <section> genellikle bir başlık (<h1> – <h6>) ile ilişkilendirilir.
  • <time>: Bir tarih veya zamanı belirtmek için kullanılır.

Semantik HTML Kullanım Örnekleri:

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Semantik Web Sayfası</title>
</head>
<body>

  <header>
    <h1>Web Geliştirme Blogu</h1>
    <nav>
      <ul>
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML Semantik Etiketler</h2>
      <p>Semantik HTML, web sayfalarınızı daha anlamlı hale getirir...</p>
    </article>
  </main>

  <footer>
    <p>© 2023 Web Geliştirme Blogu</p>
  </footer>

</body>
</html>

<div> ve <span> Etiketlerinin Yerini Semantik Etiketler Almalı mı?

<div> ve <span> etiketleri, genel amaçlı kapsayıcılar olarak hala kullanılabilirler, ancak semantik anlamları yoktur. Mümkün olduğunca, içeriğin anlamını daha iyi ifade eden semantik etiketler kullanılmalıdır. <div> ve <span> etiketlerini sadece stil uygulamak veya JavaScript ile belirli öğeleri seçmek için kullanılmalıdır.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler