1329

Komple Uygulamalı Web Geliştirme Eğitimi

Html Semantik Etiketler

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> 
    Komple Uygulamalı Web Geliştirme Eğitimi 
</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;"> 
    Komple Uygulamalı Web Geliştirme Eğitimi
</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>

Örnek 1 için tıklayınız.

 

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>

Örnek 2 için tıklayınız.

 

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>

Örnek 3 için tıklayınız.

 

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 © 2018 Sadık Turan</p>
 </footer>

Örnek 4 için tıklayınız.

 

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="#">Css nedir?</a></li>
		<li><a href="#">Css söz dizimi</a></li>
	</ul>
</nav>

Örnek 5 için tıklayınız.

 

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="#">Css nedir?</a></li>
		<li><a href="#">Css söz dizimi</a></li>
	</ul>
 </nav>
</aside>

Örnek 6 için tıklayınız.