Alle som er involvert i webdesign eller -utvikling vil ha kommet over begrepet "semantisk" med henvisning til HTML5 og Internett generelt. Dette ofte problematiske begrepet er forståelig nok forvirrende for mange av oss, særlig siden det er en klar mangel på konsensus om sin definisjon i visse sammenhenger.

I denne artikkelen vil vi undersøke hva som gjør HTML5 mer semantisk enn sine forgjengere, og beskriver hva dette betyr for webutvikling nå og i fremtiden.

Semantikk handler om mening

Begrepet semantikk kommer fra lingvistikkens område som er dedikert til studiet av mening. Med naturlige språk som engelsk skiller vi mellom syntaks (eller grammatikk) og mening. Hvis du tenker på en setning, har betydningen å gjøre med hvordan folk tolker det:

"Mannen kastet datamaskinen gjennom vinduet."

Semantikk relaterer til aspektet av setningen som gjør det mulig for folk å lese det for å forstå meldingen som finnes i den. Semantikk er sammen med syntaks en stor del av det som letter kommunikasjon via språk. Når vi snakker om semantikk i forhold til HTML, snakker vi om kommunikasjon mellom dataprogrammer, ikke mennesker. Semantisk HTML er hovedsakelig rettet mot å forbedre omfanget av applikasjoner som kan behandle eller tolke webinnhold. For eksempel, vurder følgende utdrag fra websiden som inneholder noen av de lengre HTML-strukturer:

The man threw the computer through the window.

Elementene (og attributter) gir nettleserens informasjon om hvordan å presentere innholdet til brukeren. Parameterelementer vises som standard med hvite mellomrom over og under dem, bildelementer vises ved hjelp av bildefilen som er inkludert i src-attributten og så videre. Når nettleseren møter hvert av disse elementene, gjør det innholdet på en bestemt måte som i siste instans bestemmes av de brukte kodene.

HTML-strukturer har allerede mening

Det er viktig å forstå at HTML5 ikke introduserer semantikk til HTML for første gang. HTML hadde allerede et nivå av semantikk innebygd. De eksisterende HTML-strukturene er meningsfulle i varierende grad. Hvis du ser på dette kjente HTML-elementet som følger med i utsnittet ovenfor, ser du hva jeg mener:

Selv om det forkortes, betyr navnet på elementet img noe som betyr noe om innholdet i taggen, det vil si at det er et bilde. På denne måten kan du tenke på det semantiske aspektet av HTML som ligner på metadata, fordi elementetiketten og attributtnavnet beskriver dataene (dataene i en nettside er elementet og attributtinnholdet).

Husk da vi begynte å skille innhold fra stil?

Noen av strukturer vi har brukt i HTML, forteller nettleseren hvordan du kan stile innholdsobjektene på en side. Etter hvert som tiden har gått, har vi blitt oppfordret til å skille formateringen av en side fra innholdet.

For eksempel byttet vi i taggen med em, som er mer meningsfylt og forteller ikke nettleseren nøyaktig hvordan teksten skal vises inne i elementet. Formålet med å bruke em i stedet for jeg er å formidle informasjon om innholdet på innholdsenheten, i stedet for informasjon om styling den. Em selvfølgelig påvirker stilen, som er den viktigste grunnen til at vi bruker den, men det etterlater detaljene i stilen opp til nettleseren og / eller CSS-koden, som er idealt skilt fra sidemarkeringen.

Semantisk HTML5 er et større skritt i denne prosessen. Det endelige målet er å skape et system der applikasjoner har tilgang til et større nivå av mening - dette er ikke AI, men det handler bare om å inkludere beskrivende informasjon om dataposter i kodestrukturene som modellerer dem.

Er dette ikke lik XML?

Hvis du har brukt XML tidligere, vil du ha noen kjennskap til konseptene i semantisk oppslag. For eksempel, når du designer et XML-dokument (eller skjema) for et datasett, velger du elementer og attributter til modellelementer i dataene. Ideelt sett definerer elementet og attributtnavnene dataelementene på en meningsfull måte:

Jim Smith23 November 2012

Utvikleren her har valgt navn som intuitivt beskriver dataverdiene som blir modellert. Med HTML5 kan du ikke velge dine egne elementer, da det ikke er fritt uttrekkbart. De strukturer som er valgt for det, har bare mer inneboende betydning i forhold til tidligere versjoner.

Forresten, det er forskjellige typer betydninger

Vi har snakket om mening, men faktisk finnes det forskjellige måter der et element eller et annet kodeutdrag kan være meningsfylt.

Img-taggen er meningsfull fordi den forteller noe om elementinnholdet, og beskriver hva det er.

Noen av de nye HTML5-elementene, for eksempel topptekst og bunntekst, er meningsfulle fordi de viser noe om elementets rolle eller formål i den samlede strukturen til en side.

Hvordan relaterer alt dette til HTML5-kode da?

Så hva innebærer dette forbedrede meningsfulle aspektet av HTML5? I hovedsak HTML5 har noen nye elementer som du kan inkludere mer semantisk informasjon i sidemarkeringen. Det er en mengde nye elementer, bare noen få som vi vil se på her. Header-taggen angir informasjon om innholdet til elementet og om dets rolle innenfor sidestrukturen:

Man in Window Outburst

Overskriftselementet kan inneholde andre elementer og har en tendens til å inkludere minst ett overskriftselement. Footer-taggen er lik, med taggen som igjen uttrykker noe meningsfullt om innholdet til elementet og dets forhold til resten av siden:

Nav- taggen beskriver formålet med en sideseksjon, det vil si at den inneholder navigasjonskoblinger:

Delelementet inneholder vanligvis en gruppe med elementer på samme tema, ofte sammen med en header. Delelementet har en ganske abstrakt betydning, men det er meningsfullt likevel:

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

Artikkelelementet er likt, brukes til å definere et objekt som er selvstendig:

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

En side- tag angir rollen til et element i forhold til konteksten på siden, som i den følgende utvidede versjonen av artikkelen koden ovenfor:

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

Dette er bare noen få av de nye HTML5-elementene som tilbyr semantiske forbedringer, andre inkluderer medie- og brukerinngangselementer samt tilleggsattributter. Inkluderingen av mikrodata i HTML5 gir også økt mulighet for å inkludere semantisk informasjon på websider og applikasjoner. Som du kan se, er noen av disse nye elementene meningsfulle både når det gjelder innhold og struktur.

Tenk på noen av de eldre kodene (hvorav mange er fortsatt), for eksempel div. Div-elementet er rett og slett en del av en side - tagnavnet forteller oss absolutt ingenting om innholdet i elementet eller dets rolle innenfor siden. Med andre ord gir taggen svært liten betydning. Mange av de langvarige kodene overfører enten nesten ingen mening i det hele tatt, eller i noen tilfeller generisk, løst definert betydning. Hvert element på en nettside var inneholdt i ett av et sett med svært generelle elementkategorier. Nøkkelen til å gjøre noe meningsfylt er å være spesifikk. De nye HTML5-kodene tillater oss å definere webinnhold ved hjelp av mer spesifikke vilkår.

Var du allerede å legge til mening i din oppslag?

Hvis du har opprettet nettsider i rimelig tid, kan noen av de nye HTML5-elementene ringe noen klokker for deg. I virkeligheten bygde utviklere allerede et nivå av mening inn i deres sider ved hjelp av elementattributtene, spesielt klasse og ID. For eksempel, hvis du noen gang har gitt et element en klasse eller ID-attributt for "footer" eller "header", er du absolutt ikke alene. Med HTML5 blir denne betydningen formidlet i selve oppmerkningen i stedet for i attributtverdier. Hvis du brukte disse attributter for å implementere bestemte stylingsegenskaper, var du effektivt å gjøre noe manuelt som er innebygd i HTML5 ut av esken - og med semantiske elementer er det flere fordeler ...

Hvorfor gjør vi alt dette?

OK, dette er alt veldig bra, men du vil bli tilgitt for å spørre hvorfor vi skal til alle disse problemene for noe som virker vesentlig konsept / akademisk. Vel, du kan være trygg på at det er gode grunner til å flytte i en mer semantisk retning. Som vi har sett, tillater HTML5 semantikk oss å opprette merkingskode som beskriver innholdsobjekter. Dette beskrivende aspektet av koden tillater andre programmer å effektivisere bruken av innholdet, med forskjellige applikasjoner:

• Søkbarhet er satt til å bli forvandlet av fremveksten av web semantikk. Semantisk merking gjør innhold / data mer søkbare. websider er selvfølgelig ikke bare sett i nettleseren, de blir også behandlet av andre programmer som søkemotor roboter. Siden semantisk markup er utformet for å la applikasjoner tolke websider på mer meningsfulle måter, bør dette i siste instans forbedre kvaliteten på søke- / spørringsfunksjoner med en betydelig mengde. I Tim Berners-Lees ofte siterte "drøm" for Internett, ville datamaskiner kunne analysere alle dataene på nettet - det kan være langt unna, men den semantiske drivkraften til HTML5 er motivert av den typen langsiktige mål .
• Tilgjengelighet er en av de viktigste fordelene med semantisk oppslag. Tilgjengelighetsverktøy kan ha stor nytte av mer meningsfylt tilgang til webinnhold. Slike verktøy inkluderer tilleggsprogrammer for brukere med begrenset syn, hørsel, lærevansker og så videre. Semantisk markering gjør det mer mulig for et program å behandle webinnhold og resultatet for å formidle den opprinnelige meldingen til brukeren på en måte som passer deres behov. Dette konseptet strekker seg utover tilgjengelighet og inn i rigene til enhetsfleksibilitet, gjennom teknikker som responsiv design. Resultatet er en mer inkluderende tilnærming til å levere webinnhold.
• Konsistens bør være en ekte velgjørende for semantisk HTML5. Semantisk merking forbedrer konsistensen, da innholdsartikler er mer logisk tilordnede til bestemte elementtyper. Dette er i kontrast til de eldre modellene, hvor elementer ofte ofte kunne være logisk inneholdt i en rekke forskjellige elementtyper - å velge en var ikke en indikator på innholdet eller dets rolle innenfor siden, det var bare en refleksjon av utviklerens valg. Med semantisk merking gjør det mer spesifikke nivået av betydning disse valgene mindre gratis, men resultatene er iboende mer pålitelige når det gjelder tolkning enten av nettleseren eller andre applikasjoner.

Utviklere driver fremdriften av webteknologier

Da jeg var på uni (for mange år siden) husker jeg en foreleser som forteller oss at fagområdet forskning skulle bli revolusjonert av fremskritt i søk. Han snakket om den semantiske weben - unødvendig å si at det ikke har skjedd ennå. Å ta noen form for fokusert ny retning med noe så variert og uberegnelig som World Wide Web, vil alltid være en vanskelig oppgave. Men ved å komme om bord med ideen om semantisk markering minst, kan vi som utviklere handle for å påvirke bevegelsen mot en fremtidig web som er mer tilgjengelig, søkbar og konsistent for alle brukere.

Bruker du HTML5s semantiske elementer? Fokuserer på semantikk et produkt av høyere kvalitet? Gi oss beskjed om hva du synes i kommentarene.

Utvalgt bilde / miniatyrbilde, bruker språkbilde via Shutterstock.