HTML etiketleri: Temel bilgiler için bir rehber

Geleceğe yönelik daha iyi siteler oluşturmak için popüler ve anlamsal HTML etiketleri ile nasıl site kuracağınızı ve nasıl kullanmanız gerektiğini öğrenin.

HTML, web üzerindeki her web sitesinin temelidir. Görsellerin nereye yerleştirilmesi gerektiğini, neye benzediğini ve hangi davranışa sahip olması gerektiğini tanımlar. Bu, bir tarayıcının anladığı ilk şeydir ve CSS ve JavaScript’ten hemen önce ulaşılması çok önemli bir parça haline gelir.

Ayrıca yaratıcı yolculuğuna başlamak için doğru bir yer arıyorsanız e-dergimize göz atmayı unutmayın.

HTML kodları, tarayıcının sayfanın yapısını okumasına ve içeriğini görüntülemesine izin veren Belge Nesne Modelinin (Document Object Model’ın) ana sürücüsüdür. İşaretlemede yazdığımız etiketlerin ayrıştırılmasıyla elemanlar oluşturulur. Bu nedenle, HTML’nin doğru olduğundan emin olmak önemlidir. Dilin kendisi, kullanılan söz diziminin içindeki içeriği doğru bir şekilde tanımlayabilmesi ve tüketicilerin bunu anlamasına olanak tanıması için yıllar içinde geliştirilmiştir.

HTML geliştikçe, bir zamanlar önerilen şeyler artık kötü uygulama olarak kabul edilebilir. Sitelerimizin ziyaretçilerimize en iyi şekilde hizmet ettiğinden emin olmak için kullandığımız dil gelişimini takip etmemiz bizim için önemlidir. Yanlış HTML, yarardan çok zarara neden olabilir. Bu yüzden doğru yapının kurulmasını sağlayarak, oluşturduğumuz içeriğin geleceğe hazır olduğundan emin olabiliriz.

<Div> elemanı HTML kod yapısının en genel kapsayıcıdır. Varsayılan olarak, kendisine stil uygulanmamış, kendisiyle ilişkili doğal bir anlamı yoktur ve her tarayıcı bunu destekler. Kendi stilimizi uygulayarak, istediğimiz gibi görünmesini ve davranmasını sağlayabiliriz. Bu, bir tarayıcıdaki ziyaretçiler için ideal görünse de, diğer kullanıcılar ve bu içeriğin tüketicileri için bir bedeli vardır.

Kullanmanız gereken temel HTML etiketlerini ve doğru etiketleri kullanmanın yapılarınıza getireceği temel avantajları keşfetmek için okumaya devam edin. 

Tasarlamanız gereken bir siteniz var ancak kod öğrenmek için yeterli zamanınız mı yok? O zaman kodlama da acemi olanlar için en iyi web tasarım araçları ile bir deneme yapmanızın sakıncası olmaz.

Temel HTML etiketleri nelerdir?

HTML etiketlerinde, bir anlamsal öğe, web sayfasının içeriğine anlam sağlayan bir öğedir, örneğin <header>. Anlamsal olmayan bir öğe tipik olarak stil uygulamak için kullanılır ve herhangi bir anlam taşımaz. 

HTML5 yeni bir semantik öğeler kümesi sunmadan önce, geliştiriciler aynı etkiyi elde etmek için <div> kullanırdı, örneğin <div id = “header”> . Bu öğeye açıklayıcı bir sınıf eklemek, geliştiriciye öğenin ne içerdiğini netleştirir, ancak bir bilgisayar onu anlayamaz.

Artık bir sayfanın yapılandırılmasına yardımcı olmak için <nav> veya <header> gibi birkaç anlamsal öğeye sahibiz. Yapıyı sadece kullanılan etiketlere bakarak takip edebilmeliyiz. Bu sadece <div> gibi anlamsal olmayan unsurlarla mümkün olmayacak bir şey.

Bu kılavuz, doğru iş için her zaman doğru anlamsal etiketleri kullandığınızdan emin olmanıza yardımcı olacaktır. Ayrıca, kendi HTML ortak şablonunuzu oluşturabilirsiniz, böylece etiketleriniz her zaman yeni bir derlemeye başladığınızda her zaman doğru ve kullanıma hazır olur. 

<header> (Başlık) HTML etiketi

Başlık normalde sayfanın geri kalanıyla doğrudan ilgili olmayan bir tür tekrarlanan içerik içerir. Spesifikasyon, bir logo, site genelinde gezinme veya bir arama işlevi içerebilecek bir “giriş veya seyir yardımcıları grubu” olarak tanımlar. Bir sayfada birden çok <header> öğesi olabilir. Örneğin, bir blogun ana sayfası, görüntülediği her gönderi için bir <header> etiketi içerebilir.

<nav> Html etiketi

Çoğu sitenin navigasyona ayrılmış bir alanı olacaktır. Bu, sitenin belirli alanlarına bağlantılar veya bir içerik haritası stil hiyerarşisi içerebilir. Tüm bağlantıların tek bir içinde olması gerekmez. Yalnızca sayfanın diğer bölümlerindeki bağlantı koleksiyonları kendi <nav> öğeleri için aday olabilir, ancak bu bağlama bağlıdır.

Yaygın bir model, altbilgide bir gizlilik politikasına veya iletişim sayfasına bağlantılar eklemektir. Bu alan <footer> öğesini kullanırsa, bu bağlantıları site gezintisi olarak tanımlamak yeterlidir ve ayrı bir <nav> etiketi kullanmaya gerek yoktur.

<main> etiketi

<main> elemanı her sayfanın odak noktasıdır. Sayfanın üstbilgisi ve altbilgisinin dışında, diğer tüm içerik burada olmalıdır. Bir sayfada yalnızca bir <main> olmalıdır. Ekran okuyucular gibi yardımcı teknolojiler bu öğeyi algılayabilir ve kullanıcıların doğrudan içeriğe atlamasına olanak tanır.

<aside> html etiketi

Adından da anlaşılacağı gibi <aside> öğesi, sayfanın ana içeriğiyle ilgili bilgileri içerir. Bu öğenin içindeki bilgiler diğer her şeyden ayrı olarak var olabilir ve bağlamı kaybetmez. Bu öğenin en yaygın kullanımı, bir kenar çubuğu gezinmesi veya <footer> ile birlikte reklamlar yayınlamaktır.

<footer> html etiketi

Bir <footer> öğesi, sayfayla ilgili özet bilgileri içerir. Pek çok web sitesi için buna bir adres, telif hakkı bilgileri veya ek sayfalara bağlantılar dahildir. Sayfanın altında her zaman tek bir altbilgi olmasına gerek yoktur. Herhangi bir yere yerleştirilebilir.

<article> ve <section> html etiketleri

W3C belirtimi <article> (makale) ve <section> (böüm) öğesini benzer şekilde tanımlar. Her ikisi de bir sayfanın farklı parçalarını bir arada gruplandırmak için tasarlanmıştır. Temel bir fark, kompozisyondur. Bir <article> kendi kendine yetecek şekilde tasarlanmıştır. İçindeki içerik bağımsız bir parça olarak mantıklı olacaktır. Buna örnek olarak bir blog yazısı, bir kullanıcı yorumu veya gömülü bir tweet, yada gömülü bir video içerebilir.

Bunun tersine bir <section>, bir sayfanın birden çok bölümünü, aksi takdirde başka hiçbir anlamsal anlamı olmayacak şekilde bir arada gruplandırır. Bunlar ayrılırsa anlamlarını yitirir. Bunun örnekleri, bir grup ilgili paragrafı, bir kitabın bir bölümünü veya sekmeli bir arayüzün parçası olarak tek bir sekmeyi içerir.

Bir <article > etiketinin birden çok <section> öğesinden oluşabileceğine dikkat etmek önemlidir. 

Unutmayın, anlamsal HTML, bir sayfanın ana hat yapısından daha fazlasıdır. Hemen hemen her öğe bir tür anlam sağlar, bu da genellikle bulunacak uygun bir yer olduğu anlamına gelir. Yalnızca hiçbir şey işe yaramadığında <div> veya <span> etiketlerini kullanın.

Doğru HTML işaretlemesi neden önemlidir?

Doğru HTML etiketlerini ve biçimlendirmeyi elde etmek çok önemlidir. İşte bunun üç nedeni.

01. Geliştirilmiş keşfedilebilirlik

Google gibi arama motorları sürekli olarak web’i tarar, siteleri bulur ve içeriklerini ayrıştırır. Bunu <h1> ve <article> gibi belirli etiketleri arayarak ve algoritmalarını bilgilendirmek için bunların içeriklerini kullanarak yaparlar. Örneğin, bir konser için bilet aramak, etkinliğin adını içeren başlıkları, <p> sanatçıyı tartışan öğeleri ve doğru tarihi <time> aramayı içerebilir. Aradıklarını bulamazlarsa, site bu arama sonuçlarında görünmeyecektir.

Pocket gibi bazı tarayıcılar ve hizmetler, kullanıcıların web sitelerini dikkati dağılmadan okumasına izin verir. Bunlar başlığı, içeriği ve medyayı siteden çıkarır ve okumayı kolaylaştıran bir görünümde düzenler. Sayfayı oluşturmak için doğru öğeleri kullanmak, bu araçların doğru bilgileri çıkarmasını ve kullanıcıya daha iyi bir deneyim sunmasını kolaylaştırır.

02. Daha İyi Erişilebilirlik

Bazı öğeler, kendileriyle ilişkili tanımlanmış davranışlara sahiptir. Örneğin bir <button> öğesinin etkileşimli olması ve tıklandığında bir eylem gerçekleştirmesi beklenir. Bunun yerine <div> gibi etkileşimli olmayan bir öğe kullanılırsa, bir ayrıştırıcı, bazı özellikler eklenmeden onu tıklayabileceğini bilemez.

Bu, erişilebilir teknolojileri kullananları da etkiler. Herhangi bir görsel olmadan bir sayfada gezinmek yavaş olabilir. Bu kullanıcılar bunun yerine web sitelerinde yer işareti veya başlık seviyesine göre gezinmeyi seçebilirler.

Yer işareti, <nav> gibi bir bölümleme öğesi kullanılarak veya eşdeğer bir ‘rol’ özelliği uygulanarak oluşturulur. Bunlar olmadan veya yanlış kullanarak, kullanıcı ihtiyaç duyduğu içeriği bulamayacaktır.

03. Geleceği planlayın

Web’in temel ilkelerinden biri geriye dönük uyumluluktur. Tüm özellikler, yıllar önce yapılmış sitelerle uyumlu olacak şekilde tasarlanmıştır ve gelecekte meydana gelebilecek değişiklikler için dikkate alınması gereken hususları vardır. Doğru öğeleri ve etiketleri şimdi kullanarak, sitenizin gelecekte anlaşılma, bulunma ve görülme şansı olmasını sağlayabilirsiniz.

Okumaya devam et:

• Google AMP, Web Sitesi İçin Doğru Seçim mi?
• Web Tasarımı için hangisini kendin yapmak istersin?
• Logo tasarımı: Bilmeniz gereken her şey [Bölüm 1]