Semantik Etiketler Nedir? Semantik Etiket Nasıl Kullanılır?

Herkese merhabalar. Bugün özellikle web tasarım ve kodlaması ile uğraşanların ilgilenmesi gereken bir konu hakkında yazacağım. Bu konu ise semantik etiketler.

Bu yazıda yer alan konular:

Semantik Etiketler Nedir?

Semantik Etiketlerin Önemi

Semantik Etiket Nasıl Kullanılır?

Semantik Etiket Kullanımına Örnekler

Semantik Etiketler Hakkında Son Söz

Semantik Etiketler Nedir? Semantik Etiket Nasıl Kullanılır?

Semantik Etiketler Nedir?

Semantik etiketlerin ne olduğunu tam olarak anlamak istiyorsak öncelikle semantik kelimesinin anlamını öğrenmemiz gerekiyor. Bu sayede semantik etiketlerin ne olduğunu daha iyi anlayabiliriz.

Semantik; türkçe anlamı ile anlambilimsel anlamına gelmektedir. Yani açıklayacak olursak, herhangi bir şeyin mantıksal olarak açıklanması anlamına gelir. Ve bu kavram çok şanslıyız ki web alanına da yansımıştır.

Semantik etiketler; bir web sayfasında bulunan içerikler/alanları anlamsal ve mantıksal bir şekilde işaretleyen etiketlerdir. Örneğin bir başlığımız vardır ve biz de bunu anlamlandırmak için semantik etiketler ile işaretleriz.

Semantik etiketler HTML5 ile gelen bir özelliktir ve önemi arama motorları için oldukça büyüktür. İşte şimdi bu önemden bahsedelim.

Semantik Etiketlerin Önemi

Biraz önce bahsettim gibi semantik etiketler sayesinde bizim içeriklerimiz bir anlamsallık kazanabiliyor. Bunun sonucunda arama motorları siteyi tararken içerik ile alakalı bilgileri daha güçlü ve daha kolay bir şekilde elde edebiliyor.

Şunu belirtmek istiyorum ki edindiğim bazı kaynaklara göre semantik etiketlerin SEO'ya katkısı olup olmadığına dair net bir kanıt yoktur. Ancak etki etmediğine dair de bir kanıt yoktur :)

Kendi araştırmalarıma ve bazı kaynaklara göre birçok web sitesinde semantik etiketler kullanılsada sadece belli etiketler kullanılmaktadır. Eğer sitenizde semantik etiketleri etkili bir şekilde kullanırsanız bu belki de işe yarayacaktır. Sonuç olarak kullanımında bir zarar yoktur.

Ancak eğer temayı hazırladıysanız veya aldıysanız bu temayı semantik etiketli haline çevirmek çok zor olacaktır. Çünkü CSS dosyaları da değişecektir. Bu nedenle elinizdekini değiştirmek bazı şeyleri karmaşık bir hale getirir.

Eğer bir web tasarımcıysanız kesinlikle semantik etiket kullanmalısınız. Eğer tema alacaksanız kesinlikle semantik etiket kullanan bir tema alın.

Kendi tahminime göre ileride semantik etiketlerin önemi oldukça artacak. Ve bu tarz kullanım resmen bir zorunluluk haline gelecek.

Semantik Etiket Nasıl Kullanılır?

Şimdi gelelim bu semantik etiketlerin nasıl kullanılacağına. Aslında kullanımı oldukça basittir.

Şimdi düşünün sizin bir  div  etiketiniz var. Ve bu etiketin içinde ise sizin yazdığınız yazı var. Peki ya bunun bir içerik, bir makale olduğunu anlamsal olarak işaretlemek mantıklı olmaz mı? İşte burada işin içine semantik etiketler giriyor.

Sizin içeriğinizin olduğu bu  div  etiketi yerine  article  etiketi kullanıyoruz ve bu kadar. Oldukça basit değil mi? Hatta daha iyi anlamanız için aşağıya  div  ve  article  etiketli hallerinin kodlarını bırakıyorum.

div etiketi ile kullanım:

<div class="icerik">
    <h1>Bu Bir Makale</h1>
    <p>Bu bir makale yazısı ve burada article etiketi kullanılmalıydı.<p>
</div>

article etiketi ile kullanım:

<article class="icerik">
    <h1>Bu Bir Makale</h1>
    <p>Sonunda bu makale article etiketi ile etiketlendi.</p>
</article>

İşte gördüğünüz gibi tek yapmanız gereken div etiketi yerine semantik bir etiket kullanmak oldu. Kullanımı bu kadar basit.

Semantik Etiket Kullanımına Örnekler

Şimdi ise bazı semantik etiketlerin kullanımına küçük küçük örnekler göstereceğim. Eğer tüm semantik etiketlere bakmak istiyorsanız buradan ulaşabilirsiniz.

Eğer sitenizde bir "header" alanı oluşturmak istiyorsanız "div" etiketi yerine direk header kullanabiliriz:

<header>
    <h2>Burası bir Header alanı</h2>
</header>

Sitemizde yan manü olarakta bilinen sidebar kısmını "aside" etiketi ile yapabiliriz:

<aside>
    <h2>Buraya sidebar içerikleri gelebeilir.</h2>
</aside>

Sitemizin en altında bir footer bölümü vardır. Biz bunu "div" etiketi ile oluşturmak yerine "footer" etiketi ile yapabiliriz. İşte örnek kullanımı:

<footer>
    <p>© Bu sitenin hakları saklıdır.<p>
    <h3>Footer kullanımı böyledir.</h3>
</footer>

İçeriğimizin ana merkezi olan yani bilgiyi barıdıran yerini "main" etiketi ile işaretleyebiliriz:

<main>
    <article>
        <p>Main kısmının içinde makaleleriniz bulunabilir.</p>
    </article>
</main>

İşte semantik etiketlerin kullanımı bu kadar basit. Kullanmaktan zarar gelmez.

Semantik Etiketler Hakkında Son Söz

Evet, semantik etiketler hakkında bir çok tartışma vardır. Özellikle başlık etiketleri (h1,h2...) hakkında.

Eğer başlık etiketleri üzerinden gidecek olursak kimisi h1 etiketinin bir kere h2 etiketinin 3 kere kullanılması gerek tarzı şeyler diyor. Yani önem sırası olduğunu söylüyor. Kimisi ise bunun bir önemi olmadığını söylüyor.

Eğer mantıksal olarak bakacaksak bir önem sırası olması daha mantıklı. Bu nedenle başlık etiketlerinin önem sırasına göre kullanılması daha iyi olacaktır.

Semantik etiketlerin dediğim gibi sıralamaya etkisi tartışılmaktadır. Ancak semantik etiketlerin kullanımı ileriki zamanlarda belki büyük önem kazanabilir. Ama bunun hakkında çok emin değilim.

Sonuç olarak semantik etiket kullanımının henüz bir zararı olmamıştır. Faydası olup olmadığı ise net değildir. Bu konu umarım birgün çözümlenir ve ben de bu yazıda semantik etiketlerin önemini uzun bir şekilde değiştiririm :)


Evet, bu yazı bu kadardı. Umarım yardımcı olabilmişimdir. Bir sonraki yazılarda görüşmek üzere :)

Ayrıca şu yazı dikkatinizi çekebilir:

Çapa Link Nedir? Çapa Link Nasıl Yapılır? Sayfa İçi Bağlantılar

Semantik Etiketler Nedir? Semantik Etiket Nasıl Kullanılır? | RaBlogin

Raşidin Buğda

Raşidin Buğda

2016-2017 yılından beri web tasarım ve kodlama üzerine çalışıyorum. RaBlogin benim ilk projem ve bu sitede blog yazarak kendimi keşfetmeye ve insanlara yardımcı olmaya çalışıyorum :)

Yorum Yap

Lütfen tüm alanları eksiksiz (Websiteniz yoksa orasını boş bırakın) ve doğru doldurun.

Yorumlar

Bu yazıya yorum yapılmamış. İlk yapan sen olabilirsin.