Semantic HTML Nedir, Ne İşe Yarar?

Web sayfalarının yapısını ve içeriğini daha anlaşılır hale getirmek, arama motorlarının sayfayı daha iyi işlemesine yardımcı olmak ve erişilebilirliği güçlendirmek için kullanılan Semantic HTML etiketleri, modern web geliştirmenin temel taşlarından biridir. Bu etiketler, içeriği anlamlandıran ve sayfanın yapısını düzenleyen işaretleme elemanlarıdır. Bu yazıda, Semantic HTML’in ne olduğunu, hangi etiketleri içerdiğini, SEO ile ilişkisini ve doğru etiket kullanımının neden önemli olduğunu özetliyoruz.

Semantic HTML nedir?

Semantic (anlamlandırılmış) HTML, web sayfalarının içeriğini ve yapısını hem arama motorları hem de tarayıcılar için daha anlaşılır kılmak için kullanılan HTML etiketlerini ifade eden bir terimdir.

Semantic HTML etiketleri, içerdikleri içeriğin rolünü veya anlamını tarif eder; böylece sayfadaki bölümler ve aralarındaki ilişki daha net okunabilir.

İçerik işaretlemesinde sık kullanılan semantik öğelerden bazıları şunlardır:

• Başlık etiketleri: Metin içinde hiyerarşik yapı için h1–h6 kullanılır; önem sırasına göre seçilmelidir.
• Listeleme etiketleri: Numaralı listeler için ol, numarasız listeler için ul; öğeler li ile işaretlenir.
• Tablo etiketleri: Veriyi tablo olarak sunmak için table, başlık satırı için thead, gövde için tbody, satır için tr, hücre için th / td kullanılır.
• a etiketi: Sayfalar veya kaynaklar arasında bağlantı kurmak için kullanılır.
• img etiketi: Görselleri işaretlemek ve alternatif metin ile erişilebilirliği desteklemek için kullanılır.
• p etiketi: Paragrafları ve metin bloklarını işaretlemek için kullanılır.
• article etiketi: Bağımsız bir içerik birimini — örneğin makale veya haber gövdesini — temsil etmek için kullanılır.

Yapı ve düzen için sık başvurulan HTML5 bölümleme etiketleri ise şunlardır:

• section etiketi: Birbiriyle ilişkili içeriği mantıksal olarak gruplamak için kullanılır.
• aside etiketi: Ana içerikten yan bilgi veya ilişkili ama ikincil içerik için kullanılır (yerleşime göre article içinde veya dışında).
• header etiketi: Genelde logo, içerik başlığı veya navigasyon gibi tanıtıcı / üst bilgi blokları için kullanılır.
• footer etiketi: Sayfa veya bölüm sonunda; site içi bağlantılar, künye veya iletişim gibi tamamlayıcı bilgiler için kullanılır.
• main etiketi: Sayfanın ana odak içeriği için kullanılır (sayfada tek bir main olması yaygın kabuldür).
• body etiketi: HTML belgesinin görünür tüm içeriğini kapsayan kök gövdedir; ana içerik alanı için main ile birlikte düşünülür.

Semantic HTML bir sıralama faktörü mü?

Semantic HTML etiketleri, arama motorlarının sayfa yapısını daha iyi çıkarmasına yardımcı olabilir; ancak doğrudan bir “sıralama çarpanı” olarak görülmemelidir. Google Search Central içeriğinde John Mueller, semantik HTML’in bir sayfayı anlamayı kolaylaştırdığını; bunun ise sıralamayı tek başına yükselten sihirli bir faktör olmadığını ifade ediyor. Videonun tamamı için YouTube’daki ilgili kayda buradan ulaşabilirsiniz.

Özetle, Semantic HTML doğrudan bir sıralama faktörü olmasa da; yapıyı netleştirdiği için anlama ve erişilebilirlik açısından kullanılmaya değerdir.

Semantic HTML SEO için neden önemlidir?

Semantic HTML, içeriği anlamla ilişkilendirerek kodlamanın bir yoludur. Böyle bir işaretleme, sayfanın hangi bölümlerinin başlık, paragraf, liste veya ana içerik olduğunu daha net gösterir; bu da tarayıcılar ve yardımcı teknolojiler için faydalıdır.

Örneğin h1 genelde sayfanın ana başlığını, p ise paragrafları işaretler. Arama sistemleri bu ipuçlarıyla içeriği yapılandırılmış biçimde işleyebilir.

Doğru etiket kullanımı ayrıca erişilebilirliği güçlendirir: ekran okuyucular ve benzeri araçlar, semantik yapı sayesinde içeriği daha tutarlı sunabilir. Bu da kullanıcı deneyimini iyileştirir.

Semantic HTML kullanırken dikkat edilmesi gerekenler

HTML etiketlerini yalnızca tasarım için kullanmayın

Etiketler içeriğin anlamını yansıtmalıdır. Hiyerarşide yeri olmayan bir metni yalnızca büyük görünsün diye başlık etiketiyle işaretlemek, ya da bağlantı rengi istediğiniz için a kullanmak uygun değildir. Görsel düzenlemeler CSS ile yapılmalıdır.

Başlık etiketlerini önem sırasına göre kullanın

Başlıklar içeriği hiyerarşik olarak yapılandırır. Örnek bir akış:

<h1>Ana başlık</h1>
<p>Ana konuyu açıklayan paragraf.</p>
<h2>Alt başlık</h2>
<p>Alt başlığı destekleyen paragraf.</p>
<h3>Daha düşük öncelikli başlık</h3>
<p>Detay veren paragraf.</p>

article ve section etiketlerini doğru kullanın

article ile section sık karıştırılır. Genel olarak, bağımsız içerik birimi article, içindeki tematik alt bölümler ise section ile ayrılabilir. Bir haber veya gönderi gövdesini article içinde tutup alt başlıkları section ile bölmek yaygın bir kullanımdır.

aside etiketini doğru bağlama yerleştirin

aside, ana akıştan yan bilgi veya ilişkili içerik için kullanılır. article dışında kullanıldığında genelde sayfa düzeyinde yan sütun veya ikincil blokları ifade eder; article içinde kullanıldığında ise makaleye ilişkin not, ilgili linkler veya özet gibi tamamlayıcı öğeler için uygundur.

Sonuç

Semantic HTML5 etiketleri, içeriği anlamlandırmak ve sayfa yapısını okunabilir kılmak için güçlü araçlardır. Arama motorları ve geliştiriciler için tutarlı bir yapı sunar; erişilebilir ve kullanıcı dostu siteler oluşturmaya katkı sağlar. Semantik işaretlemeyi ihmal etmek, hem anlama hem de bakım maliyeti açısından fırsat kaçırmaktır.