Hva er HTML?
HTML (HyperText Markup Language) er det grunnleggende byggeklossene for alle nettsider. Det er ikke et programmeringsspråk, men et markeringsspråk som forteller nettleseren hvordan innholdet skal struktureres.
Viktig å huske:
- HTML beskriver strukturen til en nettside
- HTML-elementer forteller nettleseren hvordan innholdet skal vises
- HTML-dokumenter består av nestede HTML-elementer
Grunnleggende HTML-dokumentstruktur
Et HTML-dokument starter alltid med en dokumenttype-deklarasjon og har en bestemt struktur som alle nettsider følger. Her er den grunnleggende strukturen:
Eksempel på grunnleggende HTML-struktur:
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min første nettside</title>
</head>
<body>
<h1>Velkommen til min nettside</h1>
<p>Dette er et avsnitt med tekst.</p>
</body>
</html>La oss bryte ned strukturen:
<!DOCTYPE html>- Forteller nettleseren at dette er et HTML5-dokument<html>- Rotelementet som inneholder hele dokumentet<head>- Inneholder metadata om dokumentet<body>- Inneholder det synlige innholdet
HTML-elementer og -tagger
HTML-elementer er byggesteinene i enhver nettside. Et element består vanligvis av en start-tagg, innhold og en slutt-tagg.
Anatomien til et HTML-element:
<taggnavn attributt="verdi">Innhold</taggnavn>- Start-tagg:
<taggnavn> - Innhold: Tekst eller andre elementer
- Slutt-tagg:
</taggnavn>
Vanlige HTML-elementer
<h1>Dette er en overskrift</h1>
<p>Dette er et avsnitt med tekst.</p>
<a href="https://www.eksempel.no">Dette er en lenke</a>
<img src="bilde.jpg" alt="Beskrivelse av bildet">
Nøsting av elementer
HTML-elementer kan plasseres inne i andre elementer. Dette kalles nøsting. Det er viktig å lukke elementene i riktig rekkefølge.
Eksempel på nøsting:
<div class="container">
<h2>Min liste</h2>
<ul>
<li>Første element</li>
<li>Andre element</li>
<li>Tredje element</li>
</ul>
</div>Min liste
- Første element
- Andre element
- Tredje element
Viktig!
Husk disse reglene for nøsting:
- Elementer må lukkes i motsatt rekkefølge av hvordan de ble åpnet
- Alle elementer må være fullstendig inne i sitt forelder-element
- Feil nøsting kan føre til uventet oppførsel i nettleseren