3.2 HTML: Struktur og semantikk | Informasjonsteknologi og medieproduksjon VG1

Lær å bygge nettsider med HTML, bruke semantiske elementer og strukturere innhold på en tilgjengelig og meningsfull måte.

60 min

6 oppgaver

HTML-elementer og taggerSemantiske elementer (header, nav, main, footer)Overskrifter, avsnitt og listerLenker og bilderTabeller og skjemaer

Du leser den tradisjonelle versjonen

Din fremgang i kapitlet

0 / 6 oppgaver

HTML: Struktur og semantikk

HTML er grunnmuren i alle nettsider. Det er et markeringsspråk (ikke et programmeringsspråk) som beskriver strukturen og innholdet på en nettside. Nettleseren leser HTML-koden og viser innholdet visuelt.

I dette kapittelet lærer du å skrive HTML, bruke semantiske elementer, og lage interaktive skjemaer.

HTML-element

Et HTML-element består av tre deler: <p class="intro">Dette er et avsnitt.</p> └┬┘ └────┬────┘ └───────┬────────┘ └┬┘ tag attributt innhold lukkingstag Noen elementer er selvlukkende og har ikke innhold, f.eks. <br> (linjeskift) og <img> (bilde).

Grunnstrukturen i et HTML-dokument

Alle HTML-dokumenter følger den samme grunnstrukturen:

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min nettside</title>
</head>
<body>
    <h1>Velkommen!</h1>
    <p>Dette er min første nettside.</p>
</body>
</html>

- <!DOCTYPE html> – forteller nettleseren at dette er HTML5
- <html> – roten av dokumentet, lang="nb" angir språket
- <head> – metadata som ikke vises på siden (tittel, tegnkoding)
- <body> – alt synlig innhold på siden

Vanlige HTML-elementer

Element	Beskrivelse	Eksempel
`<h1>` til `<h6>`	Overskrifter (h1 er størst)	`<h1>Hovedtittel</h1>`
`<p>`	Avsnitt	`<p>Brødtekst her.</p>`
`<a>`	Lenke	`<a href="url">Klikk her</a>`
`<img>`	Bilde	`<img src="bilde.jpg" alt="Beskrivelse">`
`<ul>`, `<ol>`	Uordnet/ordnet liste	Se eksempel nedenfor
`<div>`	Generisk beholder	For gruppering
`<span>`	Inline beholder	For tekstmarkering

Semantisk HTML

Semantiske elementer beskriver innholdets betydning, ikke bare utseende. Dette er viktig for tilgjengelighet og søkemotorer.

<!-- Dårlig: bruker bare div -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="content">...</div>

<!-- Bra: bruker semantiske elementer -->
<header>...</header>
<nav>...</nav>
<main>
    <article>
        <section>...</section>
    </article>
</main>
<footer>...</footer>

Viktige semantiske elementer:
- <header> – topptekst for siden eller en seksjon
- <nav> – navigasjonslenker
- <main> – hovedinnholdet på siden (kun én per side)
- <article> – selvstendig innhold (bloggpost, nyhet)
- <section> – tematisk gruppering av innhold
- <aside> – sideinnhold (sidebarer)
- <footer> – bunntekst

Lister, lenker og skjemaer

Uordnet liste (punktliste):

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordnet liste (nummerert):

<ol>
    <li>Åpne editoren</li>
    <li>Skriv kode</li>
    <li>Lagre filen</li>
</ol>

Lenker kobler sider sammen:

<a href="https://www.nrk.no">Besøk NRK</a>
<a href="om-oss.html">Om oss</a>
<a href="#kontakt">Gå til kontakt</a>

Skjemaer lar brukere sende inn data:

<form action="/send" method="post">
    <label for="navn">Navn:</label>
    <input type="text" id="navn" name="navn" required>

    <label for="epost">E-post:</label>
    <input type="email" id="epost" name="epost" required>

    <label for="melding">Melding:</label>
    <textarea id="melding" name="melding" rows="4"></textarea>

    <button type="submit">Send inn</button>
</form>

Viktige input-typer: text, email, password, number, date, checkbox, radio.

✏️En komplett semantisk nettside

Eksempel: Personlig porteføljeside

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="UTF-8">
    <title>Kari Nordmann – Portefølje</title>
</head>
<body>
    <header>
        <h1>Kari Nordmann</h1>
        <nav>
            <ul>
                <li><a href="#om">Om meg</a></li>
                <li><a href="#prosjekter">Prosjekter</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="om">
            <h2>Om meg</h2>
            <p>Jeg er elev på VG1 IM og interessert i webutvikling.</p>
        </section>

        <section id="prosjekter">
            <h2>Mine prosjekter</h2>
            <article>
                <h3>Prosjekt 1: Nettside for skoleband</h3>
                <p>En responsiv nettside laget med HTML og CSS.</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Kari Nordmann</p>
    </footer>
</body>
</html>

Legg merke til bruken av semantiske elementer: <header>, <nav>, <main>, <section>, <article> og <footer>.

Oppsummering

- HTML er markeringsspråket som beskriver strukturen på nettsider
- Et element består av åpningstag, innhold og lukkingstag
- Attributter gir tilleggsinformasjon til elementer
- Semantiske elementer (<header>, <nav>, <main>, <article>) beskriver innholdets betydning
- Lister lages med <ul>/<ol> og <li>
- Lenker lages med <a href="...">
- Skjemaer bruker <form>, <input>, <label> og <button>

Oppgaver

Lett1 oppgave

Medium4 oppgaver

Vanskelig1 oppgave

Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.