FrontEnd Developer RoadMap - HTML 5 Tutorial 27 Semantik Etiketler - Div Elementi 2

Merhabalar, bu yazımda bir önceki yazımın sonunda ele aldığımız etiketlere bir kere de özel olarak değinmek istiyorum.

Div etiketlerine Html5 ile beraber semantik(anlamsal) etiket tanımlamasıyla yeni etiketler katıldı. Bunlarında div gibi CSS değerleri verilmeden bir anlamları yoktur. Ancak Tarayıcıların bölümleri tanımlaması kod yazanların daha temiz kod yazması için güzel bir geliştirme olmuştur.

Anlamsal Etiketler

<article> <aside> <details> <figcaption> <figure> <footer>

<header> <main> <mark> <nav> <section> <summary> <time>

Etiket	Açıklama
<article>	İçeriğin makale, deneme olduğunu belirtir.
<aside>	İçeriğin ana içerik haricinde yan menü, yan içerik olduğunu belirtir.
<details>	Özet için detay bilgisi tanımlar.
<figcaption>	<figure> etiketi için başlık belirtir.
<figure>	İçeriğin şekil, fotoğraf, şema olduğunu belirtir.
<footer>	İçeriğin sayfa veya bölüm altı bilgisi olduğunu belirtir.
<header>	İçeriğin sayfa veya bölüm başlığı olduğunu belirtir.
<main>	Sayfa içeriğinin ana kökünü belirtir.
<mark>	İçeriğin vurgulanmış, işaretlenmiş olduğunu belirtir.
<nav>	İçeriğin menü olduğunu belirtir.
<section>	İçeriğin sayfanın bir bölümü olduğunu belirtir.
<summary>	<details> etiketi için özet/başlık tanımlar.
<time>	İçeriğin tarih/saat olduğunu belirtir.

Anlamsal etiketleri kullanmamız arama motorları açısından da çok önemlidir. Arama motorları sitemizi index’lemeye geldiğinde bu etiketleri görünce neyle ilgili olduğunu anlayacak ve bu da sitemize SEO açısından olumlu katkı sağlayacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="header"> </div>

    <div class="nav"> </div>

    <div class="section">

        <div class="header2"> </div>

        <div class="article"> </div>

        <div class="footer2"> </div>

    </div>


    <div class="aside"> </div>

    <div class="footer"></div>

</body>
</html>