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 eit markeringsspråk (ikkje eit programmeringsspråk) som skildrar strukturen og innhaldet på ei nettside. Nettlesaren les HTML-koden og viser innhaldet visuelt.

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

HTML-element

Eit HTML-element består av tre delar: <p class="intro">Dette er et avsnitt.</p> └┬┘ └────┬────┘ └───────┬────────┘ └┬┘ tag attributt innhold lukkingstag Nokre element er sjølvlukkande og har ikkje innhald, t.d. <br> (linjeskift) og <img> (bilete).

Grunnstrukturen i eit HTML-dokument

Alle HTML-dokument følgjer den same 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> – fortel nettlesaren at dette er HTML5
- <html> – rota av dokumentet, lang="nb" angir språket
- <head> – metadata som ikkje blir vist på sida (tittel, teiknkoding)
- <body> – alt synleg innhald på sida

Vanlege HTML-element

Element	Skildring	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>`	Bilete	`<img src="bilde.jpg" alt="Beskrivelse">`
`<ul>`, `<ol>`	Uordna/ordna liste	Sjå eksempel nedanfor
`<div>`	Generisk behaldar	For gruppering
`<span>`	Inline behaldar	For tekstmarkering

Semantisk HTML

Semantiske element skildrar tydinga til innhaldet, ikkje berre utsjånaden. Dette er viktig for tilgjenge og søkjemotorar.

<!-- 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 element:
- <header> – topptekst for sida eller ein seksjon
- <nav> – navigasjonslenkjer
- <main> – hovudinnhaldet på sida (berre éin per side)
- <article> – sjølvstendig innhald (bloggpost, nyheit)
- <section> – tematisk gruppering av innhald
- <aside> – sideinnhald (sidebarar)
- <footer> – botntekst

Lister, lenkjer og skjema

Uordna liste (punktliste):

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

Ordna liste (nummerert):

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

Lenkjer koplar sider saman:

<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>

Skjema lèt brukarar 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-typar: text, email, password, number, date, checkbox, radio.

✏️Ei komplett semantisk nettside

Eksempel: Personleg 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 element: <header>, <nav>, <main>, <section>, <article> og <footer>.

Oppsummering

- HTML er markeringsspråket som skildrar strukturen på nettsider
- Eit element består av opningstagg, innhald og lukketagg
- Attributt gir tilleggsinformasjon til element
- Semantiske element (<header>, <nav>, <main>, <article>) skildrar tydinga til innhaldet
- Lister blir laga med <ul>/<ol> og <li>
- Lenkjer blir laga med <a href="...">
- Skjema 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.