Semantikk
Last updated
Last updated
Før brukte vi ofte bare div og span til å bygge en side. Med HTML5 fikk vi mange flere tagger slik at vi kan lage mer beskrivende HTML-strukturer. Dette er både nyttig for utviklere og brukere av nettsiden. Utviklere får bedre oversikt over HTML-dokumentet og hva den semantiske betydningen av de ulike delene er. Samtidig har brukere som avhenger av skjermleser eller andre spesialverktøy stor verdi av semantiske strukturer, fordi skjermleseren kan forstå hensikten med elementene. Om den oppdager en nav-tag i nettsiden kan den vite at nettsiden inneholder navigasjonselementer. Det er ikke nødvendigvis like åpenbart med en <div id="navigation"></div>. I tillegg er en semantisk struktur lettere å tolke for søkemotorer, og dermed bedre for søkemotoroptimalisering av nettsiden. I kodeblokken under har vi listet ut ikke-semantiske elementer til venstre, og det foretrukne semantiske elementet vi heller bør bruke til høyre.
De ikke-semantiske taggene div og span kan fortsatt være nyttige for styling, men man bør ha et bevisst forhold til bruken av dem.
Last ned . Med den installert, gå til , åpne extensionen og velg Information → View document outline. Se på hvordan siden er strukturert - har du forslag til forbedringer? Hvordan er konkurrenten til sammenlikning?
Med samme chrome-extension, skru av CSS-en (CSS → Disable all styles). Hvordan ser sidene ut?
Diskuter med sidemannen hvilke HTML-elementer dere ville ha brukt for å representere følgende navigasjonsmeny:
