SEMANTİK HTML ETİKETLERİ

Semantik HTML etiketleri, içerik yapısını anlamlandırmak için kullanılan HTML etiketleridir. Semantik etiketler
tarayıcılara, arama motorlarına ve erişilebilirlik araçlarına içeriğin bir anlam ifade ettiğini belirtir. Görünüme bir
etkide bulunmazlar. Şimdi bunları inceleyelim.

<header> Etiketi
Bu etiket, içinde bulunan içeriğin sayfanın veya bir bölümün üst bölümü olduğunu belirtir. Genellikle ana başlık,
logo, menü gibi unsurları içerir.

<header>
<h1>HTML Dersleri</h1>
</header>

<nav> Etiketi
Sayfa içindeki navigasyon bağlantılarını (diğer alt sayfalar yönlendiren bağlantılar) barındırır. Üst veya yan
navigasyon menüsü gibi öğeler için idealdir.

<nav>
<a href="/html5-derleri/">HTML5 Dersleri</a> |
<a href="/css-dersleri/">CSS Dersleri</a> |
<a href="/javascript-dersleri/">JavaScript dersleri</a>
</nav>

<main> Etiketi
Sayfanın ana içeriğini temsil eder. Sayfanın birincil içeriği burada bulunur.

<main>
<h2>Tatil Rehberi</h2>
<p>Lorem ipsum dolor sit amet.</p>
</main>

<section> Etiketi
İçeriği mantıksal bir bölümde gruplamak için kullanılır. Örneğin haber, makale veya ürün bilgileri gibi bir konuyu
kapsayan bölümleri işaretlemek için kullanılabilir.

<section>
<h3>Macbook Air M2</h3>
<ul>
<li>..Özellik..</li>
<li>..Özellik..</li>
</ul>
</section>

<article> Etiketi
Bağımsız içeriği ifade eder. Blog yazıları, haber makaleleri veya forum gönderileri gibi kendi başına anlamlı içerikler
için uygundur.

<article>
<h2>05.11.2024 Tarihli Blog Yazısı</h2>

SEMANTİK HTML ETİKETLERİ 1

 <p>Lorem ipsum dolor sit amet.</p>
</article>

<aside> Etiketi
Ana içeriğe ek bilgiler olduğunu belirtir. Yan menüler, kenar çubukları gibi öğeler için idealdir.

<aside>
<h4>Ek Bilgiler</h4>
<p>Lorem ipsum dolor sit amet.</p>
<aside>

<figure> Etiketi
Görseller, grafikler veya diğer medya dosyalarını ve bunlara ait açıklamaları gruplamak için kullanılır. Bu etiket
içinde <figcaptin> etiketi içerisine bu medyalara ait açıklamalar yazılır.

<figure>
<img src="[Link]" alt="Amasya elması" width="250" height="250">
<figcaption>Amasya elması.</figcaption>
</figure>

<mark> Etiketi
İçeriğinin vurgulanmış bir metin olduğunu belirtir.

<p>Bu site bulunan içeriğin <mark>tüm hakkı saklıdır.</mark></p>

<time> Etiketi
İçeriğin tarih/saat olduğunu belirtir.

<time>05.11.2024</time>

Semantik (anlamsal) etiketleri kullanmak zorunda değiliz fakat kullanmak için birçok sebep vardır.

Semantik Etiketleri Kullanım Nedenleri

Erişilebilirlik: Yardımcı teknolojiler (örneğin ekran okuyucular) semantik etiketler sayesinde sayfanın yapısını
daha doğru bir şekilde yorumlayarak, engelli kullanıcıların sayfayı daha iyi algılamasına yardımcı olur.

Arama Motoru Optimizasyonu (SEO): Arama motorları, semantik etiketlerle işaretlenmiş içerikleri daha iyi
anlar ve indeksler. Bu da sayfanın arama motoru sonuçlarında daha iyi performans göstermesine ve üst
sıralarda görünmesine katkı sağlar.

Kodun Okunabilirliği ve Bakımı: Kodun yapısı daha anlaşılır olur. Kodumuzu güncelleyen diğer geliştiriciler
veya gelecekte kendiniz için bile bu yapı, kodu daha kolay anlamayı sağlar.

Standartlara Uyum: Semantik etiketlerin kullanımı, HTML standardına uygun bir yapı oluşturur ve web
geliştirme standartlarına uymayı teşvik eder.

SEMANTİK HTML ETİKETLERİ 2