HTML5 - de viktiste elementene

Nye HTML-tagger

Alle som har kodet en webside har (og bør) ha benyttet seg av <div>-taggen når det gjelder strukturering av nettsiden, i motsetning til tabell-baserte sider. I HTML5 har behovet for <div> blitt mindre synlig, ettersom det nå har kommet flere nye elementer som kan erstatte bruken av nevnte tag.

<header>

Som navnet tilsier, gir denne tagen oss en semantisk riktig verdi for å beskrive innholdet på en inndeling mer korrekt, enn hva HTML4 gjør.
Det er også vitktig å tenke på at det ikke er noen restriksjoner på antall <header>-tags man kan bruke for hver enkelt seksjon på en side.

<footer>

Dette elementet har samme funksjonalitet som header, grupere informasjon på riktig sted. Prøv å ikke forveksle disse elementene med "header" og "footer" på selve nettsiden. De refererer til elementet. Eksempelvis er det fornuftig å plassere metainformasjon på bunnen av et blogginnlegg i bunnteksten i <footer>. Det samme gjelder for overskriften.

<nav>

Til nå har det vært vanlig å strukturere menyen på en side ved å bruke <div id=”menu”>...</div>. HTML5 benytter seg av <nav> til dette. I hovedsak gjelder dette for “hovedmenyen” på en side, såkalt “major navigation”. W3.org definerer bruken på følgende måte:

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.” HTML 5 specification

Typiske andre bruksområder kan f.eks. være:

• Innholdsfortegnelse - dette fordi det er riktig bruk av elementet i denne konteksten. En innholdsfortegnelse er et perfekt sted å illustrere navigering.
• Neste/forrige-knapper - påvirker hierarkiet og den overordnede strukture på en side
• “Breadcrumbs” - På sider hvor dette er i bruk, vil det være semantisk riktig å benytte seg av <nav>-elementet, spesielt på store sider.

<section>

Spesifikasjonen for section sier følgende:

“The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.” section spec

Mange gjør feil ved å bruke <section> til å strukturere innholdet med, i stedet for å bruke <div>-elementet for eksempelvis header, footer etc. Ut i fra dette skal altså ikke <section> brukes som en ren erstatter for “div’er”, men heller brukes som et supplement.

<article>

Forskjellen mellom <article> og <section> er ikke store, og det kan derfor være lett å blande disse hvis man ikke tenker over hvordan disse bør brukes.

Man kan bruke et <section> element for å dele artikkelen (<article>) i logiske grupper av innhold med overskrifter, som dette:

<article>
  <h1>Birkebeinerrittet</h1>
  <p>Rittet som går fra Rena til Lillehammer, distanse 94,6 km.</p>

  <section>
    <h2>Grenserittet</h2>
    <p>Rittet starter i Strömstad og slutter på Fredriksten Festning i Halden...</p>
  </section>
</article>

<aside>

aside-elementet skal i utgangspunktet representere sekundært innhold når det brukes utenfor en artikkel. Men dette bør ikke nødvendigvis bety en typisk “sidebar” på siden.

Med definisjonen av aside er det avgjørende å være klar over den kontekstuelle bruken. Når det brukes inni et artikkel-element, skal innholdet være spesifikt knyttet til artikkelen (f.eks. en ordliste). Når det brukes utenfor artikkel-elementet, skal innholdet være relatert til området (f.eks, en bloggrull, grupper av ytterligere navigering og reklame hvis at innhold relatert til siden).

<figure>

Kort fortalt er <figure>-element ment å brukes sammen med <figcaption>-element, for å markere diagrammer, illustrasjoner, bilder og kodeeksempler på en mer semantisk riktig måte enn <img>.

<figure>
    <img src=”/monsternettlogo.png” alt=”Monsternett logo”>
    <figcaption>Her er mr. Monsternett</figcaption>
</figure>

Det er ikke alltid det er riktig å bruke <figure>-elementet, dog. Et eksempel på feil bruk vil være en banner. I dette tilfellet skal den klassiske <img>-taggen benyttes.

“No more types”

I HTML4 og tidligere versjoner måtte man definere type=”text/css” eller type=“text/javascript” når det gjaldt <link>- og <script>-tags. Med versjon 5 så er ikke dette lenger nødvendig. Nå kan man enkelt skrive; <link rel="stylesheet" href="path/to/stylesheet.css" />

Det er underforstått at koden, i dette tilfellet, refererer til stilark. Nettopp derfor kan vi fjerne den type attributt på begge tagger.

Ny doctype

Hvem sliter vel ikke med å huske XHTML-doctypen til en hver tid? Dette har blitt endret, slik at man nå kun trenger å skrive <!DOCTYPE html>.

HTML5 skal i utgangspunktet være bakoverkompatibelt med eldre versjoner av HTML. Dette betyr at en eldre versjon av Internet Explorer skal klare å vise et HTML5-dokument med så lite informasjonstap som mulig. Dette fungerer naturlig nok ikke like enkelt som det høres ut som, uten et lite tillegg i koden, for at Internet Explorer skal tolke elementer riktig.

Video og lyd

HTML5 har innført to nye elementer som er viktige i forhold til media, nemlig video og audio. Når man nå skal legge til en video på en nettside, kan man enkelt bruke følgende kode: <video src=”filnavn.mpg” controls=”controls”>blabla</video>. Det er like enkelt å legge inn lyd.

Oppsummering

Dette er ment som en liten oppsummering av de største endringene som er gjort fra HTML4 til HTML5, sett fra et personlig perspektiv. Det er selvfølgelig flere endringer som er gjort, men disse er noen av de største og viktigste.

Er det noe vi burde ha nevnt? Kom gjerne med innspill om hva du mener bør være med på denne listen.