Godt i gang med HTML5 - HTML5 for dig der allerede kender html

Såfremt du er fortrolig med tidligere udgaver af HTML og CSS, skal der ikke meget til for at tage springet til de nyeste udgaver, HTML5 og CSS3.

Der er mange interesssante ting ved HTML5 og CSS3, men også et par faldgruber. I denne artikel finder du de grundlæggende elementer for at komme hurtigt i gang med HTML5 – næste artikel er om CSS3.

Hvorfor HTML5?

HTML5 har en række fordele over tidligere udgaver:

Semantisk mere korrekt, hvilket kan hjælpe med søgemaskineoptimering af dit site
Understøtter Rich media: Lyd og video, der før blev håndteret af eksterne plugins, kan nu håndteres via HTML5. Canvas-elementet er et “miljø” til at lave billeder dynamiske. Canvas kan opdateres overalt, f.eks. via bruger-triggede events, hvilket betyder at det i sidste ende vil være muligt at lave værktøjer og spil, som før krævede eksempelvis Flash.
JavaScript API og dokumentation – bedre integration med JS
Web forms – avancerede formularer med validering af input, hvilket før krævede flittig brug af JS

Doctype

Det er simpelt at gå i gang med at bruge HTML5. Det eneste du skal tænke på er at bruge <!DOCTYPE html>-deklarationen i toppen af dit html-dokument.

<!DOCTYPE html>

Det er dog op til browser-producenterne at implementere HTML5, og her har IE (Internet Explorer) været lidt sløv. Det er der dog en løsning for: html5shiv, som er et lille Javascript, der skal inkluderes i dit dokument. Se: https://github.com/afarkas/html5shiv for inkludering af html5shiv i dit website.

Implementering af HTML5

Som udgangspunkt er et website baseret på HTML5, hvis blot doctypen er <!DOCTYPE html>. HTML5 bygger videre på HTML4/XHTML1, lige med enkelte undtagelser: <frameset> understøttes ikke mere (men det regner jeg heller ikke med at du bruger, ligesom du ikke laver layout med tabeller). Alt i alt er du allerede godt i gang med at bruge HTML5, hvis blot du ændrer doctypen.

Browser-producenterne står for at implementere HTML5, og de gør det i varierende hastighed. Derfor er det ikke alt HTML5 man bare skal kaste sig hovedkulds ud i, specielt ikke hvis målgruppen for ens site bruger gamle pc’ere…

En af de store forskelle mellem tidligere udgaver af HTML og HTML5 er, at der er kommet en række tags til. Med html5shiv kan man roligt bruge HTML5s semantiske tags:

<header> – bruges til “toppen” af websitet, men også til f.eks. toppen af en artikel

<section> – kan bruges dels til “hovedindholdet” på siden, men også til at dele en artikel/inholdet op i yderligere sektioner

<article> – bruges typisk til en vare/artikel i en shop, et indlæg på en blog eller et nyhedssite mm.

<aside> – indeholder elementer, der ikke decideret hører til “hovedindholdet” på sitet, men som relaterer til det – typisk en sidebar med relaterede artikler, relevante links, venners aktivitet el. lign.

<footer> – bruges til at runde sitet af, men også til f.eks. afrunding af en artikel eller sektion.

Hierarkiet mellem tags

En anden forskel mellem HTML5 og tidligere udgaver, er hierarkiet i de forskellige tags. I HTML5 er man i høj grad med til at lave sit eget hierarki i dokumentet – f.eks. kan en <section>indeholde flere <article>-elementer, og en <article> kan så bestå af en <header>, en <section> og en <footer>. Eksempelvis:

<section>
   <article>
      <header></header>
      <section></section>
      <footer></footer>
   </article>
</section>

Med andre ord, kan man være langt mere specifik med html-tagene, end før, hvor man bare brugte en masse <div>’er. Det gør det mere semantisk, hvilket i sidste ende, hvis det gøres ordentligt, optimerer sitet i forhold til søgemaskiner.

Man kan stadig bruge <div> og <span>taggene, og de bruges også meget. Der er blot kommet nogen flere tags, som før i tiden typisk var <div>’er.

En sidste ting, der er værd at nævne, er at hvert HTML5-element, har sit eget hierarki. Eksempelvis lærte vi med tidligere HTML-udgaver at <h1>-tagget skulle bruges til sitets titel, <h2> til de enkelte siders navn, <h3>
til overskrifter i dokumentetet mv. Nu hvor hvert element har sit eget hierarki, kan man f.eks. starte hver <article> med et <h1>-tag: Article-elementet og overskrifterne i det er uafhængigt af resten af sitets hierarki.

HTML5 eksempler

Herunder følger et par eksempler på brugen af HTML5.

Semantiske tags

Eksempel på side med HTML-semantiske tags:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Sidenavn</title>
    <link type="text/css" href="style.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    
    <header>
        <div id="logo">Logo</div>
        <h1>Flot website!</h1>
    </header>
    
    <section id="forside">
        <article>
            <header><h1>God artikel</h1></header>
            <section>Artikelindhold</section>
            <footer>Skrevet af Joe</footer>
        </article>
        <article>
            <header><h1>Jævn artikel</h1></header>
            <section>Artikelindhold</section>
            <footer>Skrevet af Jack</footer>
        </article>
    </section>
    
    <aside>
        <h2>Andre artikler af Joe og Jack</h2>
        <ul>
            <li>Artikel 1</li>
            <li>Artikel 2</li>
        </ul>
    </aside>
    
    <footer>&copy; Joe og Jacks site</footer>

</body>
</html>

Formularer

For at validere en email clientside, har vi indtil videre brugt JavaScript. Der er nu en række nye inputelementer til formularer – f.eks. typen email:

<input id=”email” name=”email” type=”email”>

Hierarki og “store links”

Man kan wrappe adskillige elementer i et <a>-element. Det kunne man ikke før. Eksempel:

<a href="ommig.html">
   <h2>Stefan Grage</h2>
   <p>Tekst om mig...</p>
</a>

HTML5 Video

Video er ret nemt at implementere direkte i HTML5, uden brug af eksempelvis en flash-afspiller:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Din browser understøtter ikke HTML5-video
</video>

Afrunding

Det er som nævnt ikke alle browsere, der understøtter alle elementer. På https://caniuse.com/ og https://html5readiness.com/ kan du se hvilke browsere, der understøtter hvilke elementer. Eksempelvis kan du søge efter video-elementet, for at se hvilke browsere, der understøtter det: https://caniuse.com/video

Derfra kan du så tage en beslutning: Hvilke browsere SKAL vores website understøtte, og hvad vil vi gøre med dem, der ikke understøtter det vi efterspørger?