Alla som är involverade i webbdesign eller utveckling kommer att ha stött på termen "semantisk" med hänvisning till HTML5 och webben i allmänhet. Detta ofta problematiska begrepp är förståeligt förvirrande för många av oss, särskilt eftersom det finns en tydlig brist på konsensus om dess definition i vissa sammanhang.

I den här artikeln kommer vi att undersöka vad som gör HTML5 mer semantisk än dess föregångare, och beskriva vad det innebär för webbutveckling nu och i framtiden.

Semantik handlar om mening

Semantikbegreppet kommer från lingvistikens område som är avsedd för studie av mening. Med naturliga språk som engelska skiljer vi mellan syntax (eller grammatik) och mening. Om du tänker på en mening betyder betydelsen hur folk tolkar det:

"Mannen kastade datorn genom fönstret."

Semantiken avser aspekten av meningen som låter människor läsa den för att förstå meddelandet som finns i det. Semantiken är tillsammans med syntaxen en stor del av det som underlättar kommunikationen via språk. När vi pratar om semantik i förhållande till HTML talar vi om kommunikation mellan datorprogram, inte människor. Semantisk HTML är huvudsakligen inriktad på att förbättra omfattningen av applikationer som kan bearbeta eller tolka webbinnehåll. Tänk på följande webbutdrag som innehåller några av de längre HTML-strukturerna:

The man threw the computer through the window.

Elementen (och attributen) ger webbläsarens information om hur man presenterar innehållet för användaren. Styckelement visas som standard med whitespace över och under dem, bildelement visas med hjälp av bildfilen som ingår i src-attributet och så vidare. När webbläsaren möter varje av dessa element gör det innehållet på ett visst sätt som bestäms av de taggar som används.

HTML-strukturer har redan betydelse

Det är viktigt att förstå att HTML5 inte introducerar semantik till HTML för första gången. HTML hade redan en nivå av semantik inbyggd. De befintliga HTML-strukturerna är meningsfulla i varierande grad. Om du tittar på det här kända HTML-elementet som ingår i ovanstående utdrag ser du vad jag menar:

Även om det förkortas, indikerar elementet img något meningsfullt om innehållet i taggen, det vill säga att det är en bild. På så sätt kan du tänka på den semantiska aspekten av HTML som liknar metadata, eftersom elementetiketten och attributnamnen beskriver data (data på en webbsida är elementet och attributinnehållet).

Kom ihåg när vi började skilja innehållet från stil?

Några av de strukturer som vi har använt i HTML berätta för webbläsaren hur man stilar innehållsobjekten på en sida. När tiden har gått, har vi uppmanats att skilja formateringen av en sida från innehållet.

Till exempel ersatte vi taggen med em, vilket är mer meningsfullt och berättar inte webbläsaren exakt hur texten ska visas inuti elementet. Syftet med att använda em istället för jag är att förmedla information om innehållet i innehållet snarare än information om styling den. Ämnet påverkar naturligtvis stilen, vilket är den främsta anledningen till att vi använder det, men det lämnar detaljerna i stilen upp till webbläsaren och / eller CSS-koden idealiskt åtskild från sidmarkeringen.

Semantisk HTML5 är ett större steg i denna process. Det yttersta målet är att skapa ett system där applikationer har tillgång till en större meningsnivå - det här är inte AI men det handlar bara om att inkludera beskrivande information om dataposter inom kodstrukturerna som modellerar dem.

Är det inte liknande som XML?

Om du har använt XML tidigare har du förtrogenhet med begreppen i semantisk markup. När du till exempel designar ett XML-dokument (eller schema) för en dataset väljer du element och attribut för modellobjekt i data. Helst definierar elementet och attributnamnen dataelementen på ett meningsfullt sätt:

Jim Smith23 November 2012

Utvecklaren här har valt namn som intuitivt beskriver de datavärden som modelleras. Med HTML5 kan du inte välja dina egna element, eftersom det inte är fritt utdragbart. De strukturer som valts ut för det har helt enkelt mer inneboende betydelse jämfört med tidigare versioner.

Förresten, det finns olika typer av betydelse

Vi har pratat om mening men i själva verket finns det olika sätt på vilka ett element eller annat kodutdrag kan vara meningsfullt.

Img-taggen är meningsfull eftersom den berättar något om elementinnehållet och beskriver vad det är.

Några av de nya HTML5-elementen, som sidhuvud och sidfot, är meningsfulla eftersom de anger något om elementets roll eller syfte i den totala strukturen på en sida.

Hur hänför sig allt detta till HTML5-kod då?

Så vad innebär den här förbättrade meningsfulla aspekten av HTML5? I grunden HTML5 har några nya element som du kan inkludera mer semantisk information i din sidmarkering. Det finns en massa nya element, bara några av vilka vi kommer att titta på här. Sidhuvudet anger information om elementets innehåll och om dess roll inom sidstrukturen:

Man in Window Outburst

Rubrikelementet kan innehålla andra element och tenderar att innehålla minst ett rubrikelement. Footer-taggen är liknande, med taggen igen som uttrycker något meningsfullt om innehållet i elementet och dess relation till resten av sidan:

Nav- taggen beskriver syftet med en sidavdelning, det vill säga att den innehåller navigeringslänkar:

Sektionselementet innehåller typiskt en grupp av objekt på samma tema, ofta tillsammans med en rubrik. Sektionselementet har en ganska abstrakt betydelse, men det är ändå meningsfullt:

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

Artikelelementet är likartat, används för att definiera ett objekt som är fristående:

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

En sidospår indikerar elementets roll i förhållande till dess sammanhang inom sidan, som i följande utökade version av artikeln ovan:

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

Dessa är bara några av de nya HTML5-elementen som erbjuder semantiska förbättringar, andra inkluderar medie- och användarinmatningselement samt ytterligare attribut. Inkluderingen av mikrodata i HTML5 ger också ökat utrymme för att inkludera semantisk information på webbsidor och applikationer. Som du kan se är några av dessa nya element meningsfulla både vad gäller innehåll och struktur.

Tänk på några av de äldre taggarna (många av dem är fortfarande kvar), som div. Div-elementet är helt enkelt en bit av en sida - namnet på namnet berättar absolut ingenting om elementets innehåll eller dess roll inom sidan. Med andra ord, taggen ger mycket liten mening. Massor av de långvariga taggarna förmedlar antingen nästan ingen mening alls eller i vissa fall generisk, löst definierad betydelse. Varje objekt på en webbsida fanns i en av en uppsättning av mycket generella elementskategorier. Nyckeln till att göra något meningsfullt är att vara specifik. De nya HTML5-taggarna tillåter oss att definiera webbinnehåll med hjälp av mer specifika termer.

Har du redan lagt till mening till din markering?

Om du har skapat webbsidor i rimlig tid kan vissa av de nya HTML5-elementen ringa några klockor till dig. I verkligheten byggde utvecklare redan en meningsnivå i sina sidor med hjälp av elementattributen, särskilt klass och ID. Till exempel, om du någonsin har gett ett element ett klass eller ID-attribut för "footer" eller "header" är du säkert inte ensam. Med HTML5 förmedlas denna mening i själva uppmärkningen snarare än i attributvärden. Om du använde dessa attribut för att implementera särskilda stylingegenskaper, gjorde du effektivt något manuellt som är inbyggt i HTML5 ur lådan - och med semantiska element finns det ytterligare fördelar ...

Varför gör vi allt detta?

OK, det här är mycket bra, men du skulle bli förlåtad för att fråga varför vi kommer till allt detta problem för något som verkar väsentligen begreppsmässigt / akademiskt. Tja, du kan vara säker på att det finns goda skäl att flytta i en mer semantisk riktning. Som vi har sett tillåter HTML5 semantik oss att skapa kodkod som beskriver innehållsobjekt. Denna beskrivande aspekt av koden tillåter andra program att effektivisera användningen av innehållet, med olika tillämpningar:

• Sökbarhet sätts att transformeras av förskott av webbsemantik. Semantisk markering gör innehåll / data mer sökbar. webbsidor ser naturligtvis inte bara i webbläsaren, de bearbetas också av andra program som sökrobotar. Eftersom semantisk markering är utformad för att låta applikationer tolka webbsidor på mer meningsfulla sätt, bör detta i slutändan förbättra kvaliteten på sök- / sökfunktionerna med en betydande del. I Tim Berners-Lee ofta citerade "dröm" för webben skulle datorer kunna analysera alla data online - det kan vara långt ifrån, men den semantiska drivkraften i HTML5 motiveras av den typen av långsiktigt mål .
• Tillgänglighet är en av de viktigaste fördelarna med semantisk markup. Tillgänglighetsverktyg kan dra nytta av mer meningsfull tillgång till webbinnehåll. Sådana verktyg inkluderar webbtillägg för användare med begränsad syn, hörsel, inlärningssvårigheter och så vidare. Semantisk markering gör det mer möjligt för en applikation att bearbeta webbinnehåll och resultatet att kommunicera det ursprungliga meddelandet till användaren på ett sätt som passar deras behov. Detta koncept sträcker sig bortom tillgänglighet och in i riken av enhetsflexibilitet, genom tekniker som responsiv design. Resultatet är ett mer inkluderat tillvägagångssätt för att leverera webbinnehåll.
• Konsistens bör vara en verklig välgörare för semantisk HTML5. Semantisk markering förbättrar konsistens, eftersom innehållsposter är mer logiskt tilldelade till vissa elementtyper. Detta stämmer i motsats till de äldre modellerna, där objekt ofta kan vara lika logiskt i någon av olika elementstyper. Att välja en var inte en indikator på innehållet eller dess roll inom sidan, det var bara en återspegling av utvecklarens val. Med semantisk uppmärkning gör den mer specifika meningsnivån dessa val mindre gratis men resultaten är i sig mer tillförlitliga när det gäller tolkning antingen av webbläsaren eller andra applikationer.

Utvecklare driver utvecklingen av webbteknik

När jag var på uni (för några år sedan) kommer jag ihåg en föreläsare som berättade att området för akademisk forskning skulle revolutioneras av framsteg inom sökandet. Han pratade om den semantiska webben - det behöver inte sägas att det inte har hänt just nu. Att ta någon form av fokuserad ny riktning med något så olikt och oregelbundet som World Wide Web kommer alltid att vara en svår uppgift. Men genom att komma ombord med ideen om semantisk markering åtminstone kan vi som utvecklare agera för att påverka rörelsen mot en framtida webb som är mer tillgänglig, sökbar och konsekvent för alla användare.

Använder du HTML5s semantiska element? Ger fokus på semantik en produkt av högre kvalitet? Låt oss veta vad du tycker i kommentarerna.

Utvalda bild / miniatyrbild, använder språkbild via Shutterstock.