Semantik HTML Etiketleri

Arama motorlarının bir siteyi yorumlarken faydalandığı en önemli kaynaklardan birisi HTML etiketleridir. Bu etiketlerin bazılarının anlamlı(semantik), bazılarının da anlamsız ve sadece işlevsel olduğu zannedilebilir. Ancak her bir etiket bir anlam ve niyet ifade etmektedir. 

HTML5 ile gelen semantik etiketler

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

<article>

article: makale

Bir sayfada bulunan birbirinden bağımsız/farklı makaleler <article> etiketi içerisine yerleştirilerek gruplandırılır. 

Kullanım yerleri;

  • Bir forumda yazılan her bir mesaj
  • Bir haber sitesindeki farklı haber kutuları
  • Google aramalarında çıkan her bir sonuç
  • Blog yazıları dizinindeki her bir yazı
  • Bir blogdaki her bir yorum

<aside>

aside: ayrı, bir tarafa

Sayfanın konusu ile ilişkili ancak alt konu olarak tanımlanabilecek içerikler bu etiket içerisine yerleştirilir.

Kullanım yerleri;

  • Makale yazar bilgileri
  • Konuyla ilişkili linkler
  • Bağlantılı bir reklam
  • Kaynakça, dipnot, alıntı, ek bilgiler

<details> ve <summary>

details: detaylar, ayrıntılar

summary: özet

<details> etiketi açılır kapanır bir yazı kutusu oluşturmak için kullanılır. Ayrıntı olan, herkesin ilgisini çekmeyebilecek ve isteğe bağlı olarak görüntülenebilecek içerikler bu etiket içerisine yerleştirilir. Yine semantik bir etiket olan <summary> etiketi ile birlikte kullanılır, <summary> etiketi ile bu bölüme başlık eklenir.

Kullanım yerleri;

  • Özetler
  • Telif hakkı bildirimleri
  • Sıkça sorulan sorular
  • Ek ayrıntılar

<figure> ve <figcaption>

figure: figür

figcaption: figür başlığı

Bulunduğu sayfa ile ilişkili ancak tek başına kullanıldığında da anlam ifade eden, sayfadaki yeri değiştirildiğinde akışta bir eksikliğe sebep olmayan içerikler bu etiket içerisine yerleştirilir. Yine semantik bir etiket olan <figcaption> etiketi ile birlikte kullanılır, <figcaption> etiketi ile bu bölüme başlık eklenir.

Bu etiket <aside> etiketi ile karıştırılmamalıdır. Her ikisi de sayfadaki yan içerikleri temsil eder ve silindiklerinde akışta bir bozulma olmaz. Aralarında bazı ufak farklar vardır. Örneğin,<figure> etiketi ile eklenen içerikler kendi başına anlamlıdır ve başka bir yazıya taşındığında da anlamını korur. Ancak <aside> etiketi sadece o yazı içerisinde anlamlıdır. Ayrıca <figure> ile eklenen içeriklere altyazı şeklinde başlık eklenebilir.

Kullanım yerleri;

  • Resim ve fotoğraflar
  • Animasyonlar
  • Videolar
  • Ses dosyaları
  • Şekil, diyagram ve grafikler
  • Kod parçaları

<footer>

footer: altbilgi

Sayfanın tamamına veya belirli bir bölüme (<article> ve <section> gibi) alt bilgi eklemek için kullanılır. Doğrudan<body> etiketi içerisinde tanımlandığında tüm sayfanın alt bilgisini içeren footer bölümünü temsil eder.

Kullanım yerleri;

  • Makale alt bilgileri
  • Sayfa içi footer bölümü

<header>

header: başlık

Sayfanın tamamına veya belirli bir bölüme (<article> ve <section> gibi) üst bilgi eklemek için kullanılır. Doğrudan<body> etiketi içerisine tanımlandığında sitenin logo ve menü bölümünü temsil eder. Ayrıca <article> ve <section> gibi bölümlere de eklenebilir. Bu şekilde yazı bölümlerinde kullanıldığında içerisinde başlık(<h1>...<h6>) etiketleri bulundurulmalıdır.

Kullanım yerleri;

  • Site menüsü
  • Makale başlıkları
  • Bir yazının içindekiler bölümü

<main>

main: ana, esas, asıl

Her sayfada en fazla bir tane kullanılabilen <main> etiketi sayfanın birincil öncelikte olan temel içeriğini içerir. <main> etiketi içerisine tanımlanacak içerik benzersiz olmalıdır yani farklı sayfalarda da kullanılan/tekrarlayan içerikler için kullanılamaz. 

Kullanım yerleri;

  • Sayfanın ana içeriği

<mark>

mark: işaretlemek

Metnin bir bölümünü işaretlemek için kullanılır. Bu işaretleme <strong> etiketinde olduğu gibi önem belirtmek için değil, tabiri caizse, kör göze parmak sokarcasına işaret etmek içindir. 

Metin içi semantik etiketlerden olan <strong> , <em> ve <mark> gibi etiketler, aralarındaki ufak farklılıklar sebebi ile karıştırılabilir. Bu sebeple bu bölümde üçünü karşılaştırmalı olarak inceleyeceğiz.

<strong> etiketi kalın, <em>etiketi italik, <mark> etiketi ise keçeli kalemle çizilmiş görünüme sahiptir. Görünümleri de anlamları ile örtüşmektedir. 

<strong> metin içerisinde öneme sahip kelimeleri vurgulamak için kullanılır. Bu kelimeler cümlenin akışına dahil olan kelimelerdir.

<em> etiketi, <strong> etiketinin aksine metnin akışına dahil olmayan, ek bilgi niteliğindeki kelimeler için kullanılır. Örneğin; bir eser ismi, adres bilgisi gibi.

<mark> etiketi ise genellikle, kullanıcıların arama motorlarında girdiği kelimeler ile birebir eşleşebilecek kelimeleri işaret etmek için kullanılır. İşaret etmek diyorum çünkü <mark> ile işaretlenmiş bir metin sayfaya girildiğinde ilk göze çarpan şeylerden biri olur.

Son olarak, semantik etiketlerin arama motorlarının yanı sıra, görme engellilerin kullandığı sesli tarayıcılar için de önemli olduğunu bilmekte fayda vardır. Bu açıdan düşünülürse ekran okuyucular <strong> bir kelimeyi yüksek sesli okurken, <em> ile işaretlenmiş bir kelimeyi ses tonunu değiştirerek okuyacaktır.

Kullanım yerleri;

  • Arama motorlarına yönelik kelime işaretlemelerinde

<nav>

navigasyon: gezinme

Sitelerin navigasyon bar olarak da adlandırılan menü kısımları bu etiket içerisinde tanımlanır. Html’in resmi dokümanında tüm gezinme bağlantılarının <nav> içerisine alınmasının gerekmediği, sadece ana navigasyon menülerinin alınması gerektiği belirtilmiştir. 

Kullanım yerleri;

  • Navigasyon menüleri
  • Breadcrumbs denilen sayfa dizinleri
  • Sayfa içi ve site içi gezinme bağlantıları

<section>

section: bölüm

Tek bir yazının farklı bölümlerini gruplandırmak veya farklı yazıları ortak başlıklar altında gruplandırmak için kullanılır. Bir <section> etiketi içerisinde başka bir <section> etiketi oluşturulabilir. Ancak her bir <section> etiketin başlık(<h1>...<h6>) etiketleri ile başlık eklenerek kullanılmasının doğru kullanım olduğu resmi dokümanda belirtilmiştir. Çok özel durumlar olmadıkça bu öneriye uyulmalıdır.

Kullanım yerleri;

  • Bir yazının başlıklarla bölünmüş parçaları
  • Numaralandırılmış içerikler

<time>

time: zaman

Metin içerisinde, tarih ve saat içeren bölümleri arama motorları tarafından anlamlı kılmak için kullanılır.

Kullanım yerleri;

  • Metin içerisinde “Mart’ın üçü” gibi bir kelimeye arama motorları tarafından algılanabilecek bir tarih formatı tanımlamak
  • Metin içerisinde “17:00” gibi bir metni arama motorlarının anlayabileceği bir formata sokmak
  • Bazı tarayıcılarda bulunan hatırlatıcı ekleme özelliği ile uyumlu çalışan bir içerik oluşturmak

Metin Düzeyinde Semantik Etiketler

Yukarıdaki listede HTML5 ile gelen semantik etiketlerden bahsettik. Şimdi ise daha az anlama sahip olan ve kullanmadan önce yarım saniye düşünmemizi gerektirebilecek etiketlerden kısaca bahsedeceğiz. Bu “az” anlamlı etiketlere ve özelliklerine whatwg.org adresindeki “metin düzeyinde semantik etiketler” başlığı altından da erişebilirsiniz.

Metin düzeyinde etiketler arama motorlarının sitenizi daha iyi anlamasını sağlar. Bir metni italik, kalın veya küçük yapmak CSS kullanarak da mümkündür ancak bu etiketler ile birlikte kullanıldığında anlamsız bir metin arama motorları tarafından anlamlı hale getirilmiş olur.

<a> Link eklemek için kullanılır.

<em> Metni italik yapmak ve vurgulamak için kullanılır.

<strong> Metni kalın yapmak ve vurgulamak için kullanılır.

<small> Metni yazının geri kalanından ufak yapmak için kullanılır.

<s> Bir metnin üstünü çizmek için kullanılır.

<cite> Sanat eserlerine ait isimleri belirtmek için kullanılır. Metni italik yapar.

<q> Metnin bir bölümünün alıntı olduğunu belirtmek için kullanılır.

<dfn> Tanımı yapılan terimi vurgulamak için kullanılır. Metni italik yapar.

<abbr> Kısaltmalara açıklama eklemek için kullanılır. İmleç metnin üzerine geldiğinde açıklama kısmı görünür.

<ruby> Doğu Asya dillerini (Japonca ve Çince gibi) tanımlarken kullanılır.

<rt> Doğu Asya dillerini (Japonca ve Çince gibi) tanımlarken kullanılır.

<rp> Doğu Asya dillerini (Japonca ve Çince gibi) tanımlarken kullanılır.

<data> Etiketlere erişebilmek için bir adres tanımlamak için kullanılır.

<time> Metindeki tarih ve saat bilgilerini arama motorları için anlamlı hale getirmek amacı ile kullanılır.

<code> Metin içerisindeki kod parçalarını tanımlamak için kullanılır. 

<var> Matematiksel ifadeler, programlama değişkenleri gibi değerleri tanımlamak için kullanılır. Metni italik yapar

<samp> Bilgisayar veya program çıktısını tanımlamak için kullanılır.

<kbd> Metin içerisinde geçen klavye kısa yollarını tanımlamak için kullanılır.

<sub> Bir harfi veya metni, normal metin hizasının altında ve küçük bir font ile tanımlamak için kullanılır (O2)

<sup> Bir harfi veya metni, normal metin hizasının üstünde ve küçük bir font ile tanımlamak için kullanılır (a2)

<i> Metni italik yapmak için kullanılır.

<b> Metni kalın yapmak için kullanılır.

<u> Metnin altını çizmek için kullanılır.

<mark> Metni keçeli kalemle çizmeye benzer bir stil uygulayarak işaretlemek için kullanılır.

<bdi> Metin içerisindeki bir bölümün, genel metin akışının tersi yönde yazıldığını belirtmek için kullanılır (Örneğin Türkçe bir metin içerisinde, Arapça gibi sağdan sola doğru yazılan bir metin olduğunda).

<bdo> Bir metni sağdan sola veya soldan sağa doğru yazdırmak için kullanılır.

<span> Metnin bir bölümünü seçmek için kullanılır. Daha sonra metnin kalanından bağımsız olarak, bu bölüme özel stil uygulamak mümkün olur.

<br> Satır boşluğu bırakmak için kullanılır.

<wbr> Bir metnin nereden itibaren satır başı yapacağını belirlemek için kullanılır.

Yorum Yap