HTML web'in dilidir - bir web sayfasında hangi içeriğin hangi sırada görüneceğini belirler. Bu dile yeni başlayanlar, HTML ve beraberindeki stillerle istenen etkiyi yaratmanın genellikle birkaç yolu olduğunu çabucak öğrenirler.

Ancak, tüm yöntemler eşit oluşturulmamıştır. Çoğu zaman HTML'nizi nasıl yazdığınız, HTML'nizin ziyaretçilere ne gösterdiği kadar önemlidir.

Özellikle de semantik HTML'den, yani ne işe yaradığını söyleyen HTML kodundan bahsediyorum. Bu giriş kılavuzunda size semantik HTML'yi tanıtacağım - ne olduğu, nasıl yazılacağı ve her gelişmekte olan web geliştiricisinin benimsemesi için neden önemli olduğu ve bazı yaygın semantik öğeleri listeleyerek bitireceğiz.

Semantik HTML nedir?
Semantik HTML (semantik biçimlendirme olarak da adlandırılır), sayfa öğelerinin amacını etkili bir şekilde tanımlamak için HTML etiketlerini kullanan HTML kodudur. Anlamsal HTML kodu, öğelerinin anlamını hem bilgisayarlara hem de insanlara ileterek web tarayıcılarının, arama motorlarının, yardımcı teknolojilerin ve insan geliştiricilerin bir web sayfasının bileşenlerini anlamasına yardımcı olur.

İyi yazılmış semantik HTML'nin anahtarı semantik etiketlerin kullanılmasıdır. Anlamsal HTML etiketleri, kodu okuyan kişiye veya makineye tam olarak ne yapmaları gerektiğini söyleyen adlara sahiptir.

İşte temel bir örnek: <p> (paragraf) etiketi semantik bir HTML etiketidir - açılış <p> etiketi ile kapanış </p> etiketi arasındaki tüm içerik bir paragraf metin bloğudur. Bu etiketi okuyan herkes veya herhangi bir cihaz amacını anlayacaktır.

• <h1>, <h2>, <h3>, vb.: Sayfada azalan önem sırasına göre yer alan başlıklar.
• <a>: Bir köprü.
• <button>: Bir düğme öğesi.
• <strong> ve <emphasis>: Bu öğeler, içlerindeki metnin önemli olduğunu belirtir.
• <ol> ve <ul>: Sırasıyla sıralı ve sırasız listeler
• <header> ve <footer>: Bir web sayfasının üstbilgi ve altbilgi bölümlerini belirtir.

Bu örneklerin her birinde, etiketin kendisi bize öğenin tam olarak ne için kullanıldığını söyler. Aslında, doğru amaç için kullanıldıkları sürece birçok HTML öğesi etiketleriyle anlam ifade edebilir (örneğin, bir başlık için <p> etiketi veya bir paragraf için <h2> etiketi kullanmamak).

Bu da şu soruyu akla getiriyor: Hangi HTML etiketleri semantik değildir?

En yaygın anlamsal olmayan HTML etiketleri, blok düzeyinde genel bir öğe olan <div> ve satır içi genel bir öğe olan <span>'dır. Bu etiketler web sayfalarını şekillendirmek ve biçimlendirmek için çok yararlı olsa da, içlerindeki içeriğin amacı hakkında bize pek bir şey söylemezler.

Aşağıdaki örneğe bir göz atın. Burada, birbirinin aynı iki düğme elemanımız var. Ancak, ilk öğe <button> etiketini kullanırken ikincisi <div> etiketini kullanıyor.

<div id="container">
  <button class="example">Tıkla!</button>
  <div class="example">Tıkla!</div>
</div>

.example {
  background-color: #ff7a59;
  border: none;
  border-radius: 5px;
	color: white;
  display: inline-block;
  font-family: 'Arial';
  font-size: 16px;
	font-weight: bold;
  height: 50px;
  line-height: 50px;
  margin: 10px;
  text-align: center;
  transition: 0.3s;
  width: 200px;
}

.example:hover {
  background-color: #e66e50;
  cursor: pointer;
}

#container { text-align: center; }

Bu örnek, farklı etiketlerin aynı görsel sonuçları nasıl elde edebileceğini göstermektedir - gören bir insan kullanıcı için bu düğmeleri kullanma deneyimi aynıdır. Yine de, semantik uygulamayı tercih etmek her zaman daha iyidir, bu durumda <button>. Daha sonra, anlamsal işaretlemenin genel işaretlemeden neden daha iyi olduğunu inceleyeceğiz.

Semantik HTML'nin faydaları nelerdir?
Semantik HTML yalnızca kodunuzu daha düzenli ve okunması daha kolay hale getirmekle kalmaz, aynı zamanda yardımcı teknoloji ve arama motorları için daha erişilebilir hale getirir. Her bir faydayı aşağıda açıklayalım.

Erişilebilirlik
Ekran okuyucular, web sayfalarını işlemek ve az gören kullanıcıların bu sayfalarda gezinmesine yardımcı olmak için anlamsal açıdan zengin HTML'ye güvenir. Anlamsal etiketler ekran okuyucu kullanıcılarına nerede olduklarını ve mevcut sayfa ile nasıl etkileşime geçebileceklerini söyler.

Bir sayfa <div> ve <span> etiketlerinden oluşan bir duvar gibi yapılandırılırsa, sayfayı göremeyenler için bölümlerin birbiriyle nasıl ilişkili olduğu net olmayacaktır. Çözüm, bir sayfayı kendisini oluşturan parçalara ayıran semantik etiketlerdir. Temel düzeyde, <header> ve <footer> sırasıyla sayfanın üstbilgi ve altbilgi bölümlerini, <main> önemli sayfa içeriğini, <nav> gezinme bağlantılarını ve <aside> kenar çubuğu gibi ikincil sayfa içeriğini içermelidir.

Birçok semantik öğe ayrıca yerleşik klavye erişilebilirliği ile birlikte gelir. Bir ekran okuyucu sayfada bir <button> öğesi gördüğünde, bu öğeye enter tuşuyla "tıklanmasına" izin verir. Aynı şey genel <div> için söylenemez - etiket tek başına ekran okuyucuya bu öğenin bir düğme görevi gördüğünü söylemez.

Ekran okuyucular ayrıca kullanıcıların benzer öğeler arasında geçiş yaparak veya sayfa içeriğini özetlemek için benzer öğelerin bir listesini çıkararak sayfada daha verimli bir şekilde gezinmelerini sağlar - semantik etiketleri uygun şekilde kullanmak için bir neden daha.

SEO
Yardımcı teknolojilerde olduğu gibi, anlamsal işaretleme de arama motoru tarayıcılarının sayfanızda gezinerek yapısını ve içeriğini daha iyi anlamasına yardımcı olur. Anlamsal HTML, arama motorlarına neyi indeksleyeceklerini göstermenin ve tarama bütçenizden en iyi şekilde yararlanmanın harika bir yoludur.

Örneğin, <main> etiketi bir sayfanın ana içeriğini çevreler - bir sayfanın benzersiz bölümlerini işaret etmek ve tekrarlanan sayfa öğelerinde indekslemeyi boşa harcamaktan kaçınmak için kullanın. Daha az önemli içeriği <header>, <footer> ve <aside> içine yerleştirin ve botların site genelindeki bağlantılar için gidebileceği navigasyon menünüze işaret etmek için <nav> etiketini kullanın.

İnsan Tarafından Okunabilirlik
Web geliştiricileri her gün yüzlerce satır kod yazar ve okur, bu nedenle işlerini kolaylaştıran her şey çabaya değerdir. Anlamsal açıdan zengin biçimlendirme, geliştiricilerin belirli sayfa öğelerini bir yığın <div> etiketi arasında gezinmekten daha hızlı bir şekilde bulmalarını sağlar. Bir sayfada navigasyon mu arıyorsunuz? Basitçe <nav> etiketi için bir arama yapın.

Okunabilirlik özellikle bir ekiple çalışıyorsanız önemlidir - diğer geliştiricilerin (hatta gelecekteki kendinizin) sayfanızı yalnızca koddan hemen anlamasını bekleyemezsiniz. Ancak, içeriğinizi ne kadar iyi organize ederseniz, diğer geliştiriciler yapıyı o kadar çabuk görecek ve geliştirmeniz o kadar verimli olacaktır.

Semantik HTML Etiketleri
Anlamsal HTML, etiketlerin doğru kullanımı etrafında döndüğünden, sitenizde uygulayabileceğiniz bazı yaygın anlamsal etiketleri gözden geçirelim. Bu etiketleri metin üzerinde kullanılanlar, sayfa düzenini iletmek için kullanılanlar ve diğer kullanışlı semantik etiketler olarak ayırdık.

Metin için Semantik HTML Etiketleri:
Bu etiketler içerdikleri metnin anlamını aktarır:

<p> (paragraf): Blok olarak sunulan bir metin paragrafı.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> (başlık): Bir sayfa başlığı. <h1> en üst düzey başlıktır ve her sayfada yalnızca bir tane olmalıdır. Devam eden etiketler azalan öneme göre sıralanır. Tarayıcılar buna göre yazı tipi ağırlığı ve boyutu stilini uygulayacaktır.
<ol> (sıralı liste): Belirli bir sırada görüntülenmesi gereken öğelerin listesi. Tarayıcılar genellikle her öğeye numara uygular.
<ul> (sırasız liste): Sıranın önemli olmadığı öğelerin listesi. Tarayıcılar genellikle her öğeye madde işaretleri veya tire işaretleri uygular.
<a> (çapa): Bir köprü bağlantı. Varsayılan olarak, tarayıcılar bağlantı rengini mavi olarak değiştirir ve kaldırabileceğiniz bir alt çizgi ekler.
<q> (alıntı) ve <blockquote>: Bir alıntı. Daha kısa alıntılar için <q> ve daha uzun alıntılar için <blockquote> kullanın.
<code>: Bilgisayar kodu. Tarayıcılar genellikle bu metni çevresindeki metinden ayırmak için stil uygular.
<em> (vurgu): Metni vurgular. Çoğu tarayıcı varsayılan olarak bu etiketin içindeki metni italik yapar.
<strong>: Önemli metne dikkat çeker. Çoğu tarayıcı varsayılan olarak bu etiketin içindeki metni kalınlaştırır.

Yapı için Semantik HTML Etiketleri:
Bu HTML etiketleri, alt öğeleri bölümler halinde gruplandırmaya yarar. Her bölüm ilgili içeriği içerir.

<header>: Sayfanın başlığı. Üstbilgiler genellikle kuruluşun adını ve logosunu, birincil navigasyonu, bir arama çubuğunu, bir oturum açma istemini ve/veya bir alışveriş sepeti simgesini içerir.
<footer>: Sayfanın altbilgisi. Altbilgiler genellikle adres, iletişim formu ve/veya yasal bilgiler gibi ek bilgiler içerir.
<main>: Bir sayfanın ana içeriğini içerir. Bu, belirli bir sayfaya özgü olan ve ziyaretçilerin muhtemelen zamanlarının çoğunu geçirecekleri içeriktir.
<nav>: Site navigasyonu. Bu etiket genellikle web sitesinin farklı bölümlerine giden bağlantıların bir listesini içerir.
<aside>: Ana içeriğe ait olmayan ancak yine de onunla ilişkili olan ilgili içeriği içerir - bu, ilgili gönderiler listesi veya görüntülü reklamlar içeren bir kenar çubuğu olabilir.
<article>: Blog yazısı veya haber makalesi gibi bağımsız bir içerik parçası.
<section>: Daha uzun bir metin parçasının bir bölümü. Örneğin, bir blog yazısının farklı h2'lerine farklı bir <section> atayabilirsiniz.

Diğer Semantik HTML Etiketleri:
<img>: Bir resim.
<table>: Sütunları ve veri satırları olan bir tablo.
<figure> ve <figcaption>: Açıklama gerektiren resimler için kullanılır. <figure> görüntünün kendisini içerir ve <figcaption> görüntüyle ilişkili başlığı içerir.
<iframe>: Gömülü bir öğe.