HTML 5 Dersleri 2 - Semantik Elementler

Bu dersimiz ile Semantik Elementler konusunu işleyeceğiz. Semantik Elementler, SEO konusunda işimizi kolaylaştırmayı sağlar.

Taha Furkan Bayar Taha Furkan Bayar
Ekim 17, 2022 - 10:54 Updated: Ekim 18, 2022 - 11:45
0 116
HTML 5 Dersleri 2 - Semantik Elementler

HTML Semantik Elementler Nedir ?

Semantik kelimesi anlamlandırma ve anlam demektir. Semantik Elementler ise anlamlandırılmış elementler anlamına gelir. Aslında insanların anlayacağı kadar açık hale gelmiş içerik elementleri sadece insanlar değil yapay zekaların da daha iyi anlayabileceği anlamına gelebilir.

Semantik elementlere örneklerden verirsek <form>, <table, <img> gibi etiketleri örnek verebiliriz.

Semantik olmayan elementler için ise <div> ve <span> gibi etiketleri örnek verebiliriz.

HTML 5 Yeni Semantik Elementler

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

<section> Elementi Nasıl Kullanılır

<section> elementi bir dokümanın içindeki bir kısmı gösterir.

<section>
  <h1>TFB</h1>
  <p>Taha Furkan Bayar</p>
</section>

<article> Elementi Nasıl Kullanılır

Kısa anlatımla içerik kısmı olarak açıklayabiliriz.

  • Forum mesajları
  • Blog gönderileri
  • Haber yazıları
  • Yorumlar

Yukarıda maddelendiği gibi alanlarda kullanılabilir.

<article>
  <h1>Çılgın Yazılım</h1>
  <p>Çılgın Yazılım TFB</p>
</article>

<nav> Elementi Nasıl Kullanılır

<nav> elementi navigasyon kısımları detaylı sayfalar için önemlidir.

<nav>
 Anasayfa ---- bu alana linking yapılacak
 Dersler ---- bu alana linking yapılacak
</nav>

<aside> Elementi Nasıl Kullanılır

<aside> elementi içindeki içerik dışında farklı içerikler barındırır.

<p>Bu yarın arkadaşımla c....</p>
<aside>
  <h4>Cafe TFB</h4>
  <p>Cafe TFB - İstanbul'da bir mekan</p>
</aside>

<header> Elementi Nasıl Kullanılır

<header> elementi <section> için bir başlık niteliğindedir. <header> kapsayıcı olmalıdır. Bir dokümanda birden fazla kez kullanabiliriz.

<article>
  <header>
    <h1>Taha Furkan Bayar</h1>
    <p>Developer</p>
  </header>
  <p>Taha Furkan Bayar bir yazılım geliştiricidir.</p>
</article>

<footer> Elementi Nasıl Kullanılır

<footer> elementi bir doküman için alt bilgi tanımlar. Alt bilgi Websitelerin en alt kısımlarına bakarsanız görsel olarak kullanımını daha faydalı bir şekilde görmüş olursunuz.

<footer>
  <p>Design By Çılgın Yazılım</p>
  <p>2022</p>
</footer>

<figure> ve <figcaption> Elementi Nasıl Kullanılır

<figure> etiketi içerisinde resim, gösterim, diyagram ve kod listeleri gibi içeriklerin olduğunu gösterir. <figcaption> etiketi, <figure> etiketinin içeriğinde bulunan resime başlık koyar.

<figure>
  <img src="tfb.jpg" alt="Çılgın Yazılım" width="304" height="228">
  <figcaption>tfb1. - Çılgın Yazılım.</figcaption>
</figure>

Etiketler: