Web tasarımında önemli bir ilke, varsayılan olarak tarayıcıda nasıl göründüklerinden ziyade gerçekte ne olduklarını belirtmek için HTML öğelerini kullanma fikridir. Bu, anlamsal HTML kullanmak olarak bilinir.

Semantik HTML Nedir?

Semantik HTML veya anlamsal biçimlendirme, web sayfasına yalnızca sunumdan ziyade anlam katan HTML'dir. Örneğin, bir

 etiketi, ekteki metnin bir paragraf olduğunu belirtir. Bu hem anlamsal hem de sunumsaldır çünkü insanlar paragrafların ne olduğunu bilir ve tarayıcılar bunları nasıl görüntüleyeceğini bilir.

Bu denklemin diğer tarafında, aşağıdaki gibi etiketler bulunur:  ve  anlamsal değildir. Yalnızca metnin nasıl görüneceğini (kalın veya italik) tanımlarlar ve işaretlemeye herhangi bir ek anlam sağlamazlar.

Anlamsal HTML etiketi örnekleri şunları içerir:

• Başlık etiketleri

   vasıtasıyla

Standartlarla uyumlu bir web sitesi oluştururken kullanabileceğiniz daha birçok anlamsal HTML etiketi vardır.

Semantik Konusunu Neden Önemsemelisiniz?

Semantik HTML yazmanın yararı, herhangi bir web sayfasının temel amacının ne olması gerektiğinden kaynaklanır: iletişim kurma arzusu. Belgenize anlamsal etiketler ekleyerek, o belge hakkında iletişime yardımcı olan ek bilgiler sağlarsınız. Özellikle anlamsal etiketler, tarayıcıya bir sayfanın ve içeriğinin anlamının ne olduğunu netleştirir. Bu netlik, arama motorlarına da iletilerek, doğru sorgular için doğru sayfaların sunulması sağlanır.

Semantik HTML etiketleri, bir sayfada nasıl göründüklerinin ötesine geçen bu etiketlerin içeriği hakkında bilgi sağlar. Ekteki metin  etiketi, tarayıcı tarafından bir tür kodlama dili olarak hemen tanınır. Tarayıcı, bu kodu oluşturmaya çalışmak yerine, bu metni bir makale veya çevrimiçi eğitim amacıyla kod örneği olarak kullandığınızı anlar.

Anlamsal etiketler kullanmak, içeriğinizi şekillendirmek için size çok daha fazla kanca sağlar. Belki bugün kod örneklerinizi varsayılan tarayıcı stilinde görüntülemeyi tercih edersiniz, ancak yarın onları gri bir arka plan rengiyle çağırmak isteyebilirsiniz; daha sonra yine de, kesin tek aralıklı yazı tipi ailesini tanımlamak isteyebilirsiniz veya yazı tipi yığını örnekleriniz için kullanmak için. Tüm bunları semantik işaretleme ve akıllıca uygulanmış CSS kullanarak kolayca yapabilirsiniz.

Semantik Etiketleri Doğru Kullanmak

Semantik etiketleri sunum amacından ziyade anlamı iletmek için kullanırken, onları sadece genel görüntü özellikleri için yanlış kullanmamaya dikkat edin. En yaygın olarak yanlış kullanılan semantik etiketlerden bazıları şunlardır:

• blok alıntı - Bazı insanlar alıntı olmayan metni girintilemek için etiket. Bunun nedeni, blok alıntıların varsayılan olarak girintili olmasıdır. Yalnızca blok alıntı olmayan metni girintilemek istiyorsanız, bunun yerine CSS kenar boşluklarını kullanın.
• p — Bazı web editörleri (paragrafta bulunan bölünmez boşluk) o sayfanın metni için gerçek paragraflar tanımlamak yerine sayfa öğeleri arasına fazladan boşluk eklemek için. Önceki örnekte olduğu gibi, boşluk eklemek yerine kenar boşluğu veya dolgu stili özelliğini kullanmalısınız.
• ul - olduğu gibi

  , metni içine alan bir

   etiketi çoğu tarayıcıda bu metni girintiler. Bu hem anlamsal olarak yanlış hem de geçersiz HTML'dir, çünkü yalnızca
  •  etiketler bir içinde geçerlidir
    etiket. Metni girintilemek için yine kenar boşluğunu veya dolgu stilini kullanın.
  • h1, h2, h3, h4, h5 ve h6 — Yazı tiplerini daha büyük ve daha kalın yapmak için başlık etiketlerini kullanabilirsiniz, ancak metin bir başlık değilse, bunun yerine yazı tipi ağırlığı ve yazı tipi boyutu CSS özelliklerini kullanın.

  Anlamı olan HTML etiketlerini kullanarak, her şeyi basitçe çevreleyenlerden daha fazla bilgi veren sayfalar yaratırsınız.

   etiketler.

  Hangi HTML Etiketleri Semantiktir?

  Neredeyse her HTML4 etiketi ve tüm HTML5 etiketlerin anlamsal anlamları vardır, bazı etiketlerin öncelikle anlamsal.

  Örneğin, HTML5 içeriğin anlamını yeniden tanımlamıştır.  ve  Etiketler anlamsal olacak.  etiketi ekstra önem taşımaz; bunun yerine, etiketli metin tipik olarak kalın olarak işlenir. Aynı şekilde,  etiketi fazladan önem veya vurgu ifade etmez; bunun yerine, tipik olarak italik olarak işlenen metni tanımlar.

  Semantik HTML Etiketleri

  Kısaltma
  kısaltma
  Uzun alıntı
  Tanım
  Belgenin yazar(lar)ının adresi
  Alıntı
  Kod referansı
  Teletype metni
  mantıksal bölme
  Genel satır içi stil kapsayıcı
  Silinen metin
  Eklenen metin
  Vurgu
  Güçlü vurgu
  Birinci düzey başlık
  İkinci düzey başlık
  Üçüncü seviye başlık
  Dördüncü seviye başlık
  Beşinci seviye başlık
  Altıncı seviye başlık
  	Tematik mola
  Kullanıcı tarafından girilecek metin
  Önceden biçimlendirilmiş metin
  Kısa satır içi teklif
  Örnek çıktı
  alt simge
  üst simge
  Değişken veya kullanıcı tanımlı metin