Dokumentstruktur

Alla HTML-dokument kräver en struktur som inkluderar följande element:

  • <!DOCTYPE>
  • <html>
    • <head> … </head>
    • <body> … </body>
  • </html>

Samtliga måste ha en start- och sluttagg med undantag för <!DOCTYPE>. Förklaringen är att <!DOCTYPE> inte utgör ett element utan en instruktion till webbläsaren som anger vilken version av HTML som används. Följande kodexempel visar hur ett HTML-dokument kan se ut med en minimal struktur:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Titel här</title>
   </head>

   <body>
      <h1>Min sida</h1>
      <p>Detta är min första paragraf</p>
      <p>Detta är min andra paragraf</p>
   </body>
</html>

Som du ser så finns det en hierarki och struktur för hur HTML-sidor är uppbyggda. Denna grundläggande struktur för ett HTML-dokument kallas för DOM, eller Document Object Model och illustreras många gånger metaforiskt likt ett träd. All kod med undantag för DOCTYPE måste placeras mellan <html> och </html>. Detta kan tolkas som att <html> är “förälder”-elementet och att sidhuvudet <head> och dokumentkroppen <body> är “barn”-element. Dessa i sin tur kan ha “barn”-element. Föregående kodexempel kan presenteras i form av en hierarki enligt följande figur:

dom

Figur 1. Struktur för ett HTML-dokument enligt Document Object Model (DOM).

Att gå djupare in på DOM är bortom omfånget för denna kurs och kommer således inte behandlas närmare men trots detta så är det värt att känna till strukturen för ett HTML-dokument. I kommande avsnitt kommer delarna i föregående kodexempel att behandlas utförligare. Först ut är dokumenttypen.

Dokumenttyp

Ett HTML-dokument måste alltid inledas överst med en deklararation av dokumenttypen, det vill säga <!DOCTYPE>. Dokumenttypen är inte ett element utan en instruktion till webbläsaren som redogör vilken version av HTML som webbsidan är skriven i och hur dokumentet ska tolkas “grammatiskt” av webbläsaren. I tidigare versioner av HTML har dokumenttypen varit komplicerad. Följande kodexempel illustrerar hur dokumenttypen såg ut i HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Det finns flera olika dokumenttyper att välja mellan och detta kan vara frustrerande för många nya utvecklare. Anledningen att tidigare versioner av HTML har haft komplicerade dokumenttyper beror på att de baserades på SGML som krävde en Document Type Definition (DTD). DTD är ett dokument som definierar bland annat vilka element och attribut som är tillåtna i en speciell dokumenttyp. Tidigare versioner av HTML krävde nämligen att detta dokument skulle finnas med i deklarationen av dokumenttypen. I samband med HTML5 finns inte längre detta krav och det förenklar hanteringen med dokumenttypen. Se följande kodexempel:

<!DOCTYPE html>

<!DOCTYPE> anger att det är här som dokumenttypen definieras, följt av ett blanksteg och därefter vilken version av HTML som dokumentet är skrivit enligt. I föregående kodexempel anges endast “html” som indikerar att det är HTML5. Dokumenttypen för HTML5 har stöd hos majoriteten av dagens webbläsare. Utöver detta så hjälper dokumenttypen dig att validera om din kod är semantiskt korrekt skriven och uppmärksammar dig på eventuella fel. Detta görs med hjälp av W3C’s valideringstjänst: http://validator.w3.org.

Efter deklarationen av dokumenttypen anges starttaggen <html> som indikerar början av en webbsida och att koden i denna är skriven i språket HTML. Utöver detta så måste du även ange sluttagen </html> så att en webbläsare kan tolka när webbsidan avslutas. Detta element benämns ofta som rotelementet eftersom den omsluter all kod. Efter detta element anges dokumenthuvudet som behandlas i nästa avsnitt.

Dokumenthuvud

Dokumenthuvudet representeras av <head> elementet och består av metadata om webbsidan som exempelvis titel, nyckelord för sökmotorer, referenser till stilmallar såväl som JavaScript och vilken teckenuppsättning som gäller för dokumentet. Se följande kodexempel:

<head>
   <meta charset="utf-8">
   <title>Titel på webbplatsen här</title>
</head>

Innehållet i dokumenthuvudet är inte synligt för besökaren utan används för att exempelvis berätta för sökmotorer vad din webbsida handlar om och vem som har skapat den. I dokumenthuvudet krävs alltid ett <title> element och detta är dokumentets titel. Denna visas oftast för besökaren högst upp i mitten av webbläsarfönstret, på en flik, osv. Se följande figur:

titel

Figur 2. Titel visas både i mitten av webbläsarfönstret och på en flik i webbläsaren Safari.

Undantaget är ifall HTML används i kombination med ett annat högnivåprotokoll som förser dokumentet med en titel. Exempelvis behöver en titel inte anges i HTML när e-post förser ett dokument med en ämnesrubrik. Det finns ett antal element som kan användas inom ett dokumenthuvud enligt följande:

  • <title> – Definierar titeln för ett dokument. Är obligatoriskt att använda och visas längst upp på i webbläsarfönstret.
  • <style> – Används för att deklarera en intern stilmall (CSS) i ett dokument. Det innebär att koden skrivs direkt i dokumentet till skillnad från <link> som används för att referera till externa stilmallar.
  • <base> – Definierar grunden för alla relativa referenser i ett dokument, exempelvis en referens till huvudkatalogen på en webbserver.
  • <link> – Definerar en relation mellan ett HTML-dokument och andra externa resurser, exempelvis stilmall.
  • <meta> – Definierar metadata i dokumenthuvudet och används ofta för att ge en beskrivning om dokumentet, exempelvis författaren av dokumentet.
  • <script> – Definierar ett klientskript (exempelvis JavaScript) inom en webbsida.
  • <noscript> – Definierar ett alternativt innehåll för webbläsare som inte stöder klientbaserade skriptspråk som exempelvis JavaScript och ska användas i samband med <script> taggen.

Vanligt förekommande innehåll i <meta> element är charset, description och author. Den förstnämnda anger vilken teckenuppsättning (eng. charset) som webbläsaren ska använda vid tolkning av webbsidan. Se följande exempel som visar hur charset såg ut i HTML 4:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Detta är ytterligare en del som har förenklats i den nya versionen. Se följande exempel som visar hur deklarationen av teckenuppsättningen ser ut i HTML5:

<meta charset="utf-8">

De övriga två anger beskrivningen av webbsidan (eng. description) och vem dess utgivare är (eng. author). Se följande exempel:

<meta name="description" content="Beskrivning av webbsidan">
<meta name="author" content="Montathar Faraon">

Om du har börjat migrera från HTML 4 till HTML5 så bör du vara särskilt uppmärksam på elementet <link> som oftast används för stilmallar och <script> som oftast används för JavaScript. I HTML 4 är det vanligt att använda attributet type för elementen <link> och <script>. Se följande kodexempel:

<head>
   <!-- Kopiera inte denna kod! Inget type attribut behövs här -->
   <link type="text/css" rel="stylesheet" href="style.css">
   <script type="text/javascript" src="script.js"></script>
</head>

I stället kan du skriva enligt följande kodexempel:

<head>
   <link rel="stylesheet" href="style.css">
   <script src="script.js"></script>
</head>

När dokumenthuvudet är definierat ska huvudinnehållet på webbsidan presenteras och detta görs inom <body> elementet, det vill säga dokumentkroppen. Innan vi går vidare så är det inte helt orimligt att tänka sig att många vid det här laget upplever detta ämne som tekniskt. Men alla dessa delar är nödvändiga att behandla för att måla en klar bild av vad ett HTML-dokument faktiskt är. Vi ser nu att ett HTML-dokument har en DOCTYPE som talar om för webbläsaren hur den ska tolka sidan som i sin tur hjälper till att säkerställa så att de rätta standarderna används. Vi vet också att det finns en hierarki och struktur för hur HTML-dokument är uppbyggda. Det spännande i HTML är allt inom <body> elementet som behandlas i nästa avsnitt.

Dokumentkropp

Dokumentkroppen representeras av <body> och innehåller information som presenteras för besökaren av webbsidan, det vill säga text, länkar, bilder, tabeller, listor etc. Denna information kan presenteras på olika sätt, både visuellt via webbläsare men också ljudbaserat med hjälp av skärmläsare för individer med synnedsättning. Innan HTML5 var det möjligt att använda olika attribut för att presentera innehåll. Dessa attribut är föråldrade i HTML 4 till förmån för stilmallar som ger större flexibilitet vid presentation av ett dokument. Alla föregående delar är kopplade till varandra och en visuell representation av dessa presenteras i följande figur:

body

Figur 3. Visuell representation av strukturen för en webbsida i HTML.

I nästa del ska vi titta närmare på hur du märker upp text, exempelvis paragrafer, rubriker, listor, med mera.

Montathar Faraon