Bygg ett välstrukturerat HTML5-dokument

En bra början för en bra och robust hemsida är en bra start på ditt HTML-dokument. I denna artikel går vi genom hur du bygger upp ett välstrukturerat HTML5-dokument som blir din grundmall för din kommande webbsida. Syftet är att ha en mall som går att bygga vidare på och som löser de problem du kommer stöta på när du börjar jobba med HTML5

Grundstruktur för ett HTML5-dokument

HTML5 som standard är mycket mer förlåtande än exempelvis XHTML, det finns inga krav på att ditt dokument ska vara valid XML, vill du ha det så kan du göra så, vill du inte ha det så, så kan du skippa det, det är upp till dig. Det första du ska börja med är att göra grundstrukturen för dokumentet, med HTML-doctype, head och body som vanligt:

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Notera Doctypen !doctype html, thats it, inga långa konstiga url:er för olika typer av dokumentstandarder som i XHTML, utan bara den enkla doctypen för att berätta för browsern att nu kör vi HTML5

Utöka med lite bra att ha

Nästa steg är att speca vilket språk ditt HTML5-dokument är på, det lägger vi på som ett lang-attribut på html-elementet, i vårt fall sv-se som står för svenska sverige, du kan även bara använda språket, sv, kombinationen kan vara av intresse om du vill förklara för en sökmotor eller webbläsare att ditt innehåll exempelvis är brittisk engelska en-gb eller finlands-svenska sv-fi eller andra språk som finns i olika länder och uppvisar olika karaktär. Det är iaf viktigt att få detta så korrekt som möjligt då vi vill att sökmotorer indexerar vår webbsida korrekt och att webbläsare identifierar rätt språk. För att förenkla presentation av text så bör du speca vilken character-encoding (charset) din webbsida har, vårt tips är att använda UTF-8 överallt så du minskar problemen med att konvertera mellan olika typer av character-uppsättningar. Man sätter sin character-encoding i ett HTML5-dokument som en meta-tagg. Vad är X-UA-Compatible? Jo, det är en smart liten tagg som tvingar din Internet Explorer eller Chrome Frame att använda senast möjliga renderingsmotor, och inte något struligt Compability Mode. Detta kommer göra det enklare för dig att få saker att se bra ut på IE. Vill du inte ha denna tagg i din markup kan du lägga till det i webbserverns header response istället för att tvinga senaste renderingsmotorerna från IE. Vad gör då width=device-width? Det är en förberedelse för att du ska kunna bygga en bra webbsida som fungerar oberoende av vilken typ av enhet (device) som besöker din sida. width=device-width säger åt enheten att den ska rendera sidan så bred som devicen är.

<!doctype html>
<html lang="sv-se">
<head>
  <meta charset="utf-8">
  <title>Din titel</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  <meta name="viewport" content="width=device-width"/>
</head>
<body></body>
</html>

Grundstruktur med nya HTML5-element

Nedan har vi gett oss på att skapa en grundstruktur för en sida med nya HTML5-element. Du kan ganska snabbt konstatera att vi delat in dokumentet i tre delar, header, article och footer. Givetvis är det fullt legalt att använda element som div och span fortfarande och det tycker vi att ni ska göra, man ska inte slå knut på sig för att bara använda HTML5-element, men att ha en bra grundstruktur som gör det enkelt att bygga vidare på är viktigt. Notera hur enkelt det är att se på dokumentet vad som är vad, du är inte längre beroende på samma sätt som tidigare av bra namngivna id:n osv på headers, footers och innehålls-delar.

<!doctype html>
<html lang="sv-se">
<head>
  <meta charset="utf-8">
  <title>Din titel</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  <meta name="viewport" content="width=device-width"/>
</head>
<body>
  <header>
    <hgroup>
      <h1>Namn på sidan</h1>
      <h2>En liten tagline till din nya sida</h2>
    </hgroup>
    <nav>
      <ul>
        <li><a href="/">Hem</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h1>Titel på min artikel</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <aside>
      <h3>Bra att veta om Lorem</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
    </aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <footer>
    <p>2012 - Min webbsida senast uppdaterad <time datetime="2012-09-25T09:00:00">2012-09-25</time></p>
  </footer>
</body>
</html>

Brottas med Internet Explorer

Som vanligt är det Internet Explorer som är den jobbige i klassen. För att få HTML5-element att fungera korrekt i Internet Explorer 7 och 8 behöver du hjälpa dem på traven lite med ett script, en HTML5-shiv. Det finns olika sätt att göra det på, men vi rekommenderar att man använder ett feature-detection script som heter Modernizr som hjälper dig med att ta reda på vad en webbläsare klara och inte klarar av, Modernizr hjälper dig också med detta. Beroende på vad du vill göra för HTML5-tricks med din webbsida kan olika typer HTML5 polyfills vara till nytta när du ska se till att användarupplevelsen i äldre versioner av Internet Explorer är lika bra som i nya moderna webbläsare som stöder HTML5.

Dela

Köp HTML och CSS-boken

html5 och css3 bok

Lär dig HTML5 och CSS3. Den sjunde upplagan av HTML och CSS-boken täcker in HTML5, XHTML och CSS. Boken börjar från grunden och innehåller allt du behöver veta för att skriva webbsidor.

Köp den nu

Ställ en fråga

Bli en expert på HTML5 och CSS3

Få gratis tips i brevlådan om hur du bygger en bättre webbsida.