Html Semantik Etiketler - Html Dersleri

[VexraDev]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Html5 ile gelen anlamsal etiketler yani semantic elements nedir, hangi amaçla ve nasıl kullanılır?

Html5 ile gelen html5 anlamsal etiketler yani semantic etiketleri kullanmamız arama motorları açısından büyük önem taşımaktadır. Çünkü oluşturduğumuz içerikleri html semantik etiketler içinde sunuyor olmamız sitemizi indekslemeye gelen arama motorlarına içerik ile alakalı daha anlamsal bilgi sunduğumuzdan dolayı ziyaretçi sayımızı olumlu etkileyecektir.

Örneğin <h1> etiketi de bir semantik etikettir. Çünkü <h1> etiketi içine aldığımız başlık sayfamızın en önemli özet bilgisi olarak algılanır ve sayfada bir tane kullanmamız önerilir.

Şöyle ki <h1> etiketi ile oluşturduğumuz bir başlığın nasıl göründüğünden çok hangi anlamda bilgi sunduğu önemlidir.

<h1> 
   VexraDev ile Turkmmo Html Dersleri
</h1>

kullanımı ile tarayıcı varsayılanına göre 32px lik koyu bir yazı oluşturmuş oluruz ki; önemli olan görüntü olmuş olsa bu durumda aynı başlığı <span> etiketi ile de oluşturabiliriz.

<span style="font-size:32px;font-weight:bold;"> 
    VexraDev ile Turkmmo Html Dersleri
</span>

iki durumda da aynı görüntüye sahip oluruz ancak <span> etiketi arasına aldığımız yazının sitemiz açısından ne kadar önem taşıdığını arama motorları tespit edemez.

Html5' de kullanabileceğimiz semantik etiketler fazladır. Site tasarımı yaparken kullandığımız ve sayfamızın ana ögelerini temsil edecek olan bazı semantik etiketler aşağıdaki gibidir.

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure>
• <figcaption>
• <footer>
• <details>
• <summary>
• <mark>
• <time>

Aşağıdaki resimlerde semantik etiketlerin karşılığı olan <div> kullanım örneklerini inceleyiniz.

HTML5 <section> Element
Sayfada bir bölme oluşturmak istediğimiz zaman kullanılır. Anlamsal olarak <article> etiketi gibi özel bir anlam ifade etmez. Ancak sayfa tasarımını belli bölümlere ayırmak istediğimizde kullanırız.

<section>
  <h2>Bize Ulaşın</h2>
  <p>İletişime geçmek için aşağıdaki formu doldurunuz.</p>
</section>

HTML5 <article> Element
Bir makale oluşturmak istediğimizde <article> anlamsal etiketini kullanırız.

<article>
    <h2>Html nedir?</h2>
    <p>Html nedir ve ne amaçla kullanılır, bu yazımızda bulabilirsiniz.</p>
    <p>
         Sadık Turan tarafından <time datetime="2018-05-06 19:00">5 Mayıs tarihinde yayınlandı.</time>
     </p>
</article>

HTML5 <header> Element
Başlık kısmını oluşturmak istediğimizde kullanırız. <header> etiketini sadece site başlık kısmı değil de section, article, footer gibi diğer anlamsal etiketlerin <header> kısmı olarak da kullanılabilir.

<header>        
    <img id="logo" src="logo.png">
    <nav>
        <ul>
            <li><a href="#">anasayfa</a></li>
            <li><a href="#">kurs</a></li>
            <li><a href="#">makale</a></li>
        </ul>
    </nav>
</header>

HTML5 <footer> Element
<footer> semantic tag etiketini sayfamızın en alt kısmında site hakkındaki ek açıklamalar için eklediğimiz footer kısmı için kullanabiliriz.

<footer> 
    <nav>
      <p>
        <a href="/">Home</a>-
        <a hef="/contact.html">Contact</a>-
        <a href="/terms.html">Terms of usage</a>
      </p>
    </nav>
    <p>Copyright © 2019 VexraDev</p>
 </footer>

HTML5 <nav> Element
<nav> semantik etiketini navigation yani menü kısımlarını oluştururken kullanırız.

<nav>
    <h3>Html</h3>
    <ul>
        <li><a href="#">html nedir?</a></li>
        <li><a href="#">ilk html sayfası</a></li>
    </ul>
</nav>

<nav>
    <h3>Css</h3>
    <ul>
        <li><a href="#">Html Nedir?</a></li>
        <li><a href="#">Html Etiketleri</a></li>
    </ul>
</nav>

HTML5 <aside> Element
<aside> semantik etiketini sayfamızın sol ya da sağ tarafında oluşturduğumuz sidebar içerikleri için kullanırız.

<aside>
 <h2>Kategoriler</h2>

 <nav>
    <h3>Html</h3>
    <ul>
        <li><a href="#">html nedir?</a></li>
        <li><a href="#">ilk html sayfası</a></li>
    </ul>
 </nav>

 <nav>
    <h3>Css</h3>
    <ul>
        <li><a href="#">Html Nedir?</a></li>
        <li><a href="#">Html Etiketler</a></li>
    </ul>
 </nav>
</aside>