HTML Semantik (Anlamsal) Etiketler

Semantik (Anlamsal) Etiketler

Semantik (Anlamsal) etiketleri kullanmamız arama motorları açısından büyük önem taşımaktadır. Çünkü, oluşturmuş olduğumuz içeriği bu etiketler içerisinde belirtmemiz arama motorlarının sitemizi daha kolay indekslemesini sağlayacaktır. 

Şimdi ,semantik etiketleri tanıyalım ve örneklerle pekiştirmeye çalışalım. 

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

Şimdi de aşağıdaki görselde, <div> kullanımının karşılığı olan, semantik etiketleri inceleyelim. 

Şimdi de bu semantik etiketlerin bazılarını örnekler ile açıklayalım. 

<section> Etiketi

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>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<article> Etiketi

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

<article>
	<h2>Html Semantik Etiketler Nelerdir?</h2>
	<p>Html semantik etiketler nelerdir? Hangi amaçla kullanılır? Bu konumuzda bulabilirsiniz.</p>
</article>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<header> Etiketi

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="#">HTML</a></li>
			<li><a href="#">CSS</a></li>
		</ul>
	</nav>
</header>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<footer> Etiketi

<footer> 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="#">Anasayfa</a>-
      <a hef="iletisim.html">İletişim</a>-
      </p>
      </nav>
      <p>Telif Hakkı © 2021 Onur KUL - Tüm Hakları Saklıdır.</p>
 </footer>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<nav> Etiketi

<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="#">Html Semantik Etiketler Nelerdir?</a></li>
</ul>
</nav>
<nav>
		<h3>CSS</h3>
		<ul>
			<li><a href="#">CSS Nedir?</a></li>
			<li><a href="#">CSS Sözdizimi</a></li>
		</ul>
	</nav>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<aside> Etiketi

<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="#">HTML Semantik Etiketler Nelerdir?</a></li>
    </ul>
 </nav>

 <nav>
	<h3>CSS</h3>
    <ul>
		<li><a href="#">CSS Nedir?</a></li>
		<li><a href="#">CSS Sözdizimi</a></li>
	</ul>
 </nav>
</aside>

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.