Semantic HTML etiketleri ve avantajları

Daha önceki yazımda Ecom World’de bundan sonra kodlama hakkında da yazılar yazacağımı söylemiştim. HTML hakkında öğrendiğim bir şey: HTML’nin anlamsal ögelerinin Türkiye’de yeterince önemsenmediğini, HTML’nin son sürümlerindeki modern özelliklerinin yeterince kullanılmadığını fark ettim. Bunlar, Semantic HTML etiketleri ve getirdiği avantajlardır.

Semantic HTML nedir ve avantajları nelerdir?

Semantic HTML ya da Türkçe kurallarına uygun yazılışıyla Semantik HTML. Tam Türkçe karşılığı ise Anlamsal HTML’dir.

Web dünyasının daha anlamsal hâle geldiği günümüzde internetin temellerinden diyebileceğimiz HTML dilinin de buna uyum sağlamasıyla ortaya çıkmıştır.

Eskiden arama motorları günümüzdeki kadar akıllı değillerdi. Web sitesini yorumlamayı bilmiyorlardı. Hatta SEO konusunda kolaylıkla manipüle edilebiliyorlardı. Bu durum günümüzde de devam ediyor ama değişmeye başladı.

Günümüzde arama motorları, bir web sitesindeki içeriği bir insan gibi yorumlayabiliyor ve hatta aradığınız şeye göre sizin için uygun kısmın altını çizebiliyor. Yani günümüzde bir web sitesinin anlamsal bir yapıda olması gerekiyor.

Eskiden web dünyası böyle değildi. HTML etiketleri bir anlama sahip değildi. Bir sitenin başlık, alt kısım ve gövde kısmı gibi çeşitli kısımları anlamsal olarak farklı değildi. Biz de bu kısımları genel <div> atıp id tanımlayarak belirliyorduk.

Şimdiyse anlamsal HTML kodları ile web sitemizin çeşitli bölümlerini çeşitli amaçlara göre şekillendirme olanağına sahibiz. Böylece bu yeni HTML etiketleriyle web sitemizin kaynak kodlarını daha iyi yorumlanabilir ve anlaşılabilir hâle getirebiliyoruz.

Bunun da bazı avantajları var. Birincisi, SEO ile ilgili. Semantik HTML etiketleri sayesinde arama motorları web sitemizi daha iyi yorumluyor ve anlıyor. Bu da web sitemizin Google gibi arama motorlarıyla ilişkisine önemli bir katkı sağlıyor. Arama sonuçlarında öne çıkmak için faydası var.

İkincisiyse ekran okuyucu yazılımların işini kolaylaştırıyor. Görme engelli kişiler ekran okuyucu yazılımlardan faydalanarak bilgisayar kullanıyorlar. Bu yazılımların siteyi doğru yorumlaması, görme engellilerin de işini kolaylaştırıyor.

Üçüncü olarak da web sitemizin kodunu incelemek istediğimizde biz de neyin ne olduğunu daha kolay anlıyoruz.

Bazı Anlamsal HTML etiketleri

  • <header></header>: Sitenin başlık kısmını bu etiketin arasına yerleştiriyoruz.
  • <footer></footer>: Sitenin alt kısmını bu etiketin arasına yerleştiriyoruz.
  • <main></main>: İçeriğin olduğu ana kısmı buraya yerleştiriyoruz.
  • <article></article>: Sitedeki bir yazı varsa yazıyı bu etiketin arasına yerleştiriyoruz.
  • <aside></aside>: İçerik ile ilgili ek bilgi alanları için kullanılmakta.
  • <nav></nav>: Sayfa içindeki menüleri oluşturmak için kullanılmakta.
  • <section></section>: Sayfadaki bir bölümü tanımlamak için kullanılıyor.

Bu etiketler, Semantic HTML etiketlerinin bazılarıdır. Daha fazlası için burayı tıklayınız.