Biri neden düzgün ve anlamsal bir şekilde işaretleme yapsın ki?

_{Mümkün olduğunca semantik olarak işaretlemeye çalıştığımı (denediğimi) çünkü görünüşlerini ve hissettiklerini sevdiğimden ama diğer çarpıcı avantajların farkında olduğum için değil. Sorumun amacı, başkalarını eğitebilmek}

Pekala, "Bunu en anlamsal şekilde işaretleyelim" diyen birçok makale ve ders gördüm.

Ama bana garip bir düşünce geldi, neden?

Neden doğru anlamsal anlam ifade eden belirli unsurlarla uğraşmak (ya da istenmek) ister? Özellikle, örneğin, yeni HTML5 elemanlarının bahsediyorum <time>, <output>ya <address>. Özellikle, sayfa "çalışırsa" (tüm tarayıcılarda iyi işler).

Neden hiçbir şey (veya en kötü durumda, jenerik ) hiçbir şeyin bu kadar iyi çalışmadığı <time>veya gibi unsurları kullanmak isteyeyim ?<address><span>

Bunu soruyorum çünkü bu sözde en iyi uygulamaları takip etmeyen çok sayıda (çok popüler) web sitesi (bu dahil) görüyorum.

Serbest İşlevsellik

Düzgün <label>s kullanarak , metin alanına girmek için etiketi tıklatabileceğiniz anlamına gelir. Birçok tarayıcı resmi spesifikasyondaki birçok etikete mantıksal varsayılan işlevsellik katacaktır, bu da daha az JavaScript eklentisi kullanabildiğiniz ve tamamen <div>s ve <span>s dışında bir siteden daha az kod yazabileceğiniz anlamına gelir .

Ulaşılabilirlik

Özgür işlevsellik ile ilgili olarak, anlambilim, ekran okuyucu yazılımı için çok şey ifade eder. Bir giriş alanının önündeki metin, bir vasiyetnameyle aynı şekilde okunmaz <label>. Ekran okuyucular, CSS'inizin çoğunu yok sayar, bu nedenle çoğunlukla HTML'nizin yapısına bağlıdır.

Mantıksal CSS

div #headerBir <header>ve stili doğrudan kullanabiliyorken neden bir a kullanmalısınız ? Anlamsal etiketler işleri işaretlemeyi ve stilinizi daha taşınabilir hale getirmeyi kolaylaştırır; çarpma için belirli bir stile sahipseniz ve <del>öğeleri her zaman kullanıyorsanız , stil çok daha taşınabilirdir. <del>herkes için aynı şeyi ifade eder, ancak herkes .deletedTextsınıfını farklı şekilde adlandırır.

Ayrıca büyük projelerde herkesin aynı sayfada kalmasına yardımcı olur; hiç kimse başkalarının ezoterik sınıf adlandırma kurallarını öğrenmekten hoşlanmaz.

SEO

Google gibi arama motorları, anlamsal HTML ve meta verileri daha fazla kullanmıştır . Google’ın Zengin Parçacıkları, anlamsal içeriği iletmek için özel meta veriler de kullanır.

Neden bu kadar yaygın değil

İşe alır ve insanlar bir web sitesini nasıl göründüğü ve çalıştığı konusunda değerlendirmek için kullanılır . Genelde anlamsallık için bir muhasebe yoktur çünkü uygulamalar için iş vakasını yazan insanlar bunu anlamıyor veya neden önemli.

Teknik olmayan kişilerin HTML anlambilimini anlamaları veya değerlendirmeleri çok zordur.

Bir web sitesi iyi görünüyorsa ve çalışıyor gibi görünüyorsa, neden endişelenmek? Birçok kişi orada bile bilmiyor olabilir olup buna bir şey daha. Erişilebilirliğe benzer şekilde, ekibinizdeki biri bunu gerçekten anlayana kadar bu göz ardı edilme eğilimindedir.

Semantik HTML'in projenizde bir öncelik olmasını istiyorsanız , bunun için davayı sunmanız gerekir. Ekibinize / patronunuza web sitenizin ekran okuyucuda nasıl çalıştığını göstermek aynı zamanda yararlı bir araçtır.

Bunun cevabı basitçe bilgi iletmek ve belgenizi yapılandırmaktır .

Açıklık ve div kullandığınızda, belgenizin bir yapısı yoktur. Liste yok, paragraf yok, tablo yok, köprü yok. Hiçbir şey değil. HTML'yi bir biçimlendirme dili olarak seçmenin hiçbir anlamı yoktur ve ardından içeriğinizi ifade etmek ve yapılandırmak için sunduğu kelimeleri yok sayın. Yapı burada önemli kelimedir btw. HTML, görüntülenmeyen yapılandırma içindir. CSS bunun için var.

Kodunuzu semantik olarak işaretlerseniz, insan okuyuculara ve makinelere elemanlarınızdaki verileri anlama şansı veriyorsunuz. Span ve div elementlerini tamamen kullanırsanız, bu ekstra bilgiye sahip olmayacaksınız ve bunları sadece değerlerden elde etmek mümkün olmayabilir.

Aynı şekilde, web sitelerini kazımak ve yalnızca İçindekiler Tablosu oluşturmak için başlıkları çıkarmak istersem, örümceğimin başlığın ne olduğunu bilmesi gerekir. Uygun unsurlar olmadan bunu yapamaz.

Son fakat en az değil, sadece divs ve spans kullanıyorsanız, bunları CSS ile şekillendirmekte zorlanacaksınız. CSS Seçicileri, belgenizin yapısı üzerinde çalışır ve bu çoğunlukla belirsiz bir yapıysa, CSS kuralları uygulanamaz. Nasıl karar veriyorsunuz div div divgerçekten atıfta table tr tdya body ul li? O zaman sınıflar ve kimlikleri eklemelisin, ama sonra tekerleği yeniden icat ediyorsun.

Ayrıca W3C’nin önerisine bakınız.

Uygun semantik elemanların kullanılması, yapının kullanıcı aracısı için uygun olduğundan emin olacaktır. Bu, farklı birimlerin içeriğin anlamını anlamadaki rolünü açıkça belirtmeyi içerir. Bir içerik parçasının paragraf, başlık, vurgulanan metin, tablo vb. Niteliği bu şekilde belirtilebilir. Bazı durumlarda, başlıklar ile alt başlıklar arasında veya bir tablonun hücreleri arasında olduğu gibi, içerik birimleri arasındaki ilişkilerin de belirtilmesi gerekir. Kullanıcı temsilcisi daha sonra yapıyı kullanıcı için algılanabilir hale getirebilir, örneğin farklı yapılar için farklı bir görsel sunum kullanarak veya işitsel sunumda farklı bir ses veya perde kullanarak.

Buradaki zaten iyi cevaplara eklemek için, daha önce bahsetmediğim bir şey ileriye dönük uyumluluktur . Özellik geliştikçe, belirli semantik elemanlar için ek işlevsellik tanımlanması mümkündür. Eğer kodunuz anlamsal olarak doğruysa, bu fonksiyonellikten hiç veya az bakım gerektirmeden faydalanabilecek.

Anlambilimi tam olarak takip eden çok fazla site görmemenizin bir nedeni, bunun için çok fazla bir iş vakası olmamasıdır. Satışları artırıyorsa (veya maruz kalma gibi ilgili bir kategori ise), anlamsal HTML yazmak için parası değer.

Etiketleri anlamsal olarak kullanmak için yapabileceğim en iyi durum, HTML'yi bir araçla tükettiğiniz veya kullandığınız zamandır. Örneğin, anlamsal etiketler kullanmak, başka birşeye stil ekleme veya kaldırma korkusu olmadan öğeleri doğrudan stillendirmenize olanak tanır. Ek olarak, bir kazıyıcı veya benzeri bir şey kullanarak HTML'yi ayrıştırmak zorunda kalırsanız, ihtiyacınız olanı bulmak için XPath ve DOM sorguları yazmak kolaylaştığından, iyi biçimlendirilmiş ve anlamsal HTML'yi kesinlikle takdir edersiniz.

Sınıfların anlamsal etiketlerin doğrudan yerine geçmediğini not etmeliyim. [error, information, warning]Farklı anlamlar ifade eden ve bu yüzden bağlı oldukları etikete dayalı stiller taşıyan yeniden kullanılabilir sınıflarım var.

Çünkü tarayıcılar ve web servisleri (bilgisayarlarla iletişim kuran AKA bilgisayarları) için faydalı veya gerekli olabilir. Eğer yazarsan:

<span class="time">Sep 16 at 2:17</span>

... web gezgini, tarih, zaman gibi şeyler olarak anlaşılmayacak. Yoksa tarih bilgisi olarak bulmak çok daha zor olacak.

Eğer kullanırsan:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... herhangi bir paletlinin malzeme bulması ve analiz etmesi daha kolay olacaktır.

Tarayıcıları söylediğimde, mutlaka arama motorlarını kastetmiyorum :)

Küçük bir web danışmanlık şirketi işletiyorum ve mevcut yaklaşımımız yeni HTML5 etiketlerini kullanmamak çünkü birçok faktörü dengelemeye çalışıyoruz. Bu durumda, denge kullanılabilirlik, kullanılabilirlik ve SEO arasındadır:

• SEO: Burada diğer cevaplar ne dedi - benim deneyimlerime dayanarak daha belirgin bir SEO stratejisi olmasına rağmen, yardımcı olma olasılığı ne kadar düşük olsa da, SEO için biraz yardımcı olabilir.

• Kullanılabilirlik # 1: HTML5 etiketlerinin bir tür kullanılabilirlik avantajı sağladığını varsaymak mantıklıdır. Görme engelli kullanıcılar için erişilebilir tarayıcılarının kendilerine sunduğu geri dönüşlerin, sağlayabileceğim her şeyden daha iyi olacağı kesin. Tipik bir kullanıcı için daha tartışmalı. Belki de tarayıcınızın sunduğu derli toplu bir medya oynatıcı kullanmak, kullanmanız, aksi takdirde oraya koyduğum daha az bilinen widget’tan daha kolaydır. Veya belki de tarayıcınızın varsayılanı zayıftır (Chrome Windows'un varsayılan MP3 çalarının düzenli aralıklarla çalışmasını durdurması gibi).

• Kullanılabilirlik # 2: Eski IE. Eski IE, bu etiketlerden herhangi birinin çalışması için sayfayı şişiren bir grup HTML5 şim gerektiriyor. Kullandığınız tüm HTML5 etiketleri arasında bir döngüde CreateElement () öğesini çağıran başlık etiketlerine bazı komut dosyaları eklemeniz gerekir. Kullandığınız etiketler için her sayfayı bir araya getirmeyecekseniz, bu her HTML5 etiketi anlamına gelir. Bu, her sayfada, satır içi, önbellekleme yapmamak anlamına gelir. Kötü haber: eski IE, Javascript'i çalıştırmak için en yavaş olanıdır, bu yüzden yüklenirken hoş bir lurch oluşturur. Daha sonra, desteklenmeyen tüm yeni öğelerin doğru şekilde işlenmesini sağlamak için yalnızca eski IE-yalnızca Javascript ve CSS'de sık sık Flash ile Flash kullanmanız gerekir. Eski IE kodunu yüklemeye karar vermeden önce algılama özelliğini kullanabilirsiniz, ancak sonra ' Eski IE kullanıcılarını, bu etiketlerin çalışmasını sağlayan tüm şeyleri istemeye başlamadan önce, bu özelliği algılamak için yeterli komut dosyası yüklenene kadar bekletilmesini sağlamak. Tarayıcı, eski IE öğelerini yalnızca bu tarayıcılara sahip kullanıcılara algılayabilir ve gönderebilir, ancak bu, platformunuza bağlı olarak önbelleğe almayı zor veya imkansız hale getirebilir. Farklı kullanıcılara farklı kodlar sunmak, test etmenin daha karmaşık olduğu anlamına gelir; Sadece belirli bir tarayıcıda gerçekleşen bir tanesine ne dersin? Ve sadece üretimde? Beni kaydet. Yani, muhtemelen o şişmeyi herkese göndereceksin. Farklı kullanıcılara farklı kodlar sunmak, test etmenin daha karmaşık olduğu anlamına gelir; Sadece belirli bir tarayıcıda gerçekleşen bir tanesine ne dersin? Ve sadece üretimde? Beni kaydet. Yani, muhtemelen o şişmeyi herkese göndereceksin. Farklı kullanıcılara farklı kodlar sunmak, test etmenin daha karmaşık olduğu anlamına gelir; Sadece belirli bir tarayıcıda gerçekleşen bir tanesine ne dersin? Ve sadece üretimde? Beni kaydet. Yani, muhtemelen o şişmeyi herkese göndereceksin.

IE8 ölünceye kadar, bu yeni HTML5 etiketlerindeki değer, getirdikleri performans sorunları için yeterince yüksek değil. Henüz ölüme bile yakın olan bir izleyici ile çalışmaya henüz başladık *, ama bir gün.

* En yeni ölçümlerimiz IE8’i en az IE8 ziyaretçisine sahip site için% 6’da ve IE8’i en çok ziyaret eden siteden% 24’ü gösterir. Uzakta, ölü olmaktan çok uzak.

Kısa cevap “pratikte hiçbir sebep yok.” “Anlamsal” işaretleme lehine verilen hemen hemen tüm argümanlar somut bir şeyden ziyade ne olabileceği ya da olması gerektiğinin düşünceleridir. Örneğin, arama motorlarına sık sık atıfta bulunulur, ancak en az yaklaşık timeveya outputveya umursadıklarına dair açık bir kanıt yoktur address.

Dolaylı olarak, öngörülebilir gelecekte umursayamayacaklarını anlayabiliriz. Schema.org sitesi, bazı önde gelen arama motorları tarafından açıkça tamamen farklı bir şey, yani mikro veriler (dayanan “anlamsal biçimlendirme” belirli bir yaklaşımı tercih itemscopeve ilgili nitelikler). Ve aslında bunu esas olarak büyük ticari siteler veya topluluk siteleri için yapıyorlar.

İkincisi, stil oluşturma amacıyla bile IE'nin eski sürümleri tarafından tanınmadığından, HTML5 yeniliklerinden daha iyi kullanmak spanveya divdaha iyi çalışır. Bu yüzden onları konteyner öğeleri olarak bile "çalışma" yapmak için bir numaraya ihtiyacınız var.

Bununla birlikte, tarayıcılar, yardımcı yazılımlar veya arama motorları tarafından kendilerine atanan gerçek anlamı olan bazı “anlamsal” öğeler vardır. h1Ana başlık için kullanmak , bu nedenlerden dolayı her zaman iyi bir uygulama olmuştur. Kullanılması labelform alanı etiketler için kullanılabilirlik ve erişilebilirlik gerçek bir etkisi vardır. Ve bunun gibi; bkz HTML pragmatik rehber: İlkeler .

HTML sadece bir kullanıcı dili değil, aynı zamanda bir veri yapılandırma dilidir. Heterojen makinelerin sunucu için gelen bilgi türünü tanımlamanın ortak bir yolunu bulmasına yardımcı olmak için tasarlanmıştır. Dolayısıyla çok farklı etiketler. HTML sayfaları veri yapıları olarak düşünülmelidir.