HTML, hem semantik hem de semantik olmayan öğelerden oluşur. Semantik öğeler (ör.
Semantik öğeler (ör. <header> ve <footer>) içerdikleri içeriğin anlamını hem tarayıcıya hem de geliştiriciye iletirken, semantik olmayan HTML öğeleri (ör. <div> ve <span> ) içeriklerinin anlamı hakkında hiçbir şey söylemez.
Semantic HTML, HTML öğelerinin yalnızca sunum amaçları yerine web belgeleri içindeki içerik hakkında anlam veya bilgi iletmek amacıyla kullanılmasıdır. Örneğin, semantik HTML yazarken <h1> başlık etiketi, yalnızca büyük yazı tipleriyle başlıklar oluşturmak için değil, bir belgedeki en önemli tek başlığı belirtmek için de kullanılmalıdır.
Aşağıdaki listede bazı popüler HTML Semantik etiketlerini bulabilirsiniz:
<article><aside><details><figcaption><figure><footer><header><main><mark><section>
HTML Nedir?
HTML, Hypertext Markup Language anlamına gelir. HTML, web sayfaları ve web tabanlı belgeler oluşturmak için standart biçimlendirme dilidir.
Tüm web sayfalarında, Web tarayıcılarına içeriğin nasıl görüntüleneceğini söyleyen etiketler ve niteliklerden oluşan bir dizi HTML öğesi bulunur. Örneğin, HTML etiketleri bir web tarayıcısına metin, resim, video, renkler, köprüler, tablolar vb.’nin nasıl görüntüleneceğini söyler.
Fakat HTML bir programlama dili değildir. Çünkü programlama dilleri verileri değiştirir ve HTML gibi biçimlendirme dilleri, öğelerin bir web sayfasında nasıl görüntüleneceğini belirler.
HTML5 Nedir?
HTML5, web sayfalarında görüntülenecek içeriğin oluşturulmasında ve yapılandırılmasında kullanılan HTML’nin yayınlanan son sürümüdür. HTML5 kullananlar, Cascading Style Sheets (CSS) gibi kodlamaları ve yanında Javascript gibi betik dillerini de kullanabilir.
Piyasaya sürüldüğü sırada HTML5’in en büyük avantajı, önceki yinelemelere göre çok daha hızlı ve çok daha duyarlı olmasıydı. Uygulama olarak gömmek zorunda kalmadan ve kullanıcıların bunlara erişmek için Flash gibi eklentilere ihtiyaç duymadan web sayfalarına video ve ses öğeleri ekleyebilme gibi daha iyi işlevsellik sağladı. HTML5, diğerleri arasında coğrafi konumları, web depolamayı ve sürükle ve bırak yeteneklerini belirlemek için uygulama programlama arabirimlerini (API’ler) tanıttı. Bu, özellikle özellikleri düşük güçlü cihazlar düşünülerek tasarlandığından, onu platformlar arası mobil uygulamalarla hızlandırdı.
Semantic Ne Demek?
“Semantik” kelimesinin birkaç anlamı vardır. Bilgisayar biliminde semantic, kod ifadelerini yorumlamak için kurallar sağlar. Bu durumda semantik, HTML’nin (kod) nasıl yorumlanacağına ilişkin kuralları ortaya koyar. Bu kurallar yapıyı ve anlamı yönetir.
Bilgisayar programlama ve programlama dillerinde semantik, sözdizimine değil, bir talimatın anlamına atıfta bulunur. Örneğin, bir programcı başarıyla derlenen veya yorumlanan ancak çalışmayan bir işlev yazarsa, bu bir semantik hata olur. Programcı bir anahtar kelimeyi veya işlev adını yanlış yazarsa ve program başarılı bir şekilde derlenemez veya yorumlanamazsa, bu bir sözdizimi hatası olur.
Daha fazla bilgi için: Semantik Nedir? Semantik SEO Nasıl Yapılır?
Accessibility Object Model (AOM)
Accessibility Object Model (AOM), geliştiricilerin tarayıcı erişilebilirlik ağacını değiştirmesine olanak tanıyan deneysel bir JavaScript API’sidir. Çoğu HTML öğesi için erişilebilirlikle ilgili bilgileri içerir. Tarayıcılar, işaretlemeyi DOM ağacı adı verilen dahili bir temsile dönüştürür. DOM ağacı, tüm biçimlendirme öğeleri, nitelikler ve metin düğümleri için nesneler içerir. Ardından tarayıcılar, ekran okuyucular gibi yardımcı teknolojiler için platforma özgü Erişilebilirlik API’leri tarafından kullanılan DOM ağacını temel alan bir erişilebilirlik ağacı oluşturur.
AOM, Google’dan Alice Boxhall ve Dominic Mazzoni, Apple’dan James Craig ve Mozilla’dan Alexander Surkov tarafından geliştirilmektedir.
HTML5 Semantik Etiketler Hangileri?
En popüler HTML5 semantik etiketlerini aşağıdaki tabloda bulabilirsiniz:
| Etiketler | Açıklamalar |
| <header> | <header> öğesi, giriş içeriği veya bir dizi gezinme bağlantısı için bir kapsayıcıyı temsil eder. |
| <nav> | <nav> öğesi, bir dizi gezinme bağlantısı tanımlar. |
| <main> | <main>, ana sayfa içeriğini belirtir ve benzersiz olmalıdır. |
| <article> | <article> öğesi bağımsız içeriği belirtir. |
| <aside> | <aside> öğesi, yerleştirildiği içeriğin dışında bazı içerikleri tanımlar (kenar çubuğu gibi). |
| <details> | Ek ayrıntılar için etiketi belirtir. |
<figcaption> | <figure> etiketi içindeki içeriğin (genellikle bir görselin veya bir illüstrasyonun) açıklamasını sağlar. |
<figure> | <figure> etiketi, genellikle bir görsel, diyagram, fotoğraf, kod parçacığı, veya tablo gibi bağımsız bir içeriği belirtir. |
| <mark> | <mark>, vurgulanan metni belirtir. |
| <section> | Belgenin bölümünü temsil eder. |
| <summary> | <details> öğesi için bir başlık belirtir. |
| <time> | <time> etiketi, bir tarih veya saat bilgisini temsil eder. |
| <footer> | <footer> öğesi, bir belge veya bölüm için bir altbilgi tanımlar. |
İnternet Sitesi Yaparken HTML5 Semantik Etiketler Kullanılmalı mı?
İnternette bir milyardan fazla web sitesi var. Birçoğu uzun zaman önce yapıldığı için HTML özellikleriyle güncellenmemiştir. Bu nedenle, arama motorları bu web sitelerini es geçer ve görüntüleyenler bu web sitelerini okumakta zorlanır.
HTML5’in en önemli özelliklerinden biri semantiğidir. Anlamsal HTML, web sayfalarının farklı bölümlerini ve düzenini daha iyi tanımlayarak HTML’yi daha anlaşılır hale getiren sözdizimini ifade eder. Tarayıcıların ve arama motorlarının içeriği daha iyi yorumlamasını sağlayarak web sayfalarını daha bilgilendirici ve uyarlanabilir hale getirir. Örneğin, <div id="header"> kullanmak yerine bir başlık etiketi kullanabilirsiniz.
Semantik etiketlerden sonra CSS, içeriğin görsel sunumuyla ilgilenir. Bir açılış sayfası bu şekilde oluşturulur. Tüm süreçte semantik öğeler çok önemli bir rol oynar.
Koddaki etiket, geliştiriciye ve tarayıcıya ne yapması gerektiğini söyler. Web sayfalarının farklı bölümlerini ve düzenini tanımlar, bu da HTML’yi daha kolay anlaşılır hale getirir.
Semantik HTML Etiketleri Daha İyi SEO Performansı İçin Önemli mi?
Semantik HTML etiketleri, web sitenizin SEO’sunu birkaç farklı şekilde iyileştirmeye yardımcı olabilir. İlk olarak, Google’ın web sitenizdeki içeriği daha iyi anlamasına yardımcı olur. Bunun nedeni, semantik etiketlerin web içeriğine anlam ve yapı sağlayarak Google’ın içeriği dizine eklemesini ve sıralamasını kolaylaştırmasıdır.
Semantik HTML etiketlerini kullanmak, her ikisi de SEO için önemli sıralama faktörleri olan web sitenizin kullanılabilirliğini ve erişilebilirliğini geliştirmeye de yardımcı olabilir.
Son olarak, semantik etiketler, girişinizi kullanıcılar için daha dikkat çekici ve alakalı hale getirebildikleri için, web sitenizin arama motoru sonuç sayfalarındaki listelemesinden tıklama oranını artırmanıza da yardımcı olabilir.
Semantik HTML etiketlerinin kullanılması, web sitenizi SEO açısından iyileştirmenin iyi bir yoludur. Ancak, yüksek kaliteli içerik oluşturmak ve bağlantılar oluşturmak gibi diğer SEO en iyi uygulamalarına ek olarak kullanılmaları gerektiğini de akılda tutmanız önemlidir.
Semantik HTML etiketlerini kullanmaya ek olarak, web sitenizin SEO’sunu iyileştirmek için yapabileceğiniz başka şeyler de vardır. Örneğin, arama motorlarının web sitenizin ne hakkında olduğunu anlamasına yardımcı olmak için açıklayıcı başlıklar ve meta etiketler kullanabilirsiniz. Web sitenizin arama sonuçlarındaki sıralamasını iyileştirmeye yardımcı olması için anahtar kelime açısından zengin içerik kullanabilirsiniz.
Web sitenizin SEO’sunu iyileştirmek istiyorsanız, semantik HTML etiketlerini kullanmak harika bir başlangıç noktasıdır.
Semantic HTML Etiketlerinin Avantajları
Semantik HTLM etiketlerinin avantajları aşağıdaki şekildedir:
1. Sürdürülebilirlik
Sürdürülebilirlik, iyi ve yüksek kaliteli kod yazmanın kritik faktörlerinden biridir. Bu, bir geliştiricinin zihninde her zaman ön planda olması gereken bir kodlama yönüdür. Semantik HTML, sürdürülebilirliği birkaç önemli yolla geliştirmeye yardımcı olur.
Birincisi, açık kodun daha sürdürülebilir olmasıdır. Semantik kodun bir bakışta okunması, semantik olmayan koddan çok daha kolaydır. İzleyicinin önlerindeki koda hızlı bir şekilde bakmasını ve neler olduğunu bilmesini sağlar. <div> etiketleriyle dolu bir HTML belgesine sahip olmak, HTML4 ve öncesinde bir gerçekti. Ancak, <header>, <footer>, <main> ve <section> gibi büyük ölçüde geliştirilmiş HTML5 etiketleri ile, belgenin hangi bölümünün nerede kullanıldığını hızlı bir şekilde ayırt etmek kolaydır.
2. Ulaşılabilirlik
Semantik kod, insan tarafından okunabilen işaretleme oluşturmanın yanı sıra işaretlemeyi makineler için daha iyi anlaşılır hale getirir. Bu da içeriğinizi okuyamayan kullanıcılar için erişilebilir hale getirebilir.
Peki daha iyi semantik HTML yazmak erişilebilirliği nasıl artırır?
Pek çok kullanıcı, içeriklerini tüketmek için bir ekran okuyucuya güvenir. Ekran okuyucuların içeriğinizi anlaması için onu taramaları gerekir. Bir kenar çubuğu ile bir makaleyi birbirinden ayırmak sizin için kolay olsa da, ek rehberlik olmadan bir ekran okuyucu için bu zor olabilir.
Semantik HTML kullanarak, içeriğinizin hedef kitlenize doğru bir şekilde kopyalandığından emin olmak için gereken rehberliği sağlarsınız. Kitlenize bağlı olarak, bu sizin için aşırı derecede önemli bir şey olmayabilir.
3. SEO
Semantik HTML’nin bu kadar önemli olmasının son nedeni SEO’dur. SEO (Arama Motoru Optimizasyonu), arama motorlarında görünürlüğünü artırmak için web sitenizi geliştirme sürecidir.
Bir web sitesi yayınladığınızda, özelliklerini keşfetmek için bir arama motoru tarafından taranır. Daha sonra çok karmaşık bir algoritmaya göre sıralanır. Bir arama motoru sitenizi düzgün bir şekilde okuyamazsa, onu düzgün bir şekilde sıralayamaz. Daha da kötüsü, muhtemelen düşük kaliteli olarak işaretler. İçeriğinizin birçok kişi tarafından görüntülenmesini istiyorsanız, arama motorlarında üst sıralarda yer alabilmesi gerekir. Bu yüzden kodunuzu yazarken semantiğe dikkat edin.
Bir başka önemli not da, semantik HTML’nin potansiyel olarak web sitenizi geleceğe dönük hale getirebileceğidir. Semantik HTML’nin artan popülaritesi ile birlikte, giderek daha fazla web hizmeti ve arama motoru muhtemelen bu avantajlardan yararlanacaktır.
İlgili İçerik: SEO Nedir, Nasıl Yapılır?
<section> vs. <article>
Her iki etiket de HTML 5’te semantik etiketidir. Hem <article> hem de <section> etiketleri benzer şekilde temsil edilir, ancak bazı anlamlar için kullanılır, bu anlam tarayıcı ve geliştiriciler içindir. Çıktılarda herhangi bir değişiklik olmayacağı için her iki etiket de birbirinin yerini alabilir, ancak geliştirici ve tarayıcıların bu içerikler üzerinde işlem yapmasını anlamak zordur.
| <section> | <article> |
| <section> etiketi, bir belgedeki bir bölümü tanımlar. | <article> etiketi bağımsız içeriği belirtir. |
| <section> etiketi Global nitelikleri destekler. | Etkinlik özniteliklerini destekler. |
| <section> etiketi, Etkinlik özniteliklerini destekler. | Global nitelikleri destekler. |
| <section> etiketi, belgenin veya uygulamanın genel bölümünü temsil eder. | Article Etiketi, belge, sayfa, uygulama veya sitedeki eksiksiz bir bileşimi temsil eder. |
| <section> etiketi, ilgili içeriğin tek bloğudur. | <article> etiketi, özel bir <section> türüdür. |
| <section> etiketi aşağıdaki tarayıcılar tarafından desteklenir:Chrome(5.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.5) | Aşağıdaki tarayıcılar tarafından desteklenir: Chrome(6.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.1) |
Div Etiketi Semantik Midir?
HTML’deki <div> etiketi anlamsal bir öğe olarak kabul edilmez. Doğası gereği kendi başına hiçbir şeyi temsil etmeyen akış içeriği için genel bir kapsayıcıdır. İçeriğini biçimlendirmek veya JavaScript ile belirli görevleri gerçekleştirmek için kullanılabilir, ancak içeriği hakkında tarayıcıya veya geliştiriciye herhangi bir bilgi sağlamaz, bu nedenle anlamsal olmadığı kabul edilir.
Bununla birlikte, <div>‘in kendisi semantik olmasa da, uygun sınıf veya kimlik öznitelikleriyle birleştirildiğinde semantik anlam katacak şekilde kullanılabilir. Ancak kendi başına, diğer belirli HTML5 öğelerinin sağladığı içsel semantik anlamı sağlamaz.
Stil Vermek için Semantik HTML Etiketleri Kullanmayın
Web tarayıcıları birçok semantik etikete stil uygulasa da (ör. <a> etiketi içindeki metin genellikle mavidir ve altı çizilir), bu, HTML etiketlerinin metninize stil vermek için kullanılması gerektiği anlamına gelmez.
Başka bir deyişle, “bağlantısız” bir metni yalnızca mavi ve altı çizili yapmak için <a> etiketini kullanmayacağınız gibi, diğer anlam etiketlerini de tamamen biçimsel amaçlarla kullanmamalısınız.
Semantik etiketleri yanlış kullanmanın bazı tipik örneklerini burada bulabilirsiniz:
- Yazı tipi boyutunu değiştirmek amacıyla başlık olmayan metin için
<h1>–<h6>etiketi kullanma - Yalnızca alıntı olmayan metni girintilemek için
<blockquote>kullanma - Vurgu gerektirmeyen metne yalnızca kalın veya italik eklemek için
<strong>veya<em>kullanmak.
Stil vermek için her zaman CSS kullanın.
HTML’nize sabit kodlama stilleri yerine sınıfları kullanmak çok daha iyidir. Bu, içeriğin sunumdan ayrılmasını sağlar ve değişiklik yapmayı çok daha kolaylaştırır. Bu yüzden şöyle bir şey tavsiye ederiz:
Önerilmez:
<article style="font-size:1.2em; color:#ccc>text text </article>Önerilir:
.article {
font-size:1.2em;
color:#ccc;
}<article class="article">text text </article>İlgili İçerikler
SEO Analizi Nasıl Yapılır? Yeni Başlayanlar İçin SEO Analiz Rehberi
Screaming Frog Nedir? SEO Analizi İçin Kapsamlı Screaming Frog Rehberi
WordPress SEO: WordPress SEO Ayarları Nasıl Yapılır?
Yeni Bir Sitenin On Page SEO Ayarları Nasıl Yapılır?
Angular Nedir? Yeni Başlayanlar İçin Aksiyonel Angular Rehberi
React Nedir, Nasıl Çalışır? Kullanım Alanları, React Frameworkleri
En İyi 5 WordPress Page Builder Sayfa Yapma Eklentisi
JavaScript Nedir? Yeni Başlayanlar İçin Temelden İleriye Aksiyonel JS Rehberi
Script Nedir, Nasıl Yazılır? Script vs. Tema Arasındaki Farklar
No-code Nedir? Nocode Platformları ile Kod Yazmadan Uygulama Geliştirmek Mümkün Mü?
Micro Front-End Nedir? İşletmeler Micro Front-End Dönüşümü Neden Yapmalıdır?
Largest Contentful Paint (LCP) Nedir? LCP Performansı Nasıl İyileştirilir?
WordPress Site Hızlandırma, WordPress Web Sitesi Nasıl Hızlandırılır?
En İyi 6 Web Site Hız Testi Aracı
