Med semantisk HTML definerer vi hovedelementene på nettsiden med egne semantiske tagger, slik at det blir enklere å forstå hvordan de forskjellige hoveddelene av nettsiden er satt sammen. Noen typiske semantiske tagger er beskrevet i tabellen under.
| tittelen på nettsiden, med logo, banner, overskrift og så videre |
| bunnteksten til nettsiden, med for eksempel kontaktinformasjon, lenker til sosiale medier, hvem som har designet siden, og så videre |
| navigasjon, nettsidens meny |
| hovedområdet på nettsiden, innebærer typisk alt innhold unntatt header, nav og footer |
| et definert område av nettsiden med innhold som henger sammen |
| en lengre, sammenhengende tekst, som er uavhengig av annet innhold |
| apropos-innhold, for eksempel faktabokser, illustrasjonsbilder eller lignende |
<article> og <section> kan brukes sammen, enten ved at en article kan ha flere sections (kapitler) eller at en section kan inneholde en article, sammen med andre elementer (for eksempel <aside>).
Hvorfor bruke semantisk HTML?
I web-design uten semantiske tagger ville man ha brukt <div> med CSS-klasser og ID for alle disse elementene. Det kan gjøre koden vanskeligere å lese og tolke, både for andre utviklere og for systemer som analyserer koden, som søkemotorer og nettlesere.
En-sides nettsteder
Et nettsted består som oftest av mange undersider, men et nettsted kan også bestå av en enkelt side der all informasjonen er nedover på siden. Dette er typisk for nettsider som presenterer et produkt eller et firma. Man vil da få svært mye kode i denne ene HTML-fila, og da er det viktig at koden er lett å finne fram i. Bruk av semantiske tagger hjelper til med dette.
Her er noen eksempler på en-sides nettsteder:
Utforsk flere en-sides nettsider hos Awwwards (awwwards.com).