Et kig på korrekt HTML5-semantik
Hvis du omhyggeligt planlægger strukturen i dine HTML-dokumenter, kan du hjælpe computere med at forstå betydningen af dit indhold. Korrekt syntaks er vigtigt, men det giver grundlæggende kun parsere, søgemaskiner og assistentteknologier med en meningsløs masse data.
Hvis du forbedrer din front-end-arbejdsgang med opmærksomhed på semantik, kan du oprette et højere kvalitetsindhold, der tiltrækker flere besøgende. Semantik er den undersøgelse af mening, i en bredere sammenhæng er det en filial af logik og lingvistik.
I verden af webudvikling taler vi om semantisk indhold, når computere forstår strukturen i et dokument og roller af elementerne inde i det. Hvis vi ønsker at skabe ordentlig semantik, har vi brug for det dybt forstå strukturen af vores indhold og kapaciteter af frontend teknologier.
Så hvad er de konkrete fordele? Korrekt semantik betyder a mere søgbart indhold det fører til a bedre søgemaskine ranking. Vi øger også tilgængelighed, som hjælpemidler som f.eks Skærmlæsere kan bedre fortolke betydningen af vores indhold.
Der er mange forskellige front-end udviklingsteknikker, der gør det muligt for udviklere at opnå en semantisk sidestruktur. Dette indlæg vil give dig en kort introduktion til semantiske HTML-tags og begrebet dokumentoversigt.
Semantiske og ikke-semantiske HTML-tags
Begrebet semantik er ikke så nyt som det ser ud til, det eksisterede godt før æra af HTML5. Begrebet semantisk web blev udarbejdet så tidligt som i 2001 af Sir Tim Berners-Lee. Under “semantisk web” han betød en web af data, der kan behandles af maskiner.
Dette betyder primært det separate HTML-elementer skal have deres særskilte strukturelle roller. Ifølge definitionen af W3C “et semantisk element beskriver klart sin betydning for både browseren og udvikleren”.
Semantiske elementer før HTML5
Semantiske elementer eksisterede også før HTML5, men i de fleste tilfælde var udviklere ikke opmærksomme på det nogle af de tags, de brugte, var faktisk semantiske. Tænk bare på eller den
Deres roller er klare for både os og brugeragenten: indeholder simpelthen en form, ligesom
Det
bestilt og uordnede lister, stykker, h1-h6 overskriftstag er alle semantiske elementer, der gik forud for HTML5.
Ikke-semantiske elementer
Ikke-semantiske elementer har ingen særlig betydning, de hierkiske forhold mellem dem er blot illusoriske. De mest anvendte eksempler på ikke-semantiske HTML-tags er og tags.
Hvis dit websted nogensinde har fanget den forfærdelige sygdom i divitis, du ved hvad jeg taler om. Yep. Divs er ikke nødvendigvis forkerte, men divitis skal bekæmpes, hvis vi vil skrive vedligeholdelig, modulær og meningsfuld HTML-kode.
Smashing Magazine forklarer smukt, hvad det reelle problem er med overdreven og urimelig brug af Der er intet forhold mellem de to, ligesom i tilfælde af Må ikke panik, hvis du stadig føler dig vedhæftet HTML5 introducerede mange nye semantiske elementer, der gør det nemt at organisere indhold. De hjælper dig ikke kun med at organisere indhold på hele dokumentets niveau (se i detaljer i næste afsnit), men også inden for tekstblokke som inline tags. Sandsynligvis den mest populære tekst-niveau semantiske tags er Se denne liste for alle semantiske elementelementer på tekstniveau, der aktuelt er i brug. Dokumentoversigten er strukturen af et HTML-dokument. Det viser, hvordan elementer er relateret til hinanden. Dokumentoversigten er genereret udelukkende af kortlægningselementer, såsom overskrifter, tabeltitler, formtitler og andre i de tidligere versioner af HTML som HTML4.01 og XHTML. I HTML5 er oversigtsalgoritmen blevet forbedret af nye sektionselementer, nemlig: Der er et femte snitelement i HTML5, men det er ikke nyt, det er det Hvis vi ønsker at skabe et velstruktureret dokumentoversigt, skal vi være opmærksomme på følgende regler: 1. Det yderste snitelement er altid det 2. Sektioner i HTML5 kan nestes. 3. Hvert afsnit har sit eget overskriftshierarki. Hver af dem (selv den inderste indlejrede sektion) kan have en 4. Mens dokumentoversigten primært er defineret af de 5 sektionselementer, skal den også have korrekte overskrifter for hver sektion. 5. Det er altid det første overskriftselement (lad det være h1 eller en lavere rang overskrift tag), der definerer overskriften for den givne sektion. Følgende overskriftskoder inde i samme afsnit skal være i forhold til dette. (Hvis den første overskrift er en h3 inde i et snitelement, skal du ikke lægge en h3 efter det.) 6. De sektioner, der er defineret af 7. Hvert afsnit (krop, sektion, artikel, til side, nav) kan have deres egen Lad os se et eksempel på et semantisk dokumentoversigt for at se, hvordan det virker. Vores eksempelkode vil resultere i følgende dokumentstruktur: Og her er koden med ordentlig semantisk snitning: Her er vores logo og slogan. Stk. 1 i første afsnit Stk. 2 i første afsnit Stk. 1 i andet afsnit Stk. 2 i andet afsnit Hvis du kigger på kodestykket ovenfor, vil du se, at overskrifter og footers er valgfrie, vi kan frit vælge, om vi vil bruge dem eller ej, men det er anbefales på det kraftigste altid at indeholde en overskrift for hver sektion, Ellers vil sektionen være “Untitled” i dokumentoversigten. Heldigvis er der mange gode værktøjer over hele internettet, der giver os mulighed for at kontrollere dokumentoversigten, denne gang vil vi bruge Outliner-værktøjet til html5.org. Hvis vi indsætter vores kodestykke i formularen, der leveres af outlineren, og klikker på “Skitsere dette!” knappen vil vi se følgende resultat: Dette er dokumentoversigt over vores prøvekode, det er sådan, søgemaskiner ser det, og skærmlæsere læser det til deres synshandicappede brugere. Det er semantisk, velstruktureret, og der er ikke noget grimt “Untitled” sektioner i den. Hvis du vil se, hvordan en Untitled-sektion ligner i Outliner, skal du bare slette nogle af overskriftskoderne i eksempelkoden. Semantiske HTML-tags og dokumentoversigter er kun en lille del af websemantik. Indholdet af en webside kan gøres endnu mere meningsfuldt ved hjælp af WAI-ARIA-tilgængelighedsprotokollen og strukturerede data, der kan bruges sammen med RDFa-protokollen, mikrodata eller JSON-LD-markeringen. tag, der fungerer på samme måde, bare på inline niveau.-s dog som du behøver ikke helt at grøfte dem. De er stadig det bedste valg til gruppering af indhold udelukkende til styling og i andre sidste udvejssager. Tekst Semantik i HTML5
og , men de eksisterede også før HTML5. Blandt de nye inline-semantiske elementer kan vi f.eks. Finde frem til , tag til menneskelige læsbare dato-tider, og til fremhævet tekst.Dokumentoversigt i HTML5
til sektioner grupperet omkring et bestemt tema til komplette eller selvstændige sammensætninger f.eks. et blogindlæg eller en widget til navigationsblokke til komplementært indhold som sidebjælker. tag. Det Tags er også nye, men de genererer ikke nye sektioner i et dokument, de deler indholdet indenfor sektioner. Det betyder at hvert sektionselement (krop, artikel, sektion, nav og til side) kan have sin egen overskrift og sidefod.Tips til semantisk struktureret indhold
tag.h1 tag., og Etiketter hører ikke til HTML-dokumentets hovedoversigt, de udføres normalt ikke ved hjælp af hjælpeløsninger. tags, der definerer overskriften (f.eks. logo, forfatterens navn, datoer, meta info osv.) og footer (copyright, noter, links osv.) i dette afsnit.Eksempel: En semantisk oversigt
Velkommen på vores hjemmeside!
Titel af artikel
Undertekst af artikel
Første logiske del (fx "teori")
Nogle andre underpositioner i første afsnit
Anden logisk del (fx "praksis")
Andre aspekter af websemantik
