HTML-trädet

Var i trädet sitter din kod?

Öppna vilken webbsida som helst i DevTools och du ser samma mönster: taggar inuti taggar, indragna nivå för nivå. Det är inte kosmetik. Webbläsaren läser inte din HTML som en lista av taggar utan som ett träd av relationer, och det trädet avgör både hur din CSS beter sig och vad som händer när du skriver fel. I den här delen lär du dig läsa din kod som webbläsaren gör: som ett släktträd.

HTML-trädet

Dags att fylla grundstrukturen med innehåll. Lägg till en rubrik (<h1>) och ett stycke (<p>) i din övningssidas <body>:

<body>
    <h1>Min första sida</h1>
    <p>Det här är ett stycke text.</p>
</body>

Spara och ladda om sidan. Två element syns nu. Men det intressanta är inte vad de ser ut som, det är var de befinner sig i strukturen.

Taggar placeras inuti andra taggar. Det mönstret skapar en hierarki, ett träd som växer nedåt, med <html> som stam och varje element som en gren.

Tänk på det som parenteser i matematik: (a + (b + c)). Det inre måste stängas innan det yttre. Det gäller HTML också: <body><p>Text</p></body> är korrekt, men <body><p>Text</body></p> är ett fel. Varje öppningstagg måste stängas innan förälderns stängningstagg.

Titta på grundstrukturen, den här gången ritad som ett träd:

html
├── head
│   ├── meta (charset)
│   ├── meta (viewport)
│   └── title
└── body
    ├── h1
    └── p

Varje gren kan ha egna grenar, hur djupt som helst. En riktig webbsida har ofta träd med tiotals nivåer.

Alla dessa element har en relation i trädet och vi lånar familjebegrepp för att beskriva dem:

Förälder (Parent): Det element som omsluter ett annat. I din <body> är <body> förälder till både <h1> och <p>. Längre upp i trädet är <html> förälder till <head> och <body>.

Barn (Child): Det element som ligger direkt inuti ett annat. <h1> och <p> är barn till <body>. <body> i sin tur är barn till <html>.

Syskon (Siblings): Element som delar samma förälder. <h1> och <p> är syskon, båda ligger direkt inuti <body> och delar den som förälder.

CSS och arv

För att ändra utseendet på en HTML-sida använder du CSS. HTML-trädet är inte bara en organisatorisk struktur, det styr också hur CSS-regler tillämpas. Lägg till det här i din <head>:

<style>
    body {
        color: lightblue;
    }
</style>

Spara och ladda om. Både <h1> och <p> är nu blåa, utan att de fått någon egen CSS-regel. Det beror på arv (inheritance): barn ärver automatiskt textfärg och typsnitt från sin förälder.

När du vill sätta en bestämd färg och typsnitt för hela din sida gör du det på body. Alla element på sidan ärver dem automatiskt, och du behöver bara skriva undantagen.

Vanliga strukturfel

Synligt innehåll i <head>. Att placera <h1> eller <p> i <head> är ett vanligt misstag. Webbläsaren försöker rädda dig och flyttar ner dem till <body> automatiskt, men din DOM-struktur blir rörig och din CSS kan sluta fungera som förväntat.

Glömt <title>. Sidan visar bara filnamnet (t.ex. index.html) i fliken. Det ser oprofessionellt ut och gör att sökmotorer saknar en tydlig titel att visa i sökresultaten, vilket försämrar din SEO.

Uppgift: Spöksidan

Skapa en ny fil som du döper till spoksidan.html och klistra in koden nedan. Öppna filen i webbläsaren och ta sedan en titt i din kod-editor.

Något är strukturellt fel. Faktum är att det finns tre separata misstag. Kan du hitta och rätta dem innan du läser vidare?

<!DOCTYPE html>
<html>
    <head>
        <title>Min portfolio</title>
        <h1>Välkommen till min sida!</h1>
        <p>Jag heter Frums och vill bli webbutvecklare.</p>
    </head>
    <body>
        <meta charset="utf-8" />
        <p>Besök mig gärna igen!</p>
    </body>
</html>

Ledtrådar om du kör fast

Vad saknas i <html>-taggen?
Vad ska inte ligga i <head>?
Var ska <meta charset> ligga?

Vad händer om…

Öppna din rättade spöksida i DevTools och jämför fliken Elements med din källkodsfil. Ser webbläsaren identisk struktur med din kod, eller har den rättat något i tysthet? Det är exakt varför Validator.nu finns.

Motivera & reflektera

I din readme.md, skriv vilka tre fel du hittade i spöksidan och varför vart och ett var fel. Motivera med rätt begrepp (nästling, <head> vs <body>).

Verifiera med validator.nu

Koden fungerar i webbläsaren, men det är inte bevis på att den är korrekt. Webbläsaren gissar och rättar i bakgrunden. För att verkligen kontrollera din kod använder du Validator.nu: den analyserar koden och listar alla fel. Det är rättstavningskontrollen för HTML.

Avsluta med att köra din rättade spöksida genom validatorn. Öppna filen eller klistra in koden som text och läs listan. Hittade validatorn något du missade? Om du ser många fel, rätta det översta och kör om. Felen är nästan alltid kaskader, en glömd sluttagg högt upp kan skapa tio följdfel längre ned.