HTML Nedir?
HTML, “Hypertext Markup Language” ifadesinin kısaltmasıdır ve web sayfalarının yapısını tanımlayan bir işaretleme dilidir. HTML, web tarayıcıları tarafından okunabilir ve yorumlanabilir bir şekilde metin, resim, bağlantılar, form elemanları gibi içerikleri düzenlemek ve göstermek için kullanılır.
HTML5 Nedir?
HTML5, HTML’nin beşinci ve en güncel versiyonudur. Web sayfalarını oluşturmak ve düzenlemek için kullanılan bir işaretleme dilidir. HTML5, yeni özellikler ekleyerek ve geliştirmeler yaparak web geliştiricilere daha fazla olanak, performans ve zengin kullanıcı deneyimi sunar.
Semantic Ne Demek?
“Semantic” kelimesi, bir şeyin anlamı veya anlam taşıması anlamına gelir. Semantik HTML, web sayfalarını oluştururken kullanılan özel etiketlerle, sayfanın yapısını daha anlamlı ve açık bir şekilde belirtmeyi ifade eder. Bu, sayfanın içeriğinin hem tarayıcılar hem de geliştiriciler için daha iyi anlaşılabilir olmasına katkıda bulunur.
Accessibility Object Model (AOM)
Accessibility Object Model (AOM), web uygulamalarının erişilebilirlik özelliklerini kontrol etmek ve bu özelliklere programatik olarak erişmek için bir API (Application Programming Interface) sağlar. AOM, web geliştiricilerinin sayfalarını daha erişilebilir hale getirmelerine yardımcı olan bir araçtır.
HTML5 Semantik Etiketler Hangileri, Örnekler İle Anlatım?
HTML5 semantik etiketler, sayfanın yapısını daha anlamlı hale getirmek için kullanılan özel etiketlerdir. Bazı örnekler şunlardır:
<article> Etiketi
<article> etiketi, bir belge veya sayfa içinde bağımsız, kendi başına anlam ifade eden içerik bloklarını temsil eder. Genellikle bir makale, blog gönderisi, forum postası veya bir haber öğesi gibi içerikleri belirtmek için kullanılır. Bu etiket sayesinde içerik bağımsız bir şekilde taşınabilir ve tarayıcılar veya diğer araçlar tarafından daha iyi anlaşılabilir.
İşte <article> etiketinin özellikleri ve kullanımıyla ilgili bazı önemli noktalar:
- Bağımsız İçerik:
<article>içindeki içerik, sayfanın geri kalanından bağımsız bir bütünlük oluşturmalıdır. Yani, içerik kendi başına anlam ifade etmelidir. - Başlık Kullanımı: Genellikle
<article>içinde bir başlık (<h1>,<h2>, vb.) kullanılır. Bu başlık, içeriğin ana konseptini belirtir. - Makale İçeriği:
<article>içindeki içerik genellikle metin, resimler, bağlantılar ve diğer HTML öğelerini içerir. Makale, bir hikaye, blog yazısı veya haber öğesi gibi çeşitli türlerde içerikler olabilir.
Örnek bir <article> kullanımı:
<aside> Etiketi
<aside> etiketi, bir belge veya sayfa içindeki ana içerikten bağımsız, yan bilgileri temsil eder. Bu etiket, sayfa içeriğinden ayrı, fakat ilgili bilgileri içeren bölümleri belirtmek için kullanılır. Genellikle reklamlar, yan notlar, bağlantılar, biyografiler veya diğer yardımcı içerikler <aside> içinde yer alır.
İşte <aside> etiketinin özellikleri ve kullanımıyla ilgili bazı önemli noktalar:
- Bağımsız İçerik:
<aside>içindeki içerik, sayfa içeriğinden bağımsız olmalıdır. Yani,<aside>içeriği kaldırıldığında ana içeriğin bütünlüğü bozulmamalıdır. - Yan Bilgiler ve Destekleyici İçerik:
<aside>, sayfadaki ana içeriği desteklemek veya tamamlamak için kullanılır. Bu nedenle, genellikle yan bilgiler, reklamlar, bağlantılar gibi destekleyici içerikleri içerir. - Konuyla İlgili İçerik:
<aside>içindeki bilgiler, sayfanın ana konusuyla ilgili olmalıdır. Örneğin, bir makaledeki yan notlar veya ilgili bağlantılar bu etiket içinde yer alabilir.
Örnek bir <aside> kullanımı:
<details> ve <summary> Etiketi
<details> etiketi, sayfa üzerinde gösterilen içeriği açılır/kapanır bir kutu içinde saklamak için kullanılır. Kullanıcı bu kutuyu tıklayarak içeriği gösterebilir veya gizleyebilir. Bu, özellikle bir sayfada gizli detaylar veya ek bilgiler sunmak için kullanışlıdır.
<details> etiketiyle birlikte genellikle <summary> etiketi kullanılır. <summary> etiketi, açılır/kapanır kutunun başlığını temsil eder ve kullanıcıya içeriğin ne hakkında olduğu hakkında bir ön izleme sunar.
İşte <details> ve <summary> etiketlerinin kullanımına dair örnek:
Bu örnekte, bir detay kutusu bulunmaktadır. Kullanıcı <summary> başlığını tıkladığında içerik görüntülenir veya gizlenir. İçerik, bir paragraf ve bir liste içerir.
Bu etiket, özellikle kullanıcıların sayfa üzerindeki belirli detayları isteğe bağlı olarak görmelerini sağlamak için kullanılır. Örneğin, bir FAQ sayfasında her bir sorunun yanında bir açılır kutu kullanarak detaylı açıklamaları gizleyebilirsiniz.
<figure> ve <figcaption> Etiketleri
<figure> etiketi, bir belge içindeki görsel içerikleri gruplamak için kullanılır. Bu, resimler, grafikler, fotoğraflar, çizimler veya diğer görsel öğeleri içeren bir bütünü temsil eder. Ayrıca <figcaption> etiketi ile birlikte kullanılabilir.
<figcaption> etiketi, bir <figure> içindeki görsel içeriğin açıklamasını veya başlığını belirtmek için kullanılır. Görsel içeriğin hemen altında yer alır.
Örnek kullanım:
Bu iki etiket bir arada kullanıldığında, belirli bir görsel öğenin etiketlenmesi ve görselin açıklamasının eklenmesi sağlanır. Bu, hem tarayıcılar hem de erişilebilirlik araçları için görsel içeriğin daha iyi anlaşılmasına ve kullanıcılara daha fazla bilgi sunulmasına yardımcı olur.
Not: <figure> ve <figcaption> etiketleri, sadece görsel içeriği değil, aynı zamanda ses dosyalarını, video dosyalarını ve diğer medya öğelerini de gruplamak için kullanılabilir.
<footer> Etiketi
<footer> etiketi, bir HTML belgesi veya belirli bir bölüm (örneğin, makale veya bölüm) için altbilgi veya dipnot bilgilerini temsil eden bir semantik etikettir. Sayfanın alt kısmında veya belirli bir bölümün altında yer alabilir.
Bu etiket genellikle aşağıdaki türde içerikleri içerebilir:
- Telif hakkı bildirimleri
- İletişim bilgileri
- Sayfa numaraları
- Bağlantılar
- Site haritası
- Kullanım şartları ve gizlilik politikaları gibi bağlantılar
Bu örnekte, <footer> içinde telif hakkı bildirimi ve bir gezinme menüsü bulunmaktadır. Footer, sayfanın alt kısmında yer alır ve genellikle kullanıcılara sayfa hakkında ek bilgiler sunmak veya site içi gezinmeyi kolaylaştırmak amacıyla kullanılır.
<footer> etiketi, sayfa tasarımının düzenlenmesine yardımcı olarak HTML belgelerini daha anlamlı hale getirir ve tarayıcılar, arama motorları ve erişilebilirlik araçları için belirli içeriğin konseptini vurgular.
<header> Etiketi
<header> etiketi, bir HTML belgesi veya belirli bir bölüm (örneğin, makale veya bölüm) için başlık bölümünü temsil eden bir semantik etikettir. Genellikle sayfanın üst kısmında veya belirli bir bölümün başında yer alır ve genel başlık, alt başlık, logo veya gezinme menüsü gibi ana içerik başlıklarını içerebilir.
<header> etiketi, sayfanın veya bölümün başlığını temsil ederken, içindeki içerik belirli bir biçimde düzenlenmiş olmalıdır.
Örnek kullanım:
Bu örnekte, <header> içinde ana başlık (<h1>), alt başlık veya açıklama (<p>) ve bir gezinme menüsü (<nav>) bulunmaktadır. Header, sayfanın üst kısmında ve ana içeriği tanımlayan bir bölümü temsil eder.
<header> etiketi, sayfanın veya belirli bir bölümünün başlık bölümünü belirtirken, HTML belgelerini daha anlamlı hale getirir ve bu başlıkları daha iyi tanımlar. Bu da tarayıcılar, arama motorları ve erişilebilirlik araçları için içeriğin daha iyi anlaşılmasına katkıda bulunur.
<main> Etiketi
<main> etiketi, bir HTML belgesi içinde ana içeriği temsil eden bir semantik etikettir. Genellikle sayfanın ortasında veya belirli bir bölümün başında yer alır ve sayfa içeriğinin ana kısmını içerir. <main> etiketi, başlık, alt başlık, metin, resimler, tablolar ve diğer içerik öğelerini içerebilir.
<main> etiketinin kullanımı, sayfanın veya belirli bir bölümünün ana içeriğini belirgin bir şekilde tanımlamak için uygundur. Ayrıca, ek olarak sayfanın başlık bölümünün (<header>), altbilgi bölümünün (<footer>), yan bilgilerin (<aside>) ve diğer bölümlerin içerisinde yer alır.
Örnek kullanım:
Bu örnekte, <main> etiketi içinde ana içerik başlığı (<h1>), bir paragraf ve bir resim bulunmaktadır. Ana içeriği temsil eden bu bölüm, sayfanın diğer kısımları arasında belirgin bir şekilde ayrılmıştır.
<main> etiketi, sayfa içeriğini daha iyi organize etmeye ve semantik bir yapı oluşturmaya yardımcı olur. Bu da tarayıcılar, arama motorları ve erişilebilirlik araçları için içeriğin daha iyi anlaşılmasına katkıda bulunur.
<mark> Etiketi
<mark> etiketi, bir belgedeki metin içinde vurgulanmış (highlighted) veya öne çıkarılmış kısmı temsil eden bir semantik etikettir. Bu etiket, genellikle bir arama sonucunda veya bir kullanıcının sayfa içindeki önemli bilgileri hızlıca bulmasını sağlamak için kullanılır.
<mark> etiketi, içindeki metni sararak veya renklendirerek vurgulama sağlar, ancak bu stil özellikleri tarayıcıya bağlı olarak değişebilir.
Örnek kullanım:
Bu örnekte, “önemli” kelimesi <mark> etiketi içine alınmış ve bu kelime sayfa içinde vurgulanmış olarak gösterilecektir.
<mark> etiketi, belirli bir kısmın önemli veya dikkat çekici olduğunu belirtmek amacıyla kullanılır. Bu, kullanıcılara sayfa içindeki anahtar bilgileri daha kolay bulma imkanı sağlar ve sayfa içindeki metni hızlıca tarama konusunda yardımcı olabilir.
<nav> Etiketi
<nav> etiketi, bir HTML belgesi içinde gezinme menülerini, bağlantıları veya diğer gezinme öğelerini gruplamak için kullanılan semantik bir etikettir. Bu etiket, bir sayfa içindeki gezinme bölümünü tanımlar ve sayfanın farklı bölümlerine veya diğer sayfalara yönlendiren bağlantıları içerebilir.
<nav> etiketi, genellikle site başlığı altında veya sayfanın üst kısmında yer alır ve ana gezinme öğelerini içerir. Bu, kullanıcıların sayfa içinde veya site içinde gezinmelerini kolaylaştırır.
Örnek kullanım:
Bu örnekte, <nav> içinde bir liste (<ul>) bulunmaktadır ve liste öğeleri (<li>) içinde sayfanın farklı bölümlerine yönlendiren bağlantılar (<a>) yer almaktadır. Bu, sayfa içindeki gezinme menüsünü temsil eder.
<nav> etiketi, içeriğin daha anlamlı bir şekilde düzenlenmesine ve tarayıcılar, ekran okuyucular ve diğer erişilebilirlik araçları için içeriğin daha iyi anlaşılmasına yardımcı olur.
<section> Etiketi
<section> etiketi, bir HTML belgesi içinde bağımsız bir bölümü temsil eden ve genellikle bir başlık ile ilişkilendirilen semantik bir etikettir. <section> etiketi, sayfa içeriğini mantıklı bir şekilde gruplamak ve bu grupları tanımlamak için kullanılır.
<section> etiketinin kullanımı, içindeki içeriğin bir konsepti veya bölümü temsil ettiği durumlar için uygundur. Her <section> etiketi kendi içinde bir başlık içerebilir (<h1>, <h2>, vb.).
Örnek kullanım:
Bu örnekte, <section> etiketi içinde bir başlık (<h2>), bir paragraf (<p>) ve bir liste (<ul>) bulunmaktadır. Bu bölüm, sayfa içinde bir konsepti temsil eder. <section> etiketleri, belge içeriğini bölümlere ayırarak daha iyi anlamamıza ve tarayıcılara, ekran okuyuculara ve diğer erişilebilirlik araçlarına belge yapısını açıklama konusunda yardımcı olur.
Not: <section> etiketi, sadece belgenin yapısını belirtir ve genellikle CSS ile stil uygulamak için kullanılmaz. Stil için genellikle <div> veya diğer uygun etiketler tercih edilir.
<time> Etiketi
<time> etiketi, bir HTML belgesi içinde belirli bir zamanı temsil eden semantik bir etikettir. Bu etiket, belirli bir tarih, saat veya hem tarih hem de saat bilgisi içeren zamanları tanımlamak için kullanılır.
<time> etiketi, özellikle makalelerde veya blog yazılarında belirli bir olayın tarihini veya bir içeriğin ne zaman oluşturulduğunu belirtmek için yaygın olarak kullanılır. Bu, tarayıcılara ve arama motorlarına içeriğin kronolojik bağlamını anlamalarında yardımcı olur.
Örnek kullanım:
Bu örnekte, <time> etiketi içinde datetime özelliği kullanılarak belirli bir tarih (“20 Kasım 2023”) belirtilmiştir. Tarayıcılar, bu etiketin içeriğini anlamak için bu özelliği kullanabilirler.
<time> etiketi ayrıca belirli bir saat veya belirli bir aralığı temsil etmek için de kullanılabilir:
Semantik HTML Etiketleri Daha İyi SEO Performansı İçin Önemli Mi?
Evet, semantik HTML etiketleri, SEO (Search Engine Optimization) performansını artırabilir. Arama motorları, sayfanın içeriğini daha iyi anlayabilir ve değerlendirebilir. Semantik etiketler, sayfa başlıklarını, içerikleri ve diğer önemli bilgileri daha belirgin bir şekilde tanımlayarak arama motorlarının sayfanın konseptini daha iyi anlamasına yardımcı olur.
Semantic HTML Etiketlerinin Avantajları
- Daha İyi Anlaşılabilirlik: Kodun daha anlamlı ve düzenli olmasını sağlar.
- Erişilebilirlik: Sayfa içeriğini daha iyi anlamak, ekran okuyucular ve diğer erişilebilirlik araçları için faydalıdır.
- SEO Performansı: Arama motorlarının sayfa içeriğini daha iyi anlamasına yardımcı olur, bu da SEO performansını artırabilir.
- Bakım Kolaylığı: Kodun daha temiz olması, bakım işlemlerini kolaylaştırır.
- Daha İyi Tarayıcı Desteği: Modern tarayıcılar, semantik etiketlere daha iyi destek sağlar.
