FrontEnd Developer Road Map

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>

EtiketAçı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>

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

5 saat ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

5 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

5 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

5 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

6 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

6 gün ago