Enhver, der er involveret i webdesign eller -udvikling, vil være kommet på tværs af begrebet "semantisk" med henvisning til HTML5 og web generelt. Dette ofte problematiske udtryk er forståeligt nok forvirrende for mange af os, især da der er en klar mangel på enighed om dens definition i visse sammenhænge.

I denne artikel vil vi undersøge, hvad der gør HTML5 mere semantisk end sine forgængere, og skitsere hvad det betyder for webudvikling nu og i fremtiden.

Semantik handler om mening

Semantikbegrebet kommer fra lingvistikens område, der er dedikeret til undersøgelsen af ​​mening. Med naturlige sprog som engelsk skelner vi mellem syntaks (eller grammatik) og betydning. Hvis du tænker på en sætning, betyder det meningen med, hvordan folk fortolker det:

"Manden kastede computeren gennem vinduet."

Semantik vedrører aspektet af sætningen, der gør det muligt for folk at læse det for at forstå meddelelsen indeholdt i den. Semantik er sammen med syntaksen en stor del af det, der letter kommunikationen via sprog. Når vi taler om semantik i forhold til HTML, taler vi om kommunikation mellem computerprogrammer og ikke mennesker. Semantisk HTML er primært rettet mod at forbedre, i hvilket omfang applikationer kan behandle eller fortolke webindhold. For eksempel overvej følgende websideuddrag, der indeholder nogle af de længerevarende HTML-strukturer:

The man threw the computer through the window.

Elementerne (og attributterne) giver browseren information om, hvordan man præsenterer indholdet for brugeren. Afsnitelementer vises som standard med hvide rum over og under dem, billedelementer vises med den billedfil, der er inkluderet i src-attributten og så videre. Når browseren møder hvert af disse elementer, gør det indholdet på en bestemt måde, der i sidste ende bestemmes af de anvendte tags.

HTML-strukturer har allerede mening

Det er vigtigt at forstå, at HTML5 ikke introducerer semantik til HTML for første gang. HTML havde allerede et niveau af semantik indbygget. De eksisterende HTML-strukturer er meningsfulde i varierende grad. Hvis du kigger på dette kendte HTML-element som medtaget i ovenstående uddrag, kan du se, hvad jeg mener:

Selvom det forkortes, angiver elementets element img noget meningsfuldt om indholdet af mærket, dvs. at det er et billede. På denne måde kan du tænke på det semantiske aspekt af HTML som ligner metadata, idet elementetiketten og attributtenavne beskriver dataene (dataene på en webside er elementet og attributten indhold).

Husk da vi begyndte at adskille indhold fra stil?

Nogle af de strukturer, vi har brugt i HTML, fortæller browseren, hvordan man stiler indholdsemnerne på en side. Efterhånden som tiden er gået, er vi blevet opfordret til at adskille formateringen af ​​en side fra dens indhold.

For eksempel erstattede vi tagget med em, hvilket er mere meningsfuldt og fortæller ikke browseren, hvordan man viser teksten inde i elementet. Formålet med at bruge em frem for jeg er at formidle information om indholdet af indholdsenheden, snarere end information om styling det. Emmen har selvfølgelig indflydelse på stilen, hvilket er hovedårsagen til, at vi bruger det, men det efterlader detaljerne i stilen op til browseren og / eller CSS-koden, der er ideelt adskilt fra siden markering.

Semantisk HTML5 er et større trin i denne proces. Det endelige mål er at skabe et system, hvor applikationer har adgang til et større niveau af mening - dette er ikke AI, men det handler bare om at inkludere beskrivende oplysninger om dataposter inden for de kodestrukturer, der modellerer dem.

Er det ikke ligner XML?

Hvis du tidligere har brugt XML, har du en vis fortrolighed med begreberne semantisk markup. Når du f.eks. Designer et XML-dokument (eller skema) for et datasæt, vælger du elementer og attributter til modelelementer inden for dataene. Ideelt definerer elementet og attributterne navneelementerne på en meningsfuld måde:

Jim Smith23 November 2012

Udvikleren her har valgt navne, der intuitivt beskriver de dataværdier, der modelleres. Med HTML5 kan du ikke vælge dine egne elementer, da det ikke er frit udvideligt. De strukturer, der er valgt til det, har simpelthen mere iboende betydning i forhold til tidligere versioner.

Af den måde er der forskellige typer af betydning

Vi har talt om mening, men der er faktisk forskellige måder, hvorpå et element eller et andet kodeeksempel kan være meningsfuldt.

Img-taggen er meningsfuld, fordi den fortæller noget om elementindholdet og beskriver hvad det er.

Nogle af de nye HTML5 elementer, såsom header og footer, er meningsfulde, fordi de angiver noget om elementets rolle eller formål inden for den samlede struktur på en side.

Hvordan relaterer alt dette til HTML5-kode da?

Så hvad indebærer dette forbedrede meningsfulde aspekt af HTML5? Væsentligt HTML5 har nogle nye elementer, som du kan inkludere mere semantisk information i din side markup. Der er en masse nye elementer, kun nogle få af dem vil vi se her. Hovedteksten angiver oplysninger om elementets indhold og om dets rolle i sidestrukturen:

Man in Window Outburst

Hovedelementet kan indeholde andre elementer og har en tendens til at inkludere mindst ét ​​overskriftselement. Fodtagset er ens, med mærket igen udtrykt noget meningsfuldt om indholdet af elementet og dets forhold til resten af ​​siden:

Nav- taggen beskriver formålet med en sidesektion, det vil sige at den indeholder navigeringslinks:

Afsnitselementet indeholder typisk en gruppe af emner på samme tema, ofte sammen med et overskrift. Sektionselementet har en ret abstrakt betydning, men det er meningsfuldt alligevel:

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

Artikelelementet er ens, bruges til at definere et objekt, der er selvstændigt:

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

En side- tag angiver elementets rolle i forhold til dens kontekst inden for siden, som i den følgende udvidede version af artiklen koden ovenfor:

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

Disse er blot nogle få af de nye HTML5-elementer, der tilbyder semantiske forbedringer, mens andre indeholder medie- og brugerinputelementer samt yderligere attributter. Inkluderingen af ​​mikrodata i HTML5 giver også øget mulighed for at inkludere semantiske oplysninger på websider og applikationer. Som du kan se, er nogle af disse nye elementer meningsfulde både hvad angår indhold og struktur.

Tænk på nogle af de ældre tags (hvoraf mange stadig findes), som div. Div-elementet er simpelthen en del af en side - tagnavnet fortæller os absolut ingenting om indholdet af elementet eller dets rolle inden for siden. Med andre ord giver mærket meget ringe betydning. Mange af de langvarige tags overfører enten næsten ingen mening overhovedet, eller i nogle tilfælde generisk, løst defineret betydning. Hvert element på en webside var indeholdt i et af en række meget generelle elementkategorier. Nøglen til at gøre noget meningsfuldt er at være specifik. De nye HTML5-tags giver os mulighed for at definere webindhold ved hjælp af mere specifikke vilkår.

Har du allerede tilføjet mening til din markering?

Hvis du har lavet websider i rimelig tid, kan nogle af de nye HTML5 elementer ringe nogle klokker til dig. I virkeligheden byggede udviklere allerede et niveau af mening ind i deres sider ved hjælp af elementattributterne, især klasse og ID. For eksempel, hvis du nogensinde har givet et element en klasse eller id-attribut på "footer" eller "header", er du bestemt ikke alene. Med HTML5 er denne betydning formidlet i selve markeringen i stedet for i attributværdier. Hvis du brugte disse attributter til at implementere bestemte stylingsegenskaber, gjorde du effektivt noget manuelt, der er indbygget i HTML5 ud af kassen - og med semantiske elementer er der yderligere fordele ...

Hvorfor laver vi alt dette?

OK, det er det hele meget godt, men du ville blive tilgivet for at spørge, hvorfor vi skal til alle disse problemer for noget, der forekommer væsentligt begrebsmæssigt / akademisk. Nå kan du være sikker på, at der er gode grunde til at bevæge sig i en mere semantisk retning. Som vi har set, tillader HTML5 semantik os at oprette markupkode, der beskriver indholdsartikler. Dette beskrivende aspekt af koden tillader andre programmer at gøre indholdet mere effektivt, med forskellige applikationer:

• Søgbarhed er indstillet til at blive transformeret af fremkomsten af ​​web semantik. Semantisk markering gør indhold / data mere søgbare. Websider er selvfølgelig ikke kun set i webbrowseren, de behandles også af andre programmer som søgemaskine robotter. Da semantisk markup er designet til at lade applikationer fortolke websider på mere meningsfulde måder, bør dette i sidste ende forbedre kvaliteten af ​​søge- / forespørgselsfunktioner med en betydelig mængde. I Tim Berners-Lees ofte citerede "drøm" til internettet kunne computere analysere alle dataene online - det kan være langt væk, men den semantiske drivkraft i HTML5 er motiveret af den type langsigtede mål .
• Tilgængelighed er en af ​​de vigtigste fordele ved semantisk markering. Hjælpeværktøjer kan drage fordel af en mere meningsfuld adgang til webindhold. Sådanne værktøjer omfatter browser-tilføjelser til brugere med begrænset syn, hørelse, læringsproblemer og så videre. Semantisk markering gør det mere muligt for en applikation at behandle webindhold og resultatet at kommunikere den oprindelige meddelelse til brugeren på en måde, der passer til deres behov. Dette koncept strækker sig ud over tilgængelighed og ind i rigdomme af enhedsfleksibilitet ved hjælp af teknikker som responsivt design. Resultatet er en mere inklusiv tilgang til levering af webindhold.
• Konsistens skal være en reel velgørende for semantisk HTML5. Semantisk markering forbedrer konsistens, da indholdsartikler er mere logisk tildelte bestemte elementtyper. Dette er i modsætning til de ældre modeller, hvor emner ofte kunne være lige så logisk indeholdt i en række forskellige elementtyper - valg af en var ikke en indikator for indholdet af indholdet eller dets rolle inden for siden, det var bare en afspejling af udviklerens valg. Med semantisk markering gør det mere specifikke niveau af betydning disse valg mindre gratis, men resultaterne er i sig selv mere pålidelige når det kommer til fortolkning enten af ​​browseren eller andre applikationer.

Udviklere kører fremskridt med webteknologier

Da jeg var på uni (for mange år siden), husker jeg en forelærer, der fortæller os, at fagområdet forskning vil blive revolutioneret af fremskridt inden for søgning. Han talte om det semantiske web - unødvendigt at sige, at det ikke er sket endnu. At tage nogen form for fokuseret ny retning med noget så forskelligt og uberegneligt som World Wide Web vil altid være en hård opgave. Men ved at komme om bord med ideen om semantisk markering i det mindste, kan vi som udviklere handle for at påvirke bevægelsen hen imod et fremtidigt web, som er mere tilgængeligt, søgbart og konsekvent for alle brugere.

Bruger du HTML5's semantiske elementer? Fremstiller fokus på semantik et produkt af højere kvalitet? Lad os vide, hvad du synes i kommentarerne.

Fremhævet billede / thumbnail, bruger sprogbillede via Shutterstock.