Med semantisk HTML definerer vi hovudelementa på nettsida med eigne semantiske taggar, slik at det blir enklare å forstå korleis dei ulike hovuddelane av nettsida er sette saman. Nokre typiske semantiske taggar er beskrivne i tabellen under.
| tittelen på nettsida, med logo, banner, overskrift og så vidare |
| botnteksten til nettsida, med til dømes kontaktinformasjon, lenker til sosiale medium, kven som har designa sida, og så vidare |
| navigasjon, menyen til nettsida |
| hovudområdet på nettsida, inneber typisk alt innhald bortsett frå header, nav og footer |
| eit definert område av nettsida med innhald som heng saman |
| ein lengre, samanhengande tekst, som er uavhengig av anna innhald |
| apropos-innhald, til dømes faktaboksar, illustrasjonsbilete eller liknande |
<article> og <section> kan brukast saman, anten ved at ein article kan ha fleire sections (kapittel) eller at ein section kan innehalde ein article, saman med andre element (til dømes <aside>).
Kvifor bruke semantisk HTML?
I web-design utan semantiske taggar ville ein ha brukt <div> med CSS-klassar og ID for alle desse elementa. Det kan gjere koden vanskelegare å lese og tolke, både for andre utviklarar og for system som analyserer koden, som søkemotorar og nettlesarar.
Ein-sides nettstader
Ein nettstad består som oftast av mange undersider, men ein nettstad kan òg bestå av ei enkelt side der all informasjonen er nedover på sida. Dette er typisk for nettsider som presenterer eit produkt eller eit firma. Ein vil då få svært mykje kode i denne eine HTML-fila, og då er det viktig at koden er lett å finne fram i. Bruk av semantiske taggar hjelper til med dette.
Her er nokre døme på ein-sides nettstader:
Utforsk fleire ein-sides nettsider hos Awwwards (awwwards.com).