HTML - Grunnleggende Egenskaper

En nettside er bygd opp av HTML (HyperText Markup Language). HTML forteller nettleseren hvordan innholdet skal struktureres og presenteres.

Oppbygging av et HTML-element

Et HTML-element består vanligvis av en start-tag, innhold og en slutt-tag.

<p class="intro" > Dette er et avsnitt. </p>

Start-tag: <p> markerer begynnelsen på elementet.
Attributt: class="intro" gir ekstra informasjon om elementet (her klassenavn).
Innhold: "Dette er et avsnitt." er teksten som vises.
Slutt-tag: </p> markerer slutten på elementet. Merk skråstreken.

Tips Noen elementer, som <img> og <br>, har ingen slutt-tag. Disse kalles "tomme elementer".

Grunnleggende HTML-elementer

Her er noen av de mest brukte elementene når du starter med HTML:

<h1> - <h6>: Overskrifter. h1 er størst og viktigst.
<p>: Avsnitt (Paragraph). Brukes til vanlig tekst.
<a>: Lenke (Anchor). Brukes til å lenke til andre sider.
<img>: Bilde (Image). Viser et bilde på siden.
<br>: En linjeskift.
<ul> / <ol>: Unordered (punktliste) og Ordered (nummerert) liste.
<li>: List Item. Hvert punkt i en liste.
<div>: Division. En beholder for å gruppere innhold.
<span>: En beholder for å gruppere innhold som ikke skal ha et eget linjeskift.

Viktige HTML-attributter

Attributter legges alltid til i start-taggen. De gir ekstra funksjonalitet eller informasjon.

id="navn": Gir elementet en unik identifikator.
class="navn": Klassifiserer elementet (ofte brukt for CSS-stilsetting).
src="url": Source. Hvor bildet eller filen skal hentes fra (brukes med <img>).
href="url": Hypertext Reference. Adressen lenken peker til (brukes med <a>).
alt="tekst": Alternativ tekst hvis bildet ikke vises (viktig for universell utforming).

Skelettet til en HTML-side

Alle HTML-dokumenter må følge en fast struktur for å bli forstått riktig av nettleseren.

<!DOCTYPE html>
<html lang="no">
    <head>
        <meta charset="UTF-8">
        <title>Sidetittel</title>
    </head>
    <body>
        <h1>Overskrift</h1>
        <p>Innholdet på siden.</p>
    </body>
</html>

🗝️ Sentrale Begreper

Tag: Kodeordet mellom vinkelparentesene (f.eks. <p>).
Element: Hele strukturen fra start-tag til slutt-tag, inkludert innholdet.
Attributt: Tilleggsinformasjon i start-taggen som endrer elementets oppførsel eller utseende.
Nesting: Å plassere elementer inne i andre elementer (f.eks. en <p> inni en <div>).