HTML etiketleri: Temel bilgiler için bir rehber

HTML etiketleri
(İmaj kredisi: Gelecek)

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 aldığı ilk şeydir, bu da onu CSS ve JavaScript'ten hemen önce almak için çok önemli bir parça haline getirir.

Tarayıcının sayfanın yapısını okumasına ve içeriğini oluşturmasına olanak tanıyan Belge Nesne Modelinin ana sürücüsüdür (daha fazla bilgi için bkz. sayfa düzenleri İşte). İş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özdiziminin içindeki içeriği doğru bir şekilde tanımlayabilmesi ve tüketicilerin onu anlamlandırmasına olanak tanıması için yıllar içinde geliştirildi.



HTML geliştikçe, bir zamanlar önerilen şeyler artık kötü uygulama olarak kabul edilebilir. Ziyaretçilere sitelerimize en iyi şekilde hizmet ettiğinden emin olmak için kullandığımız dili takip etmek bizim için önemlidir. Yanlış HTML, yarardan çok zarara neden olabilir. Doğru yapıyı yerine getirmemizi sağlayarak, oluşturduğumuz içeriğin geleceğe hazır olduğundan emin olabiliriz.

öğesi, HTML'deki 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ğlıyoruz. 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 koddan kaçınmak mı istiyorsunuz? Bu en iyi web sitesi oluşturuculardan birini deneyin. Ve en iyiye yönelik rehberimizle sizin için doğru hizmeti aldığınızdan emin olun ağ sağlayıcısı Hizmetler.

Temel HTML etiketleri nelerdir?

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

HTML5 yeni bir anlamsal öğe kümesi sunmadan önce, geliştiriciler aynı etkiyi elde etmek için ör. . 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 birkaç anlamsal öğeye sahibiz. veya bir sayfanın yapılandırılmasına yardımcı olmak için. Yapıyı sadece kullanılan etiketlere bakarak takip edebilmeliyiz - bu sadece 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. Ve kendinizinkini yaratabilirsiniz HTML standart metni şablonu, böylece etiketleriniz her zaman doğru ve yeni bir yapıya her başladığınızda kullanıma hazır olur.

Etiket

Başlık normalde sayfanın geri kalanıyla doğrudan ilgili olmayan bir tür tekrarlanan içerik içerir. Spesifikasyon, bunu bir logo, site genelinde gezinme veya bir arama işlevi içerebilecek bir 'giriş veya seyir yardımcıları grubu' olarak tanımlar. Birden fazla olabilir bir sayfadaki öğeler. Örneğin, bir blogun ana sayfası bir görüntülediği her gönderi için etiket.

Etiket

Ç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ı kendilerine aday olabilir öğe, 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, öğesi, bu bağlantıları site gezintisi olarak tanımlamak için yeterlidir ve ayrı bir bağlantı kullanmaya gerek yoktur. etiket.

Etiket

öğesi, her sayfanın odak noktasıdır. Sayfanın üstbilgisinin ve altbilgisinin dışında, diğer tüm içerik burada olmalıdır. Sadece bir tane olmalı bir sayfada. 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.

HTML etiketleri

Gibi anlamsal etiketler tarayıcının belirli içeriği tanımasına yardımcı olun(Resim kredisi: Matt Crouch)

Etiket

Adından da anlaşılacağı gibi, öğ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 gezinmesidir veya reklamların yanında reklam yayınlamaktır. .

KİME öğ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 - diğer bölümlerin içi dahil - veya hiç dahil edilmeyebilir.

Ve etiketleri

W3C spesifikasyonu şunları tanımlar: ve benzer bir yolla. Her ikisi de bir sayfanın farklı parçalarını bir arada gruplandırmak için tasarlanmıştır. Temel bir fark, kompozisyondur. Bir 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 verilebilir.

Aksine, bir aksi takdirde anlamsal bir anlamı olmayacak şekilde bir sayfanın birden çok bölümünü 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.

Dikkat çekmeye değer bir > etiket birden fazla elementler.

Unutmayın, anlamsal HTML, bir sayfanın anahat yapısından daha fazlasıdır. Neredeyse her öğe bir tür anlam sağlar, bu da genellikle bulunacak iyi bir uyum olduğu anlamına gelir. Sadece her zaman kullan veya başka hiçbir şey işe yaramayacağı zaman etiketler.

Doğru HTML işaretlemesi neden önemlidir?

HTML etiketleri

Gibi belirli etiketler etkili olması için doğru içeriği içermelidir(Resim kredisi: Matt Crouch)

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, aşağıdaki gibi belirli etiketleri arayarak yaparlar.

ve ve bunların içeriklerini algoritmalarını bilgilendirmek için kullanmak. Örneğin, bir konser için bilet aramak, etkinliğin adını içeren başlıkların aranmasını içerebilir,

sanatçıyı tartışan unsurlar ve doğru tarih için. 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. Erişilebilirlik için daha iyi

Bazı öğeler, kendileriyle ilişkili tanımlanmış davranışlara sahiptir. Bir öğesinin, örneğin, etkileşimli olması ve tıklandığında bir eylem gerçekleştirmesi beklenir. Etkileşimli olmayan bir öğe, örneğin bir bunun yerine kullanılırsa, bir ayrıştırıcı, bazı ek özellikler olmadan onu tıklatabileceğ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.

Bir yer işareti, bir bölümleme elemanı kullanılarak oluşturulur. veya eşdeğer bir 'rol' özelliği uygulayarak. 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, sitemizin gelecekte anlaşılma, bulunma ve görülme şansı olmasını sağlıyoruz.

Aksilikler için plan yapmak da çok önemlidir, bu nedenle varlıklarınızı yedeklediğinizden emin olun. en iyi bulut depolama dışarıda.

Web tasarımı hakkında daha fazla bilgi edinmek ister misiniz? Sonra abone olun , web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi.

JS banner

ilk 10 ren ve heyecan verici bölüm
GenerateJS'de nasıl daha iyi JavaScript oluşturacağınızı öğrenin(Resim kredisi: Future / Toa Heftiba, Unsplash)

Daha iyi JavaScript oluşturmanıza yardımcı olan konferans GenerateJS'deki JavaScript süperstarları serimizle Nisan 2020'de bize katılın. Şimdi rezervasyon yap createconf.com

Daha fazla oku: