Modul 2 · Kapitel 2.1

HTML-element och DOM-tänk

Webbläsaren gör om HTML-koden till ett dokumentträd.

Mål

Efter kapitlet ska du kunna...

förklara vad ett HTML-element är
skilja mellan element, tagg, attribut och innehåll
beskriva relationer mellan nästlade element
förstå DOM som ett träd av noder

HTML-element

Ett komplett byggblock

<p>Det här är ett stycke.</p>

Starttagg
<p> + Innehåll
Det här är ett stycke. + Sluttagg
</p>

Tagg eller element?

Orden betyder olika saker

Tagg	Element
`<p>` eller `</p>`	`<p>Text</p>`
Markerar början eller slutet.	Hela byggblocket med taggar och innehåll.

Attribut

Extra information i starttaggen

<p class="intro">Det här är ett stycke.</p>

p är elementets namn.
class är attributets namn.
intro är attributets värde.
Texten är elementets innehåll.

Attributets delar

Namn och värde hör ihop

class
attributnamn = "intro"
attributvärde

Attribut skrivs i starttaggen.

Citattecknen omger värdet.

Element utan sluttagg

img innehåller ingen text

<img src="images/bild.jpg"
     alt="Beskrivning av bilden">

img har ingen separat sluttagg.
src anger bildens sökväg.
alt är bildens textalternativ.

Nästling

Element kan ligga inuti varandra

<article>
  <h2>Rubrik</h2>
  <p>Ett stycke med
    <strong>viktig text</strong>.
  </p>
</article>

Indraget gör strukturen lättare att se.

Resultat

Så tolkar webbläsaren innehållet

Rubrik

Ett stycke med viktig text.

HTML-strukturen bestämmer vad varje del betyder.

Förälder och barn

Relationer i strukturen

article
förälder → h2
barn p
barn

p
förälder → strong
barn

DOM

Document Object Model

När webbläsaren läser HTML-koden skapar den DOM.

Varje element blir en nod i en trädstruktur.

Trädet visar vilka element som ligger inuti andra element.

DOM-träd

Samma kod som en modell

document→html→body→article

article→h2 p→strong

Grenarna visar relationerna mellan noderna.

Varför DOM behövs

Flera tekniker använder trädet

Webbläsaren bygger upp sidan från DOM.
CSS använder strukturen för att välja element.
JavaScript kan senare hitta och ändra noder.

Därför är en tydlig HTML-struktur viktig.

Kontrollfråga

Vilket element är förälder?

<article>
  <p>Text</p>
</article>

Tänk efter innan du går vidare.

Svar: article är förälder eftersom p ligger inuti det.

Vanligt fel

Nästlingen måste avslutas rätt

<p><strong>Viktig text</p></strong>

Fel: elementen korsar varandra.

<p><strong>Viktig text</strong></p>

Rätt: det innersta elementet avslutas först.

Prova själv

Undersök DOM i webbläsaren

Öppna din profilsida i Chrome.
Högerklicka på en rubrik och välj Inspect.
Leta upp samma element i Elements-panelen.
Fäll ut och ihop element.
Identifiera en förälder och ett barn.

Sammanfattning

Kom ihåg

Element är byggblocken i HTML.
Taggar markerar elementets början och slut.
Attribut ger extra information i starttaggen.
Nästling skapar relationer mellan föräldrar och barn.
DOM är webbläsarens trädmodell av HTML-dokumentet.