Dokumentstruktur

Alle HTML-dokumenter følger en fast struktur. Denne strukturen forteller nettleseren hvordan siden skal tolkes.

Grunnstrukturen

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidetittel</title>
</head>
<body>
    <!-- Synlig innhold her -->
</body>
</html>

DOCTYPE

<!DOCTYPE html>

• Må være første linje i dokumentet
• Forteller nettleseren at dette er HTML5
• Ikke en tag, men en deklarasjon

html-elementet

<html lang="no">
    ...
</html>

• Rot-elementet som inneholder alt
• lang="no" angir språket (norsk)
• Hjelper skjermlesere og søkemotorer

Vanlige språkkoder

head-elementet

<head>
    <meta charset="UTF-8">
    <title>Min side</title>
</head>

Inneholder metadata - informasjon om siden som ikke vises direkte.

Hva kan være i head?

title

<title>Min Nettside - Hjem</title>

• Vises i nettleserfanen
• Vises i søkeresultater
• Brukes når siden bokmerkes

┌─────────────────────────────────────────┐
│ 📄 Min Nettside - Hjem    ×  │ + │     │
├─────────────────────────────────────────┤
│                                         │
│   Innholdet på siden...                 │
│                                         │
└─────────────────────────────────────────┘
       ↑
    title vises her

meta-elementer

Meta-tagger gir informasjon om siden.

Tegnsett (charset)

<meta charset="UTF-8">

Støtter æ, ø, å og andre spesialtegn. Alltid inkluder denne!

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Gjør siden responsiv på mobil. Viktig for moderne nettsider!

Beskrivelse

<meta name="description" content="En kort beskrivelse av siden">

Vises i søkeresultater under tittelen.

Andre nyttige meta-tagger

<!-- Forfatter -->
<meta name="author" content="Ola Nordmann">

<!-- Nøkkelord (mindre viktig i dag) -->
<meta name="keywords" content="html, css, web">

<!-- Forhindre caching under utvikling -->
<meta http-equiv="cache-control" content="no-cache">

body-elementet

<body>
    <h1>Velkommen!</h1>
    <p>Dette er innholdet som vises.</p>
</body>

• Alt synlig innhold plasseres her
• Overskrifter, tekst, bilder, lenker osv.

Koble til filer

CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

Se Koble CSS til HTML for mer om de ulike måtene å legge til CSS.

JavaScript

<!-- I head (laster før innhold) -->
<head>
    <script src="script.js"></script>
</head>

<!-- Før </body> (anbefalt - laster etter innhold) -->
<body>
    ...innhold...
    <script src="script.js"></script>
</body>

Se Koble JavaScript til HTML for mer om plassering av script-taggen.

Favicon

<head>
    <link rel="icon" href="favicon.ico">
</head>

Ikonet som vises i nettleserfanen.

Komplett eksempel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html lang="no">
<head>
    <!-- Tegnsett -->
    <meta charset="UTF-8">

    <!-- Responsiv design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <meta name="description" content="Min første nettside">
    <meta name="author" content="Ola Nordmann">

    <!-- Tittel -->
    <title>Min Nettside</title>

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Velkommen</h1>
    </header>

    <main>
        <p>Hovedinnholdet kommer her.</p>
    </main>

    <footer>
        <p>&copy; 2024</p>
    </footer>

    <!-- JavaScript -->
    <script src="js/script.js"></script>
</body>
</html>

Filstruktur

En typisk mappestruktur for et nettsted:

📁 mitt-nettsted/
├── 📄 index.html
├── 📄 about.html
├── 📄 contact.html
├── 📁 css/
│   └── 📄 style.css
├── 📁 js/
│   └── 📄 script.js
└── 📁 images/
    ├── 📄 logo.png
    └── 📄 hero.jpg

Oppsummering