Modul 2

Kap 2.1 - HTML-element och DOM-tänk

HTML är inte bara text med taggar. Det blir ett dokumentträd som webbläsaren, CSS och JavaScript kan arbeta med.

Mål

  • Förklara vad ett HTML-element är.
  • Skilja mellan element, tagg, attribut och innehåll.
  • Förstå DOM-modellen som ett träd av element.

Element, taggar och attribut

Ett HTML-element består ofta av en starttagg, innehåll och en sluttagg. Starttaggen kan ha attribut som ger extra information.

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

Här är p elementets namn, class ett attribut och intro attributets värde.

Element utan sluttagg

Vissa element har inget eget textinnehåll och skrivs utan sluttagg. Bild-elementet är ett vanligt exempel.

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

Nästlade element

HTML-element kan ligga inuti andra element. Då uppstår en struktur med föräldrar och barn.

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

Rubrik

Ett stycke med viktig text.

Strukturen i koden

  • article innehåller allt i exemplet.
  • h2 är rubriken.
  • p är stycket.
  • strong ligger inuti p och markerar viktig text.

article är förälder till h2 och p. Elementet strong är barn till p.

DOM-modellen

När webbläsaren läser HTML-koden skapas DOM, Document Object Model. Du kan tänka på DOM som ett träd där varje element blir en nod. CSS använder strukturen för att välja element. JavaScript kan senare ändra DOM så att sidan reagerar på användaren.

Prova själv

  1. Öppna din profilsida i webbläsaren.
  2. Högerklicka på en rubrik och välj Inspect.
  3. Leta upp samma element i Elements-panelen.
  4. Fäll ut och ihop element så att du ser trädstrukturen.

Sammanfattning

  • Element är byggblocken i HTML.
  • Attribut ger extra information till element.
  • Nästling skapar relationer mellan element.
  • DOM är webbläsarens modell av HTML-dokumentet.