En titt på riktig HTML5-semantikk
Hvis du planlegger strukturen på HTML-dokumentene nøye, kan du hjelp datamaskiner gir mening om meningen med innholdet ditt. Riktig syntaks er viktig for sikker, men det gir i utgangspunktet bare parsers, søkemotorer og assistentteknologier med en meningsløs haug med data.
Hvis du forbedrer arbeidsflyten for deg med å legge merke til semantikk, kan du opprette et innhold av høyere kvalitet som tiltrekker flere besøkende. Semantikk er studie av mening, i en bredere sammenheng er det en gren av logikk og lingvistikk.
I verden av webutvikling snakker vi om semantisk innhold når datamaskiner forstår strukturen i et dokument og roller av elementene innsiden av den. Hvis vi ønsker å skape riktig semantikk, trenger vi dypt forstå strukturen av innholdet vårt og evner av frontend-teknologier.
Så hva er de konkrete fordelene? Riktig semantikk betyr a mer søkbart innhold som fører til a bedre søkemotorrangering. Vi øker også tilgjengeligheten, som hjelpemidler som skjermlesere kan bedre tolke betydningen av innholdet vårt.
Det er mange forskjellige front-end utviklingsteknikker som gjør det mulig for utviklere å oppnå en semantisk sidestruktur. Dette innlegget vil gi deg en kort introduksjon til semantiske HTML-koder og begrepet dokumentoversikt.
Semantiske og ikke-semantiske HTML-tagger
Begrepet semantikk er ikke så nytt som det ser ut, det eksisterte godt før æra av HTML5. Begrepet semantisk web ble laget så tidlig som i 2001 av Sir Tim Berners-Lee. Under “semantisk web” han mente en web av data som kan behandles av maskiner.
Dette betyr i hovedsak det separate HTML-elementer må ha sine utprekkelige strukturelle roller. I følge definisjonen av W3C “et semantisk element beskriver klart sin betydning for både nettleseren og utvikleren”.
Semantiske elementer før HTML5
Semantiske elementer eksisterte før HTML5, bare i de fleste tilfeller var utviklere ikke klar over det Noen av kodene de brukte var faktisk semantiske. Bare tenk på eller
Deres roller er klare for både oss og brukeragenten: inneholder bare et skjema, akkurat som
De
bestilt og uordnede lister, avsnitt, h1-h6 overskriftskoder er alle semantiske elementer som foregikk HTML5.
Ikke-semantiske elementer
Ikke-semantiske elementer har ingen spesiell betydning, de hierkiske forholdene mellom dem er bare illusoriske. De mest brukte eksemplene på ikke-semantiske HTML-koder er og tags.
Hvis nettstedet ditt har fanget den fryktelige sykdommen divitis, du vet hva jeg snakker om. Jepp. Divs er ikke nødvendigvis feil, men divitis må bekjempes hvis vi ønsker å skrive vedlikeholdsbar, modulær og meningsfull HTML-kode.
Smashing Magazine forklarer vakkert hva det virkelige problemet er med overdreven og urimelig bruk av Det er ingen sammenheng mellom de to, akkurat som i tilfelle av Ikke vær panikk hvis du fortsatt føler deg festet til HTML5 introduserte mange nye semantiske elementer som muliggjør enkel organisering av innhold. De hjelper ikke bare deg med å organisere innhold på nivået av hele dokumentet (se i detaljer i neste avsnitt), men også innenfor tekstblokker, som inline tags. Sannsynligvis de mest populære tekstnivå-semantiske kodene er Se denne listen for alle semantiske elementelementer på tekstnivå som er i bruk. Dokumentoversikten er strukturen i et HTML-dokument. Det viser hvordan elementene er relaterte til hverandre. Dokumentoversikten er generert utelukkende av kartleggingselementer, for eksempel overskrifter, tabelltitler, formtitler og andre i tidligere versjoner av HTML, for eksempel HTML4.01 og XHTML. I HTML5 er oversikten algoritmen forbedret av nye seksjonselementer, nemlig: Det er et femte snittelement i HTML5, men det er ikke nytt, det er det Hvis vi ønsker å lage et godt strukturert dokumentoversikt, må vi være oppmerksom på følgende regler: 1. Det ytterste snittelementet er alltid 2. Seksjoner i HTML5 kan nestes. 3. Hver seksjon har sitt eget overskriftshierarki. Hver av dem (selv den innerste nestede delen) kan ha en 4. Mens dokumentbeskrivelsen primært er definert av de 5 seksjonene, trenger den også riktige overskrifter for hver seksjon. 5. Det er alltid det første overskriftelementet (la det være h1 eller en lavere rangeringskode) som definerer overskriften til den oppgitte delen. Følgende overskriftskoder i samme seksjon må være i forhold til dette. (Hvis den første overskriften er en h3 inne i et snittelement, ikke sett en h3 etter det.) 6. Seksjonene definert av 7. Hver seksjon (kropp, seksjon, artikkel, til side, nav) kan ha sine egne La oss se et eksempel på et semantisk dokumentoversikt for å se klarere hvordan det fungerer. Vår eksempelkode vil resultere i følgende dokumentstruktur: Og her er koden med riktig semantisk snitting: Her er vår logo og slagord. Punkt 1 i første seksjon Punkt 2 i første seksjon Punkt 1 i andre seksjon Punkt 2 i andre seksjon Hvis du ser kodenestykket over, ser du at overskrifter og bunntekster er valgfrie, vi kan fritt velge om vi vil bruke dem eller ikke, men det er sterkt anbefalt å alltid ta med en overskrift for hver seksjon, Ellers vil delen være “Uten navn” i dokumentoversikten. Heldigvis finnes det mange flotte verktøy over hele Internett som tillater oss å sjekke dokumentoversikten, denne gangen vil vi bruke Outliner-verktøyet til html5.org. Hvis vi setter inn kodebiten vår i skjemaet som leveres av outlineren, og klikker på “Skissere dette!” knappen, vil vi se følgende resultat: Dette er dokumentoversikt over vår prøvekode, dette er hvordan søkemotorer ser det, og skjermleserne leser det til synskadede brukere. Det er semantisk, godt strukturert, og det er ingen stygg “Uten navn” deler i den. Hvis du vil se hvordan en Untitled-seksjon ser ut i Outliner, slett bare noen av overskriftskodene i eksempelkoden. Semantiske HTML-koder og dokumentutskrifter er bare en liten del av websemantikk. Innholdet på en nettside kan gjøres enda mer meningsfullt ved hjelp av WAI-ARIA-tilgjengelighetsprotokollen, og strukturerte data som kan brukes sammen med RDFa-protokollen, mikrodata eller JSON-LD-oppslaget. tag som fungerer på samme måte, bare på inline nivå.-s skjønt, som du trenger ikke å fullstendig dike dem. De er fortsatt det beste valget for å gruppere innhold utelukkende for styling og i andre siste tilfeller. Tekst Semantikk i HTML5
og , men de eksisterte også før HTML5. Blant de nye inline-semantiske elementene finner vi for eksempel , tag for menneskelige lesbare datatider, og til uthevet tekst.Dokumentoversikt i HTML5
til seksjoner gruppert rundt et bestemt tema til komplette eller selvforsynte komposisjoner for eksempel et blogginnlegg eller en widget til navigasjonsblokker til komplementære innhold som sidebjelker. stikkord. De Etiketter er også nye, men de genererer ikke nye seksjoner i et dokument, de deler opp innholdet i seksjoner. Dette betyr at hvert snittelement (kropp, artikkel, seksjon, nav og til side) kan ha sin egen overskrift og bunntekst.Tips for semantisk strukturert innhold
stikkord.h1 stikkord., og Etiketter tilhører ikke hovedoversikten av HTML-dokumentet, de er vanligvis ikke gjengitt i utgangspunktet av hjelpeteknologi. koder, som definerer toppteksten (for eksempel logo, forfatterens navn, datoer, meta info, etc.) og bunnteksten (opphavsrett, notater, lenker, etc.) i den delen.Eksempel: En semantisk oversikt
Velkommen på vår hjemmeside!
Tittel på artikkel
Teksting av artikkel
Første logiske del (for eksempel "teori")
Noen annen underposisjon i første seksjon
Second Logical Part (for eksempel "Practice")
Andre aspekter av websemantikk
