Gå til innhold

HTML Konsepter

Konsepter som er unike for HTML (HyperText Markup Language).

Tags og Elementer

HTML bruker tagger for å merke innhold.

<tagname>Content</tagname>
  • Starttag: <p>
  • Slutttag: </p> (med /)
  • Element: Alt fra start til slutt
<p>This is a paragraph.</p>
<!--  ↑ start tag  ↑ content  ↑ end tag -->

Selvlukkende tagger

Noen elementer har ikke innhold:

<img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">

Attributter

Gir ekstra informasjon om elementer. Skrives i starttaggen.

<tag attribute="value">

<a href="https://nrk.no" target="_blank">NRK</a>
<img src="image.jpg" alt="A cat" width="300">
<input type="email" required>
Vanlige attributter
Attributt Brukes på Beskrivelse
id Alle Unik identifikator
class Alle Klassenavn for CSS/JS
style Alle Inline CSS
title Alle Tooltip-tekst
href <a> Lenkemål
src <img>, <video>, <script> Kilde-URL
alt <img> Alternativ tekst
type <input> Type felt
name <input>, <form> Navn for skjemadata
value <input> Standardverdi

Dokumentstruktur

Alle HTML-dokumenter følger denne strukturen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Visible content here -->
    <script src="script.js"></script>
</body>
</html>
Element Beskrivelse
<!DOCTYPE html> Deklarerer HTML5
<html> Rot-element
<head> Metadata (ikke synlig)
<meta> Informasjon om siden
<title> Tekst i nettleserfanen
<link> Koble til CSS
<body> Synlig innhold
<script> JavaScript

Tekstelementer

Overskrifter

<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6 (smallest)</h6>

Tip

Bruk kun én <h1> per side. Hopp ikke over nivåer.

Avsnitt og tekst

<p>This is a paragraph with text.</p>

<p>First line.<br>Second line.</p>

<hr>  <!-- Horizontal line -->

<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Strikethrough</del>
<code>Code</code>

Lenker

<!-- External link -->
<a href="https://nrk.no">Go to NRK</a>

<!-- Internal link -->
<a href="about.html">About us</a>

<!-- Open in new tab -->
<a href="https://nrk.no" target="_blank">NRK (new tab)</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Send email</a>

<!-- Phone link -->
<a href="tel:+4712345678">Call us</a>

<!-- Link to section on page -->
<a href="#contact">Go to contact</a>
<section id="contact">...</section>
Bilde som lenke 
<a href="https://nrk.no">
    <img src="logo.png" alt="NRK logo">
</a>

Bilder

<img src="image.jpg" alt="Description of the image">

<!-- With size -->
<img src="image.jpg" alt="..." width="300" height="200">

<!-- From subfolder -->
<img src="images/cat.jpg" alt="A cat">

<!-- From internet -->
<img src="https://example.com/image.jpg" alt="...">

Viktig

alt-tekst er påkrevd for tilgjengelighet.

Lister

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<!-- Start from different number -->
<ol start="5">
    <li>Fifth</li>
    <li>Sixth</li>
</ol>

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Tabeller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ola</td>
            <td>25</td>
            <td>Oslo</td>
        </tr>
        <tr>
            <td>Kari</td>
            <td>30</td>
            <td>Bergen</td>
        </tr>
    </tbody>
</table>
Tabell-tagger
Tag Beskrivelse
<table> Tabellen
<thead> Overskriftsrad(er)
<tbody> Dataradene
<tr> Rad (table row)
<th> Overskriftscelle
<td> Datacelle

Slå sammen celler

<!-- Merge columns -->
<td colspan="2">Covers 2 columns</td>

<!-- Merge rows -->
<td rowspan="3">Covers 3 rows</td>

Skjemaer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<form action="/send" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <button type="submit">Send</button>
</form>
Input-typer
Type Beskrivelse Eksempel
text Vanlig tekst <input type="text">
email E-post (valideres) <input type="email">
password Passord (skjult) <input type="password">
number Tall <input type="number" min="0" max="100">
tel Telefon <input type="tel">
date Dato <input type="date">
checkbox Avkrysning <input type="checkbox">
radio Radioknapp <input type="radio" name="choice">
file Filopplasting <input type="file">
submit Send-knapp <input type="submit" value="Send">

Andre skjemaelementer

<!-- Dropdown -->
<select name="country">
    <option value="">Select country</option>
    <option value="no">Norway</option>
    <option value="se">Sweden</option>
</select>

<!-- Text area -->
<textarea name="comment" rows="5" cols="40"></textarea>

<!-- Buttons -->
<button type="submit">Send</button>
<button type="button">Regular button</button>
<button type="reset">Reset</button>

Semantiske Elementer

Gir mening til strukturen (ikke bare utseende).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h1>Article</h1>
        <p>Content...</p>
    </article>

    <aside>
        <h2>Related</h2>
        <p>Sidebar...</p>
    </aside>
</main>

<footer>
    <p>&copy; 2024 My Company</p>
</footer>
Semantiske elementer
Element Beskrivelse
<header> Toppseksjon
<nav> Navigasjon
<main> Hovedinnhold (kun én)
<article> Selvstendig innhold
<section> Tematisk gruppering
<aside> Sideinnhold
<footer> Bunnseksjon
<figure> Bilde med bildetekst
<figcaption> Bildetekst
<time> Dato/tid

Multimedia

<video src="video.mp4" width="640" height="360" controls>
    Browser does not support video.
</video>

<!-- With multiple sources -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

<audio src="sound.mp3" controls>
    Browser does not support audio.
</audio>
Video/lyd attributter
Attributt Beskrivelse
controls Vis avspillingskontroller
autoplay Start automatisk
loop Gjenta
muted Lydløs
poster Forsidebilde (video)

Kommentarer

<!-- This is a comment -->

<!--
    This is a
    multi-line comment
-->

<!-- TODO: Add content here -->

Kommentarer vises ikke på siden, kun i kildekoden.

Spesialtegn

Tegn Kode Beskrivelse
< &lt; Mindre enn
> &gt; Større enn
& &amp; Ampersand
" &quot; Anførselstegn
&nbsp; Hardt mellomrom
© &copy; Copyright
€ &euro; Euro
— &mdash; Lang bindestrek