HTML Semantik Elementler Ne İşe Yarar?
Semantik elementler, HTML5 ile birlikte tanıtılan ve içeriğin anlamını (yani semantiğini) belirtmek için kullanılan HTML elementleridir.
HTML Semantik Elementler
HTML dökümanlarındaki semantik, bir başka deyişle anlamsal elementler, web sayfalarının içeriğini doğru bir şekilde tanımlayan ve anlamını açık bir şekilde ifade eden etiketlerdir.
Bu etiketler, içeriğin türünü, ne işe yaradığını bariz bir şekilde belirtir ve web sayfasının yapısını anlaşılır kılacak şekilde düzenler. Örnek vermek gerekirse, <h1> etiketi bir sayfanın en önemli başlığını, <p> etiketi bir paragrafı, <ul> etiketi bir sıralı listeyi ve <form> etiketi bir formu tanımlar.
Benzer bir çıktıyı farklı elementler kullanarak veya stilize ederek pekala elde edebiliriz. Her ne kadar bunlara şahit olan kullanıcılar aradaki farkı anlayamasa da HTML sayfalarını analiz eden web tarayıcı botları için durum farklı olacaktır. Dolayısıyla, HTML sayfasının düzenini ve anlamını açık bir şekilde vurgulayacağı için semantik elementleri kullanırız. Böylece sayfanın web tarayıcıları tarafından daha kolay taranmasını ve anlaşılması mümkün haline gelir.
Örneğin h1 etiketi ile yazılmış <h1> Ben bir Yazıyım </h1> ile span etiketi kullanılarak oluşturulmuş <span style="font-size:32px;font-weight:bold;"> Ben bir Yazıyım </span> bir kodlama, kullanıcıya ikisi de aynıymış gibi gelecektir. Ancak web tarayıcı robotları bu iki “aynı” şeyi incelediğinde h1 etiketini ciddiye alacak ve ona daha yüksek bir puan verecektir.
Yani semantik elementlerini doğru bir şekilde kullanmak sayfaların daha iyi bir arama sonucu pozisyonu elde edebilmesine ve daha fazla ziyaretçi çekme potansiyeline ulaşabilmesine yardımcı olacaktır.
Özellikle HTML5 ile birlikte bir web sayfasının farklı bölümlerini tanımlamak için <div> </div> elementi yerine kullanılabilecek, ki kullanılmalı da, birtakım semantik elementler sunulmuştur:
| <article> |
| <aside> |
| <details> |
| <figcaption> |
| <figure> |
| <footer> |
| <header> |
| <main> |
| <mark> |
| <nav> |
| <section> |
| <summary> |
| <time> |
Yukarıdaki görsel aynı çıktıları alabilecek iki HTML dökümanının yapısını göstermektedir. Ancak semantik elementlerin kullanıldığı sağdaki versiyon tarayıcı dostu bir sayfaya dönüşecektir. Bundan dolayı HTML sayfa tasarımlarınızı sağdaki görsele referans vererek yapmanızı tavsiye ederim.
Semantik Elementlerinin Faydaları
HTML dökümanlarında semantik elementleri kullanmanın çeşitli faydaları vardır. Bunlar sırasıyla aşağıdaki gibidir:
- Sayfanın yapısını daha net hale getirir
- Arama motoru optimizasyonu (SEO) için faydalıdır
- Web erişilebilirliğini artırır
- Daha anlaşılabilir kodlama yapılmasına olanak sağladığı için kod tekrarını da azaltır
- Bakımı kolaylaştırır
Özetle, HTML dökümanlarında semantik elementleri kullanmak, web sayfalarının kod yapısını iyileştirip erişilebilirliğini arttırır, içeriği insanlar ve makineler için okunabilir hale getirip SEO performansını yukarı taşır.