Html Guide

Forstå HTML Tags og Attributter: En Komplet Guide til Semantisk Markup

Lær alt om HTML tags og attributter, hvordan de fungerer, bedste praksis for semantisk markup og hvordan du skriver ren, tilgængelig HTML-kode.

September 3, 2025

8 min læsning

Af Mediaweb Team

HTML

Forstå HTML Tags og Attributter: En Komplet Guide til Semantisk Markup

HTML tags og attributter er byggestenene i enhver hjemmeside. At forstå hvordan de fungerer, hvornår de skal bruges, og hvordan de arbejder sammen er afgørende for at skabe velstruktureret, tilgængelig og SEO-venlig HTML. Denne guide vil tage dig dybt ind i verden af HTML tags og attributter, fra grundlæggende koncepter til avancerede teknikker.

Hvad er HTML Tags?

HTML tags er nøgleord omgivet af kantede parenteser (< og >) der fortæller browseren hvordan indhold skal struktureres og vises. De fungerer som instruktioner der definerer forskellige elementer på din hjemmeside.

Anatomi af et HTML Tag

<tagname>Indhold</tagname>

Åbnende tag: <tagname> - starter elementet
Indhold: Tekst, andre elementer eller medier
Lukkende tag: </tagname> - afslutter elementet (bemærk skråstregen)

Selvlukkende Tags

Nogle tags har ikke indhold og lukker sig selv:

<img src="billede.jpg" alt="Beskrivelse">
<br>
<hr>
<input type="text" name="navn">

Hvad er HTML Attributter?

Attributter giver yderligere information om HTML elementer. De placeres altid i det åbnende tag og kommer i navn/værdi-par.

Attribut Syntaks

<tagname attributnavn="værdi">Indhold</tagname>

Eksempler på Attributter

<a href="https://eksempel.com" target="_blank" title="Besøg Eksempel">Link</a>
<img src="foto.jpg" alt="Beskrivelse" width="300" height="200">
<div id="header" class="container">Indhold</div>

Kategorier af HTML Tags

1. Strukturelle Tags

Disse tags definerer den overordnede struktur af dit dokument:

<!DOCTYPE html>
<html lang="da">
<head>
    <title>Sidetitel</title>
    <meta charset="UTF-8">
</head>
<body>
    <header>Header indhold</header>
    <nav>Navigation</nav>
    <main>Hovedindhold</main>
    <footer>Footer indhold</footer>
</body>
</html>

2. Semantiske Tags

Semantiske tags giver betydning til indhold:

<article>En komplet artikel</article>
<section>En sektion af indhold</section>
<aside>Sidebar eller relateret indhold</aside>
<figure>
    <img src="diagram.jpg" alt="Flowchart">
    <figcaption>Figur 1: Proces flowchart</figcaption>
</figure>
<time datetime="2024-01-15">15. januar 2024</time>

3. Tekst og Typografi Tags

Tags til formatering af tekst:

<h1>Hovedoverskrift</h1>
<h2>Underoverskrift</h2>
<p>Afsnit med <strong>vigtig tekst</strong> og <em>fremhævet tekst</em></p>
<blockquote cite="https://kilde.com">
    "Dette er et citat fra en ekstern kilde."
</blockquote>
<code>console.log('Hello World');</code>
<pre>
    Præformateret tekst
    bevarer mellemrum og linjeskift
</pre>

4. Liste Tags

Tags til organisering af information i lister:

<!-- Uordnet liste -->
<ul>
    <li>Første punkt</li>
    <li>Andet punkt</li>
    <li>Tredje punkt</li>
</ul>

<!-- Ordnet liste -->
<ol>
    <li>Trin et</li>
    <li>Trin to</li>
    <li>Trin tre</li>
</ol>

<!-- Definitionsliste -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

5. Formular Tags

Tags til brugerinteraktion:

<form action="/submit" method="post">
    <fieldset>
        <legend>Personlige oplysninger</legend>
        
        <label for="navn">Navn:</label>
        <input type="text" id="navn" name="navn" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="besked">Besked:</label>
        <textarea id="besked" name="besked" rows="4"></textarea>
        
        <button type="submit">Send</button>
    </fieldset>
</form>

6. Medie Tags

Tags til billeder, video og audio:

<img src="foto.jpg" alt="Beskrivelse" loading="lazy">

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Din browser understøtter ikke video-tagget.
</video>

<audio controls>
    <source src="lyd.mp3" type="audio/mpeg">
    <source src="lyd.ogg" type="audio/ogg">
    Din browser understøtter ikke audio-tagget.
</audio>

Vigtige HTML Attributter

Globale Attributter

Disse attributter kan bruges på alle HTML elementer:

`id` Attributten

<div id="header">Unikt identifikator</div>

Skal være unik på siden
Bruges til CSS styling og JavaScript
Bruges til anker-links: <a href="#header">Gå til header</a>

`class` Attributten

<div class="container primary-content">Flere klasser</div>

Kan genbruges på flere elementer
Bruges primært til CSS styling
Kan have flere værdier adskilt af mellemrum

`style` Attributten

<p style="color: blue; font-size: 18px;">Inline styling</p>

Inline CSS styling
Bør undgås til fordel for eksterne stylesheets

`title` Attributten

<abbr title="HyperText Markup Language">HTML</abbr>

Giver ekstra information som tooltip
Forbedrer tilgængelighed

Link-specifikke Attributter

<a href="https://eksempel.com" 
   target="_blank" 
   rel="noopener noreferrer"
   download="filnavn.pdf">
   Download fil
</a>

href: Destinationen for linket
target: Hvor linket skal åbnes (_blank for nyt vindue)
rel: Forholdet mellem nuværende og linkede dokumenter
download: Foreslår at linket skal downloades

Billede Attributter

<img src="billede.jpg" 
     alt="Beskrivende tekst" 
     width="300" 
     height="200"
     loading="lazy"
     srcset="billede-small.jpg 300w, billede-large.jpg 800w"
     sizes="(max-width: 600px) 300px, 800px">

src: Billedets kilde
alt: Alternativ tekst for tilgængelighed
width/height: Dimensioner
loading: Lazy loading for performance
srcset: Responsive billeder
sizes: Størrelsesinformation for responsive billeder

Formular Attributter

<input type="email" 
       name="email" 
       id="email"
       placeholder="din@email.com"
       required
       autocomplete="email"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

type: Input type (text, email, password, etc.)
name: Navn til formular submission
id: Unik identifikator
placeholder: Hjælpetekst
required: Påkrævet felt
autocomplete: Browser autofuldførelse
pattern: Regex validering

Semantisk HTML: Betydning Over Udseende

Semantisk HTML handler om at vælge tags baseret på betydning snarere end udseende.

Dårlig Praksis (Ikke-semantisk)

<div class="header">
    <div class="title">Min Blog</div>
    <div class="nav">
        <div class="nav-item">Hjem</div>
        <div class="nav-item">Om</div>
    </div>
</div>

God Praksis (Semantisk)

<header>
    <h1>Min Blog</h1>
    <nav>
        <ul>
            <li><a href="/">Hjem</a></li>
            <li><a href="/om">Om</a></li>
        </ul>
    </nav>
</header>

Fordele ved Semantisk HTML

Tilgængelighed: Skærmlæsere kan bedre forstå indholdet
SEO: Søgemaskiner forstår strukturen bedre
Vedligeholdelse: Koden er lettere at læse og vedligeholde
Fremtidssikring: Semantisk kode er mere robust

Bedste Praksis for Tags og Attributter

1. Brug Korrekt Indlejring

<!-- Korrekt -->
<p><strong>Fed tekst</strong> i et afsnit</p>

<!-- Forkert -->
<p><strong>Fed tekst</p></strong>

2. Luk Alle Tags

<!-- Korrekt -->
<p>Dette afsnit er korrekt lukket</p>

<!-- Forkert -->
<p>Dette afsnit er ikke lukket

3. Brug Små Bogstaver

<!-- Korrekt -->
<div class="container">

<!-- Forkert (men fungerer) -->
<DIV CLASS="CONTAINER">

4. Citer Attributværdier

<!-- Korrekt -->
<img src="billede.jpg" alt="Beskrivelse">

<!-- Forkert (kan skabe problemer) -->
<img src=billede.jpg alt=Beskrivelse>

5. Brug Beskrivende Navne

<!-- Korrekt -->
<div class="article-header">
<input id="user-email" name="email">

<!-- Mindre klart -->
<div class="div1">
<input id="input1" name="e">

Tilgængelighed og Tags

ARIA Attributter

ARIA (Accessible Rich Internet Applications) attributter forbedrer tilgængelighed:

<button aria-label="Luk dialog" aria-expanded="false">
    <span aria-hidden="true">&times;</span>
</button>

<nav aria-label="Hovednavigation">
    <ul role="menubar">
        <li role="menuitem"><a href="/">Hjem</a></li>
        <li role="menuitem"><a href="/om">Om</a></li>
    </ul>
</nav>

Overskrift Hierarki

<h1>Hovedtitel</h1>
    <h2>Sektion 1</h2>
        <h3>Undersektion 1.1</h3>
        <h3>Undersektion 1.2</h3>
    <h2>Sektion 2</h2>
        <h3>Undersektion 2.1</h3>

Labels og Formularer

<!-- Eksplicit label -->
<label for="navn">Navn:</label>
<input type="text" id="navn" name="navn">

<!-- Implicit label -->
<label>
    Email:
    <input type="email" name="email">
</label>

Almindelige Fejl og Hvordan Man Undgår Dem

1. Manglende Alt-tekst

<!-- Forkert -->
<img src="logo.jpg">

<!-- Korrekt -->
<img src="logo.jpg" alt="Firmaets logo">

<!-- For dekorative billeder -->
<img src="decoration.jpg" alt="" role="presentation">

2. Forkert Brug af Overskrifter

<!-- Forkert - springer H2 over -->
<h1>Hovedtitel</h1>
<h3>Undersektion</h3>

<!-- Korrekt -->
<h1>Hovedtitel</h1>
<h2>Sektion</h2>
<h3>Undersektion</h3>

3. Div-itis (Overbrugt af Div)

<!-- Forkert -->
<div class="article">
    <div class="title">Titel</div>
    <div class="content">Indhold</div>
</div>

<!-- Korrekt -->
<article>
    <h2>Titel</h2>
    <p>Indhold</p>
</article>

4. Inline Styling

<!-- Forkert -->
<p style="color: red; font-size: 20px;">Tekst</p>

<!-- Korrekt -->
<p class="highlight">Tekst</p>
<!-- Med CSS: .highlight { color: red; font-size: 20px; } -->

Moderne HTML5 Tags

Nye Semantiske Elementer

<main>
    <article>
        <header>
            <h1>Artikel titel</h1>
            <time datetime="2024-01-15">15. januar 2024</time>
        </header>
        
        <section>
            <h2>Introduktion</h2>
            <p>Artikel indhold...</p>
        </section>
        
        <aside>
            <h3>Relaterede links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </article>
</main>

Nye Input Typer

<form>
    <input type="email" placeholder="Email">
    <input type="tel" placeholder="Telefon">
    <input type="url" placeholder="Hjemmeside">
    <input type="date">
    <input type="time">
    <input type="color">
    <input type="range" min="0" max="100">
    <input type="number" min="1" max="10">
</form>

Multimedia Elementer

<figure>
    <video controls poster="thumbnail.jpg">
        <source src="video.mp4" type="video/mp4">
        <track kind="subtitles" src="subtitles.vtt" srclang="da" label="Dansk">
    </video>
    <figcaption>Video beskrivelse</figcaption>
</figure>

Validering af HTML

Hvorfor Validere?

Sikrer korrekt syntaks
Forbedrer kompatibilitet på tværs af browsere
Hjælper med fejlfinding
Forbedrer tilgængelighed og SEO

Validerings Værktøjer

W3C Markup Validator: https://validator.w3.org/
Browser Developer Tools: F12 → Console
HTML5 Validator: https://html5.validator.nu/

Almindelige Valideringsfejl

<!-- Manglende DOCTYPE -->
<!DOCTYPE html>

<!-- Manglende lang attribut -->
<html lang="da">

<!-- Manglende meta charset -->
<meta charset="UTF-8">

<!-- Ugyldige attributter -->
<img src="billede.jpg" alt="Beskrivelse">

Performance Overvejelser

Lazy Loading

<img src="billede.jpg" alt="Beskrivelse" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

Preloading

<link rel="preload" href="vigtig-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="næste-side.html">

Optimerede Billeder

<picture>
    <source media="(min-width: 800px)" srcset="stor.webp" type="image/webp">
    <source media="(min-width: 800px)" srcset="stor.jpg">
    <source srcset="lille.webp" type="image/webp">
    <img src="lille.jpg" alt="Beskrivelse">
</picture>

Fremtidige HTML Trends

Web Components

<custom-button type="primary" size="large">
    Klik her
</custom-button>

Progressive Web Apps

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">

Accessibility Forbedringer

<button aria-describedby="help-text">
    Submit
</button>
<div id="help-text" role="tooltip">
    Klik for at sende formularen
</div>

Praktiske Øvelser

Øvelse 1: Konverter til Semantisk HTML

Konverter denne ikke-semantiske kode:

<div class="header">
    <div class="logo">Min Side</div>
    <div class="nav">
        <div><a href="/">Hjem</a></div>
        <div><a href="/om">Om</a></div>
    </div>
</div>
<div class="content">
    <div class="article">
        <div class="title">Artikel Titel</div>
        <div class="text">Artikel indhold...</div>
    </div>
</div>

Løsning:

<header>
    <h1>Min Side</h1>
    <nav>
        <ul>
            <li><a href="/">Hjem</a></li>
            <li><a href="/om">Om</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Artikel Titel</h2>
        <p>Artikel indhold...</p>
    </article>
</main>

Øvelse 2: Tilføj Tilgængelighed

Forbedre denne formular:

<form>
    <input type="text" placeholder="Navn">
    <input type="email" placeholder="Email">
    <button>Send</button>
</form>

Løsning:

<form>
    <label for="navn">Navn:</label>
    <input type="text" id="navn" name="navn" required aria-describedby="navn-help">
    <div id="navn-help">Indtast dit fulde navn</div>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Send</button>
</form>

Vigtige Erkendelser

HTML tags strukturerer indhold, mens attributter giver yderligere information
Semantisk HTML forbedrer tilgængelighed, SEO og vedligeholdelse
Korrekt indlejring og lukning af tags er afgørende
Attributter skal altid citeres og bruge beskrivende navne
Validering hjælper med at sikre korrekt og kompatibel kode
Moderne HTML5 tilbyder mange nye semantiske og funktionelle elementer

Konklusion

At mestre HTML tags og attributter er fundamentalt for webudvikling. Ved at forstå hvordan de fungerer, hvornår de skal bruges, og hvordan de bidrager til semantisk markup, kan du skabe hjemmesider der er tilgængelige, SEO-venlige og nemme at vedligeholde.

Husk at HTML handler om struktur og betydning, ikke udseende. Brug tags der bedst beskriver dit indhold, og lad CSS håndtere styling. Med denne tilgang vil dine hjemmesider være robuste, tilgængelige og fremtidssikre.

Fortsæt med at øve dig ved at eksperimentere med forskellige tags og attributter. Jo mere du bruger dem i praksis, jo mere naturligt bliver det at vælge de rigtige elementer til dit indhold.

Relaterede Artikler

Fortsæt med at læse disse relaterede artikler

Html

HTML Grundlæggende: Den Komplette Begynderguide til at Skabe Din Første Hjemmeside

Lær HTML fra bunden med denne omfattende guide, der forklarer hvad HTML er, dokumentstruktur, essentielle tags og hvordan du skaber din første hjemmeside.

HTML Dokumentstruktur Forklaret: Fra DOCTYPE til Body - En Komplet Guide

Forstå HTML dokumentstruktur i detaljer. Lær om DOCTYPE, head-sektionen, meta-tags, body-elementer og hvordan du bygger velstrukturerede HTML-dokumenter.

HTML Overskrifter og Paragraffer: Strukturer Dit Indhold Korrekt

Lær hvordan du bruger HTML overskrifter (H1-H6) og paragraffer effektivt. Forstå hierarki, tilgængelighed, SEO-fordele og bedste praksis for tekststruktur.

HTML Links og Ankre: Forbind Dit Indhold og Skab Navigation

Lær alt om HTML links og ankre. Forstå href-attributten, forskellige link-typer, anker-links, tilgængelighed og bedste praksis for navigation.

September 3, 2025

8 min læsning

Læs Artikel →

Forstå HTML Tags og Attributter: En Komplet Guide til Semantisk Markup

Forstå HTML Tags og Attributter: En Komplet Guide til Semantisk Markup

Hvad er HTML Tags?

Anatomi af et HTML Tag

Selvlukkende Tags

Hvad er HTML Attributter?

Attribut Syntaks

Eksempler på Attributter

Kategorier af HTML Tags

1. Strukturelle Tags

2. Semantiske Tags

3. Tekst og Typografi Tags

4. Liste Tags

5. Formular Tags

6. Medie Tags

Vigtige HTML Attributter

Globale Attributter

id Attributten

class Attributten

style Attributten

title Attributten

Link-specifikke Attributter

Billede Attributter

Formular Attributter

Semantisk HTML: Betydning Over Udseende

Dårlig Praksis (Ikke-semantisk)

God Praksis (Semantisk)

Fordele ved Semantisk HTML

Bedste Praksis for Tags og Attributter

1. Brug Korrekt Indlejring

2. Luk Alle Tags

3. Brug Små Bogstaver

4. Citer Attributværdier

5. Brug Beskrivende Navne

Tilgængelighed og Tags

ARIA Attributter

Overskrift Hierarki

Labels og Formularer

Almindelige Fejl og Hvordan Man Undgår Dem

1. Manglende Alt-tekst

2. Forkert Brug af Overskrifter

3. Div-itis (Overbrugt af Div)

4. Inline Styling

Moderne HTML5 Tags

Nye Semantiske Elementer

Nye Input Typer

Multimedia Elementer

Validering af HTML

Hvorfor Validere?

Validerings Værktøjer

Almindelige Valideringsfejl

Performance Overvejelser

Lazy Loading

Preloading

Optimerede Billeder

Fremtidige HTML Trends

Web Components

Progressive Web Apps

Accessibility Forbedringer

Praktiske Øvelser

Øvelse 1: Konverter til Semantisk HTML

Løsning:

Øvelse 2: Tilføj Tilgængelighed

Løsning:

Vigtige Erkendelser

Konklusion

Relaterede Artikler

HTML Grundlæggende: Den Komplette Begynderguide til at Skabe Din Første Hjemmeside

HTML Dokumentstruktur Forklaret: Fra DOCTYPE til Body - En Komplet Guide

HTML Overskrifter og Paragraffer: Strukturer Dit Indhold Korrekt

HTML Links og Ankre: Forbind Dit Indhold og Skab Navigation

`id` Attributten

`class` Attributten

`style` Attributten

`title` Attributten