05 - Semantikk
Nye sematiske tagger hjelper nettlesere og skjermlesere å enklere forstå innhold på nett.
Nye semantiske tagger
<section>- Brukes for å definere en generell seksjon. Gjerne når man ikke har en mer beskrivende tag. Section kan brukes for å definere større seksjoner av en side. F.eks. kan en avis deles inn i en seksjon for hver av sine hovedkategorier, som sport/vær/ kjendiser osv.
- Hver section skal helst ha en heading.
<main>- Brukes for å definere hovedinnholdet på en side.
<article>- Brukes for å definere en artikkel. Trenger ikke å brukes kun for hele artikkler, kan også brukes for oppsummerte artikkler. F.eks. på en nett-avis kan man ha en forside med mangle article tagger, som bare inneholder oppsummeringen av hver artikkel.
- Skal helst inneholde en heading
<header>- Brukes som en slags wrapper for innhold som introduserer det som kommer. Inneholder gjerne en heading, navigasjonslinker, og kanskje et utdrag om det er header for en artikkel.
- Man kan f.eks. sette header for hele siden (i body), for en section eller for en article.
<nav>- Brukes for å representere navigasjonselementer. Må ikke kun være site-wide navigasjon, men skal helst kun være viktige linker.
<footer>- Brukes nesten som en header, bare etter ting i stedet for før, og gjerne for mindre viktige ting. Her kan man putte relevante linker, ekstra navigasjonselementer, forfatter og copyright, osv.
<aside>- Aside brukes ofte som en sidebar til innhold som ikke nødvendigvis er direkte relatert.
<time>- Brukes for å angi dato og/eller klokkeslett. Her har man en kjekk datetime attributt som lar deg fortelle nettleseren din tid/dato på en standard måte som alle skal skjønne.
<figure>- Brukes for et bilde, en illustrasjon, litt kode, e.l. Gjerne følger man på med en figcaption som beskriver hva figure-en inneholder. Nesten litt som "alt" attributten til img taggen.
<dialog>- Representerer en dialog. Som et popup vindu som varsler brukeren om noe, og lar dem utføre relevante handlinger.
<details>- Brukes for det som lenge har blitt kalt for accordion. Lar brukeren utvide elementet for å vise mer detaljer.
<mark>- Brukes for å markere (highlighte) tekst.
Sematiske vs ikke-semantiske
Fordelen med å bruke sematiske tagger er at det er mye enklere for nettlesere og skjermlesere å skjønne hva forskjellige ting på en nettside er. Bruker man bare div og span til alt mulig, må man egentlig bare gjette på hva ting er basert på klassenavn og kanskje innholdet.
Med sematiske tagger slipper man å gjette. Man kan være sikker på at inni en <nav>-tag så er det navigasjonselementer (gitt at utvikeleren har gjort riktig da).