Web tasarımında veya geliştirmede yer alan herkes, HTML5 ve genel olarak Web’e atıfla “semantik” terimini kullanmış olacaktır. Bu sık sık sorunlu terim, özellikle de belirli bağlamlarda tanımında belirgin bir fikir birliği olmaması nedeniyle, çoğumuz için anlaşılır bir şekilde kafa karıştırıcıdır.

Bu makalede, HTML5'i seleflerinden daha semantik yapan şeyleri keşfedeceğiz, bunun şimdi ve gelecekte Web geliştirme için ne anlama geldiğini özetleyeceğiz.

Anlamsal anlam ile ilgilidir

Anlam bilgisi kavramı, anlam çalışmalarına adanmış dilbilim alanından gelmektedir. İngilizce gibi doğal dillerle, sözdizimi (veya dilbilgisi) ve anlamını birbirinden ayırırız. Bir cümle düşünürseniz, anlam insanların nasıl yorumladığıyla ilgilidir:

“Adam bilgisayarı pencereden attı.”

Semantikler, cümlenin insanın onu içinde yer alan mesajı anlamasını sağlayan bir yönü ile ilgilidir. Sözdizimiyle birlikte, semantikler dil aracılığıyla iletişimi kolaylaştıran şeylerin büyük bir kısmıdır. HTML ile ilgili semantiklerden söz ettiğimizde, insanlar değil, bilgisayar programları arasındaki iletişimden söz ediyoruz. Anlamsal HTML, temel olarak, uygulamaların Web içeriğini işleyebildiği veya yorumlayabileceği kapsamı geliştirmeyi amaçlamaktadır. Örneğin, daha uzun süren HTML yapılarının bazılarını içeren aşağıdaki Web sayfası alıntılarını göz önünde bulundurun:

The man threw the computer through the window.

Öğeler (ve öznitelikler), içeriğin kullanıcıya nasıl sunulacağı hakkında tarayıcı bilgilerini verir. Paragraf öğeleri varsayılan olarak üst ve altlarında beyaz boşluklarla görüntülenecektir, resim öğeleri src özniteliğinde yer alan resim dosyası kullanılarak görüntülenir. Tarayıcı, bu öğelerin her biriyle karşılaştığında, içeriği, kullanılan etiketler tarafından nihai olarak belirlenen belirli bir şekilde oluşturur.

HTML yapıları zaten anlamlıdır

HTML5'in ilk defa HTML’de semantiği getirmediğini anlamak önemlidir. HTML zaten yerleşik bir semantik seviyesine sahipti. Mevcut HTML yapıları değişen derecelerde anlamlıdır. Bu alıntılanmış HTML öğesini yukarıdaki alıntıya dahil ederseniz, ne demek istediğimi görürsünüz:

Kısaltılmış olmasına rağmen, img öğesinin adı etiketin içeriği hakkında anlamlı bir şey ifade eder, yani bir görüntüdür. Bu şekilde, HTML'nin semantik yönünü meta verilere benzer olarak düşünebilirsiniz, çünkü öğe etiketi ve öznitelik isimleri verileri tanımlar (bir web sayfasındaki veri ve özellik içeriği olan veriler).

İçeriği stilden ayırmaya başladığımızı hatırlıyor musunuz?

HTML'de kullandığımız bazı yapılar, tarayıcıya bir sayfadaki içerik öğelerinin nasıl biçimlendirileceğini bildirir. Zaman geçtikçe, bir sayfanın formatını içerikten ayırmaya teşvik edildi.

Örneğin, i etiketini, daha anlamlı olan ve tarayıcıya öğenin içindeki metni tam olarak nasıl göstereceğine söylemediğimiz em ile değiştirdik. Ben'den ziyade bunları kullanmanın amacı, onu şekillendirme hakkında bilgi yerine içerik öğesinin doğası hakkında bilgi aktarmaktır. Elbette, onu kullandığımız ana neden olan stili etkiler, ancak stilin ayrıntılarını tarayıcıya ve / veya sayfa işaretlemesinden ideal olarak ayrılan CSS koduna kadar bırakır.

Semantik HTML5 bu süreçte daha büyük bir adımdır. Nihai amaç, uygulamaların daha büyük bir anlam düzeyine erişebildiği bir sistem yaratmaktır - bu, AI değil, sadece, bunları modelleyen kod yapıları içindeki veri öğeleri hakkında açıklayıcı bilgiler dahil etmektir.

XML'e benzer değil mi?

Geçmişte XML kullandıysanız, semantik işaretlemede bazı kavramlara aşina olacaksınız. Örneğin, bir veri kümesi için bir XML belgesi (veya şema) tasarladığınızda, veri içindeki öğeleri modellemek için öğeler ve özellikler seçersiniz. İdeal olarak, eleman ve özellik isimleri veri öğelerini anlamlı bir şekilde tanımlar:

Jim Smith23 November 2012

Geliştirici, modellenen veri değerlerini sezgisel olarak açıklayan isimleri seçti. HTML5 ile kendi elemanlarınızı seçemezsiniz, çünkü serbestçe genişletilemez. Bunun için seçilen yapılar, önceki sürümlerle karşılaştırıldığında daha doğal anlamlara sahiptir.

Bu arada, farklı anlamlar vardır

Anlam hakkında konuştuk ama aslında bir elemanın veya başka bir kodun alınmasının anlamlı olabileceği farklı yollar var.

İmg etiketi, eleman içeriği hakkında ne olduğunu açıklayan bir şey anlatması bakımından anlamlıdır.

Üstbilgi ve altbilgi gibi yeni HTML5 öğelerinin bazıları, bir sayfanın genel yapısı içindeki öğenin rolü veya amacı hakkında bir şeyler ifade etmeleri bakımından anlamlıdır.

Bütün bunlar HTML5 koduyla nasıl ilgilidir?

Peki, bu HTML5'in bu anlamlı yönünü neyi gerektirir? Aslında HTML5, sayfa işaretlemenize daha fazla anlamsal bilgi ekleyebileceğiniz bazı yeni öğelere sahiptir. Yeni elemanların bir yükü var, bunlardan sadece birkaçı buraya bakacağız. Üstbilgi etiketi, öğenin içeriği ve sayfa yapısı içindeki rolüyle ilgili bilgileri gösterir:

Man in Window Outburst

Başlık elemanı, başka elemanlar içerebilir ve en az bir başlık öğesini içerme eğilimindedir. Altbilgi etiketi, öğenin içeriği ve sayfanın geri kalanıyla olan ilişkisi hakkında anlamlı bir şey ifade eden etiketle benzerdir:

Nav etiketi, bir sayfa bölümünün amacını, yani gezinme bağlantıları içerdiğini açıklar:

Bölüm öğesi genellikle, genellikle bir başlık ile birlikte, aynı temadaki öğeler grubunu içerir. Bölüm elemanı oldukça soyut bir anlama sahiptir, ancak yine de anlamlıdır:

What happened
Police officers apprehended the man at 3.30pm...

Makale öğesi, kendi kendine yeten bir öğeyi tanımlamak için kullanılır:

The Law
The law on throwing items through windows is very clear...

Bir kenara göre etiket, yukarıdaki öğe kodunun aşağıdaki genişletilmiş versiyonunda olduğu gibi, bir öğenin sayfadaki içeriğine göre rolünü gösterir:

The Law
The law on throwing items through windows is very clear...

Bunlar, semantik geliştirmeler sunan yeni HTML5 öğelerinden sadece birkaçıdır, diğerleri medya ve kullanıcı girdi öğelerinin yanı sıra ek özellikler içerir. HTML5'te mikro verilerin eklenmesi, Web sayfalarında ve uygulamalarda anlamsal bilgilerin dahil edilmesi için daha fazla kapsam sağlar. Gördüğünüz gibi, bu yeni öğelerden bazıları hem içerik hem de yapı bakımından anlamlıdır.

Div gibi eski etiketlerden bazılarını (birçoğu hala etrafta) düşünün. Div öğesi, bir sayfanın basit bir parçasıdır - etiket adı, öğenin içeriği veya sayfa içindeki rolü hakkında kesinlikle hiçbir şey söylemez. Başka bir deyişle, etiket çok az anlam taşır. Uzun süredir devam eden etiketlerin çoğu ya hiç anlam ifade etmiyor, ya da bazı durumlarda jenerik, gevşek olarak tanımlanmış bir anlam ifade ediyor. Bir Web sayfasındaki her bir öğe, çok genel eleman kategorilerinden birinde yer almıştır. Anlamlı bir şey yapmanın anahtarı, spesifik olmaktır. Yeni HTML5 etiketleri, daha spesifik terimler kullanarak Web içeriğini tanımlamamıza izin veriyor.

İşaretlemeye zaten anlam kattın mı?

Web sayfalarını makul bir süre için oluşturuyorsanız, yeni HTML5 öğelerinin bazıları sizin için bazı çanlar çalabilir. Gerçekte, geliştiriciler, özellikle sınıf ve ID olmak üzere element niteliklerini kullanarak sayfalarına bir anlam düzeyi oluşturuyorlardı. Örneğin, “footer” veya “header” için bir sınıf veya ID özniteliği öğesi verdiyseniz, kesinlikle yalnız değilsiniz. HTML5 ile, bu anlam özellik değerlerinden ziyade işaretlemenin kendisinde taşınır. Belirli nitelik özelliklerini uygulamak için bu öznitelikleri kullandıysanız, HTML5'e yerleştirilmiş el ile etkili bir şekilde el ile yaptığınız bir şey yapıyorsunuz - ve semantik öğelerle birlikte ek avantajlar var…

Neden bunları yapıyoruz?

Tamam, hepsi bu kadar iyi ama neden tüm bu sorunlara neden aslında kavramsal / akademik gibi görünen bir şey için gittiğimizi sorduğun için affedilirdin. Eh, daha semantik bir yönde ilerlemek için iyi nedenler olduğundan emin olabilirsiniz. Gördüğümüz gibi, HTML5 semantikleri, içerik öğelerini tanımlayan işaretleme kodu oluşturmamıza olanak tanır. Kodun bu açıklayıcı yönü, diğer programların, çeşitli uygulamalarla, içeriğin daha verimli kullanılmasını sağlar:

• Aranabilirlik , Web semantiklerinin ilerlemesiyle dönüştürülecek şekilde ayarlanmıştır. Semantik işaretleme, içeriği / verileri daha fazla aranabilir hale getirir. Web sayfaları elbette sadece web tarayıcısında görüntülenmez, ayrıca arama motoru robotları gibi diğer programlar tarafından da işlenir. Anlamsal işaretleme, uygulamaların web sayfalarını daha anlamlı bir şekilde yorumlamasını sağlamak için tasarlandığından, bu sonuçta arama / sorgu işlevlerinin kalitesini önemli ölçüde artırmalıdır. Tim Berners-Lee'nin Web için “rüya” yazdığı çoğu zaman, bilgisayarlar tüm verileri çevrimiçi olarak analiz edebilirdi - ki bu çok uzun bir yol olabilir, ancak HTML5'in semantik çekişi bu uzun vadeli hedefle motive olur. .
• Erişilebilirlik semantik işaretlemenin en önemli avantajlarından biridir. Erişilebilirlik araçları, Web içeriğine daha anlamlı erişimden büyük ölçüde yararlanabilir. Bu araçlar, sınırlı görme, işitme, öğrenme güçlüğü ve benzeri gibi kullanıcılar için tarayıcı eklentileri içerir. Semantik işaretleme, bir uygulamanın web içeriğini işleyebilmesini ve orijinal mesajı kullanıcının ihtiyaçlarına uygun şekilde iletmesini sağlar. Bu kavram, duyarlı tasarım gibi teknikler aracılığıyla erişilebilirliğin ve cihaz esnekliği alanlarına uzanır. Sonuç, web içeriği sunmaya daha kapsayıcı bir yaklaşımdır.
• Tutarlılık , semantik HTML5'in gerçek bir faydacısı olmalıdır. İçerik öğeleri, belirli öğe türlerine daha mantıksal olarak atanabileceğinden, anlamsal biçimlendirme tutarlılığı artırır. Bu, öğelerin genellikle bir dizi farklı öğe türünde mantıksal olarak yer alabildiği eski modellerin tersidir - birinin seçilmesi, içeriğin niteliğinin veya sayfa içindeki rolünün bir göstergesi değildi. sadece geliştiricinin seçiminin bir yansımasıydı. Anlamsal işaretleme ile, daha spesifik anlam seviyesi, bu seçimleri daha az özgür kılar ancak sonuçlar tarayıcı ya da diğer uygulamalar tarafından yorumlandığında, daha güvenilirdir.

Geliştiriciler Web teknolojilerinin ilerlemesini yönlendiriyor

Üniversitedeyken (birkaç yıl önce) bir öğretim görevlisinin, akademik araştırma alanının aramadaki gelişmeler tarafından devrim yaratacağını söylerken hatırlıyorum. Semantic Web'den bahsediyordu - henüz gerçekleşmediğini söylemek gereksiz. World Wide Web'in her zaman zorlu bir görev olarak her türlü odaklanmış yeni bir yönü farklı ve değişken bir şeyle ele almak. Bununla birlikte, en azından semantik işaretleme fikrine dayanarak, geliştiriciler olarak, tüm kullanıcılar için daha erişilebilir, aranabilir ve tutarlı olan gelecekteki bir Web'e doğru hareketi etkilemek için hareket edebiliriz.

HTML5'in semantik elemanlarını kullanıyor musunuz? Anlamlara odaklanmak daha kaliteli bir ürün üretiyor mu? Yorumlarda ne düşündüğünüzü bize bildirin.

Öne çıkan görsel / küçük resim, dil görüntüsünü kullanır Shutterstock üzerinden.