Moderne webudvikling med HTML5

Dette modul klæder dig på til at forstå, hvordan HTML fungerer under motorhjelmen, og lærer dig at skrive en fejlfri grundstruktur til dine kommende webprojekter.

Lektion 1: Hvad er HTML5, og hvordan fungerer internettet?

HTML's rolle på webben
HTML5 (Hypertext Markup Language) er ikke et programmeringssprog, men et kodningssprog (markup language). Det bruges til at definere strukturen og indholdet af en webside. Du kan tænke på teknologierne bag en hjemmeside som en menneskekrop:

• HTML: Skelettet og organerne. Det bestemmer, hvor tekster, overskrifter, billeder og knapper er placeret.
• CSS: Huden, tøjet, øjenfarven og håret. Det styrer farver, layouts og design.
• JavaScript: Musklerne og nervesystemet. Det gør kroppen i stand til at bevæge sig og reagere på input (interaktivitet).

Klient-server-modellen: Hvad sker der, når du besøger en side?
Når du indtaster en adresse som www.google.dk i din browser (Chrome, Safari, Edge), sker der tre ting:

[Din Computer / Browser] ----(1. Anmodning om side)----> [Webserveren i skyen]
        (Klient)                                                │
                                                         (2. Finder filen)
                                                                │
[Din Computer / Browser] <---(3. Sender index.html)------ [Webserveren i skyen]
            

Webserveren sender en rå tekstfil (HTML-filen) tilbage over internettet til din computer. Browserens eneste opgave er at læse denne tekstfil og "tegne" (rendre) den, så den bliver til den visuelle hjemmeside, du ser på skærmen.

Lektion 2: Opsætning og grundlæggende struktur

Før vi koder, skal du opsætte dit arbejdsværktøj.

1. Kodeeditor: Download og installer den gratis Visual Studio Code (VS Code).
2. Udvidelser (Extensions): Gå til fanen "Extensions" i VS Code (venstre side) og søg efter Live Server (af Ritwick Dey). Klik på install. Denne udvidelse åbner en lokal webserver, så din browser automatisk opdaterer siden, hver gang du gemmer din kode.

Opret din første fil
Opret en tom mappe på din computer, kald den mit-første-site, og åbn den i VS Code. Opret en ny fil med navnet index.php eller index.html (hovedsiden på en hjemmeside skal altid hedde index, da webserveren automatisk leder efter dette navn).

Lektion 3: Websidens grundstruktur (skelettet)

Hver eneste professionelle webside i verden skal indeholde følgende fem grundsten. Kopier denne kode ind i din index.html fil:

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Første HTML5 Side</title>
</head>
<body>

    <h1>Hej Verden!</h1>
    <p>Dette er min allerførste rigtige HTML5-webside.</p>

</body>
</html>
            

Forklaring af de vitale byggeklodser:

Lektion 4: Head-sektionens hemmeligheder (meta-tags)

Lad os kigge nærmere på, hvad der gemmer sig inde i <head> tagget, da det er afgørende for, at din side fungerer korrekt.

• Tegnsæt (<meta charset="UTF-8">): Dette tag fortæller browseren, hvilket alfabet den skal bruge til at læse siden. UTF-8 er den globale standard. Hvis du glemmer dette tag, vil de danske bogstaver Æ, Ø og Å meget ofte blive vist som mærkelige tegn eller firkanter i browseren.
• Mobilvenlig skærm (<meta name="viewport" ...>): Dette tag er kritisk i dag. Det fortæller mobilbrowsere (som Safari på iPhone), at siden skal tilpasse sig telefonens fysiske skærmbredde (width=device-width) i stedet for at zoome helt ud på en stor desktop-version. Det er fundamentet for alt responsivt design.
• Fanetekst (<title>): Teksten indeni <title> vises ikke på selve hjemmesiden. I stedet bestemmer den, hvad der står på browserens faneblad øverst, samt hvad overskriften bliver, når din side dukker op i Googles søgeresultater.

Lektion 5: Tags, attributter og elementer (syntaksen)

For at undgå fejl skal du forstå, hvordan HTML-sproget er bygget op grammatisk. HTML består af elementer, som skabes ved hjælp af tags (vinkelparenteser):

 ┌── Start-tag            ┌── Lukke-tag (Bemærk skråstreg /)
 ▼                        ▼
<p class="introduktion">Dette er en tekst.</p>
   ▲          ▲         ▲
   │          │         └── Indholdet (Content)
   │          └─ Attribut-værdi (skal i anførselstegn)
   └── Attribut-navn
            

• Tags: Kommer næsten altid i par. Et start-tag (<p>) og et lukke-tag (</p>). Alt hvad der står imellem dem, bliver påvirket af tagget.
• Attributter: Giver ekstra information til et tag. De skrives altid inde i start-tagget (f.eks. class="..." eller lang="..."), aldrig i lukke-tagget.
• Selvlukkende tags: Enkelte tags har ikke noget indhold og har derfor ikke brug for et lukke-tag. De kaldes "empty tags" eller selvlukkende tags (f.eks. <br> for linjeskift eller <img> for billeder).

Dette modul dækker de mest almindelige elementer, du bruger til at opbygge og præsentere indholdet på en hjemmeside.

Lektion 6: Strukturering af tekst og SEO

Når du indsætter tekst på en hjemmeside, læser søgemaskiner (som Google) din kode for at forstå, hvad siden handler om. Derfor er det afgørende, at du bruger de rigtige tags til de rigtige formål.

1. Overskrifter (<h1> til <h6>)
HTML5 har seks niveauer af overskrifter. <h1> er den vigtigste, mens <h6> er den mindste.

• Den gyldne SEO-regel: Der må kun være ét enkelt <h1>-tag på hver side. Det fungerer som bogens titel. Hvis du bruger flere <h1>-tags, bliver Google forvirret over, hvad din sides hovedemne er.
• Brug <h2> til underafsnit og <h3> til under-underafsnit.

2. Paragraffer og formatering

• <p> (Paragraph): Bruges til almindelig brødtekst. Browseren laver automatisk en smule luft under hver paragraf.
• <strong>: Gør teksten fed. Fortæller samtidig søgemaskiner og skærmlæsere, at disse ord har stor vigtighed.
• <em> (Emphasis): Gør teksten kursiv. Bruges til at betone eller lægge tryk på et ord.
• <br> (Break): Laver et tvunget linjeskift uden at starte en ny paragraf. Det er et selvlukkende tag.

<h1>Alt om madlavning</h1>
<h2>1. Forberedelse i køkkenet</h2>
<p>Det er vigtigt at have det <strong>rigtige udstyr</strong> klar, før du begynder. <br> Sørg især for at have skarpe knive.</p>
            

3. Lister
Lister er geniale til at skabe overblik. HTML understøtter to primære typer:

• <ul> (Unordered List): Punktopstillet liste (med prikker).
• <ol> (Ordered List): Nummereret liste (1, 2, 3...).
• <li> (List Item): Hvert enkelt punkt på listen skal pakkes ind i et <li>-tag.

<h3>Ingredienser (Punktopstillet):</h3>
<ul>
    <li>2 æg</li>
    <li>100g mel</li>
</ul>

<h3>Fremgangsmåde (Nummereret):</h3>
<ol>
    <li>Pisk æggene sammen.</li>
    <li>Tilsæt mel gradvist.</li>
</ol>
            

Lektion 7: Links og navigering

Links er internettets bindevæv. Vi bruger anker-tagget <a> til at oprette links. Tagget kræver en href-attribut (Hypertext Reference), som fortæller browseren, hvor linket skal føre hen.

1. Eksterne og interne links

• Internt link: Linker til en anden fil i dit eget projekt (f.eks. om-os.html).
• Eksternt link: Linker til en helt anden hjemmeside (kræver fuld URL med https://).

<!-- Internt link -->
<a href="kontakt.html">Gå til vores kontaktside</a>

<!-- Eksternt link -->
<a href="https://google.dk">Besøg Google</a>
            

2. Åbning i en ny fane (target="_blank")
Hvis du linker væk fra din egen hjemmeside, vil du ofte gerne have, at brugeren ikke mister din side. Du kan tvinge browseren til at åbne linket i en ny fane med target="_blank".

• Sikkerheds-tip: Når du bruger target="_blank", bør du altid tilføje rel="noopener". Det beskytter din side mod et udbredt sikkerhedshul, hvor den nye fane kan overtage kontrollen over din originale side.

<a href="https://wikipedia.org" target="_blank" rel="noopener">Læs mere på Wikipedia (åbner i ny fane)</a>
            

HTML5 gjorde det muligt at vise billeder, videoer og lyd direkte i browseren uden brug af gamle plugins (som f.eks. Flash Player).

1. Indsættelse af billeder (<img>)
Billed-tagget er et selvlukkende tag. Det kræver to helt essentielle attributter:

• src (Source): Stien til billedfilen (lokal fil eller internet-URL).
• alt (Alternative text): En kort tekstbeskrivelse af, hvad der er på billedet.
• Hvorfor er alt vigtig? Hvis billedet ikke kan indlæses, vises denne tekst i stedet. Desuden bruges den af blinde, hvis skærmlæser læser teksten op, og af Google til at forstå billedets indhold.

<img src="billeder/kokken.jpg" alt="En professionel kok der hakker grøntsager i et køkken">
            

2. HTML5 Video (<video>)
Du kan afspille videofiler (som .mp4 eller .webm) direkte på din side. Vi bruger attributten controls til at give brugeren knapper til at afspille, pause og skrue op og ned.

<video src="videoer/madlavning.mp4" controls width="500">
    Din browser understøtter desværre ikke HTML5 video. <!-- Vises kun i tudsegamle browsere -->
</video>
            

3. Indlejring af eksternt indhold (<iframe>)
Hvis du vil vise en video fra YouTube eller et kort fra Google Maps, giver de dig typisk en <iframe> kode, du kan kopiere. En iframe fungerer som et lille vindue, der viser en helt anden hjemmeside inde på din egen side.

<!-- Eksempel på en indlejret YouTube-video -->
<iframe width="560" height="315" src="https://youtube.com" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
            

Dette modul lærer dig at skabe struktur og meningsfuld opbygning, der gør dine websider letlæselige for både computere, handicappede, søgemaskiner og almindelige brugere.

Lektion 9: Semantisk HTML5 og SEO-struktur

Før i tiden (i HTML4) pakkede man alle sektioner af en hjemmeside ind i intetsigende <div>-tags (f.eks. <div class="header"> eller <div class="footer">). Dette kaldes populært for "div-suppe". Google og skærmlæsere aner ikke, hvad indholdet indeni en <div> betyder, da det blot er en tom beholder.
Semantisk HTML5 introducerede specifikke tags, der beskriver indholdets mening og rolle på siden.

De vigtigste strukturelle tags i HTML5:

Eksempel på en professionel sidestruktur:

<body>
    <header>
        <h1>Min Madblog</h1>
        <nav>
            <ul>
                <li><a href="#">Forside</a></li>
                <li><a href="#">Opskrifter</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Verdens bedste pandekager</h2>
            <p>Her er opskriften på sprøde og lækre pandekager...</p>
        </article>
    </main>

    <aside>
        <h3>Mest læste opskrifter</h3>
        <p>1. Chokoladekage<br>2. Lasagne</p>
    </aside>

    <footer>
        <p>&copy; 2026 Min Madblog. Alle rettigheder forbeholdes.</p>
    </footer>
</body>
            

Lektion 10: Dataopsætning med tabeller

Tabeller bruges til at præsentere strukturerede data (f.eks. prislister, tidsplaner eller statistikker). Brug aldrig tabeller til at bygge dit sidelayout med – dertil bruger man CSS.

Opbygning af en tabel
En tabel bygges op af rækker (<tr>) og celler (<td>/<th>):

• <table>: Selve tabel-beholderen.
• <tr> (Table Row): En vandret række.
• <th> (Table Header): En overskriftscelle. Gør automatisk teksten fed og centreret.
• <td> (Table Data): En almindelig datacelle.

For at gøre store tabeller overskuelige for skærmlæsere, deler man dem op i <thead>, <tbody> og <tfoot>:

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Pris</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Medlemskab (Månedlig)</td>
            <td>199 kr.</td>
        </tr>
        <tr>
            <td>Oprettelsesgebyr</td>
            <td>99 kr.</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total første måned</td>
            <td>298 kr.</td>
        </tr>
    </tfoot>
</table>
            

Sammensmeltning af celler (colspan & rowspan)
Hvis en celle skal strække sig over flere kolonner (vandret) eller rækker (lodret), bruger vi attributter:

• colspan="2": Siger at cellen skal fylde 2 kolonner i bredden.
• rowspan="3": Siger at cellen skal fylde 3 rækker i højden.

Hvis du skal give brugere lov til at logge ind, oprette en profil, skrive en besked eller uploade en fil, bruger du en formular (<form>).

1. Formular-beholderen
Tagget <form> skal indeholde to vigtige attributter:

• action: Den URL/fil på serveren (f.eks. et PHP-script), som skal modtage dataene, når der trykkes send.
• method: Hvordan data sendes. Typisk POST (skjult og sikkert til passwords/data) eller GET (synligt i URL'en, godt til søgninger).

2. Labels og inputs (Tekst, e-mail, password)
Hvert inputfelt skal altid parres med et <label> tag. Det fortæller brugeren (og skærmlæsere), hvad der skal stå i feltet. Vi kobler dem sammen ved at lade label-taggets for-attribut matche input-taggets id-attribut.

<form action="behandl_data.php" method="POST">
    <!-- E-mail felt med indbygget HTML5 validering (type="email") -->
    <label for="bruger-email">E-mailadresse:</label>
    <input type="email" id="bruger-email" name="email" placeholder="navn@example.dk" required>
    
    <br><br>

    <!-- Password felt der automatisk skjuler tegnene (type="password") -->
    <label for="bruger-kode">Adgangskode:</label>
    <input type="password" id="bruger-kode" name="password" required>
    
    <br><br>

    <button type="submit">Log ind</button>
</form>
            

3. Avancerede inputtyper, valgmuligheder og validering
HTML5 tilføjede en lang række fantastiske input-typer, som automatisk giver brugeren de rigtige værktøjer (f.eks. en kalender på mobilen):

• type="date": Åbner en indbygget kalender.
• type="range": Laver en skydeknap (slider) med attributterne min og max.
• <textarea>: Til store tekstblokke (f.eks. en kommentar eller besked).
• type="checkbox": Afkrydsningsfelt (hvor man kan vælge flere ting).
• type="radio": Radioknapper (hvor man kun kan vælge én ting ud af en gruppe – skal dele samme name).

HTML5 validering (sikkerhed direkte i browseren)
Du kan tvinge brugeren til at udfylde felter korrekt uden brug af JavaScript ved at tilføje validerings-attributter:

• required: Feltet skal udfyldes. Browseren stopper afsendelsen, hvis det er tomt.
• placeholder: En lys hjælpetekst inde i feltet, der forsvinder, når man taster.
• min / max: Sætter tal- eller datogrænser.

Dette modul klæder dig på til at levere websider efter moderne standarder for SEO, deling på sociale platforme og tilgængelighed for handicappede.

Lektion 12: Webtilgængelighed (Accessibility / a11y)

Når du bygger hjemmesider, skal de kunne bruges af alle – herunder blinde, svagtseende eller motorisk udfordrede brugere. Blinde bruger en skærmlæser (screen reader), som er et softwareprogram, der læser kildekoden og indholdet højt.

1. Korrekt brug af fokus-rækkefølge (tabindex)
Brugere, der ikke kan bruge en mus, navigerer rundt på en hjemmeside ved hjælp af Tab-tasten på tastaturet. Browseren flytter automatisk fokus mellem interaktive elementer som <a>, <button> og <input>.

• tabindex="0": Gør et element (f.eks. et unikt designet ikon), som normalt ikke er interaktivt, tilgængeligt via Tab-tasten i den naturlige rækkefølge.
• tabindex="-1": Fjerner elementet fra tastaturnavigationen, men tillader, at det kan fokuseres via JavaScript.
• Gylden regel: Undgå at bruge positive tal (som tabindex="1"), da det ødelægger browserens naturlige logik og skaber forvirring.

2. Introduktion til WAI-ARIA attributter
Hvis dine semantiske HTML5-tags ikke er nok til at forklare en kompleks komponent, bruger vi ARIA (Accessible Rich Internet Applications) attributter til at give ekstra kontekst til skærmlæsere.

• aria-label: Giver en usynlig tekstbeskrivelse til et element. Perfekt til knapper, der kun indeholder et ikon (f.eks. et kryds-ikon til at lukke en menu).
• aria-hidden="true": Fortæller skærmlæseren, at den fuldstændig skal ignorere og springe dette element over (genialt til dekorative ikoner eller baggrundsgrafik, der ikke har betydning for teksten).

<!-- Skærmlæseren læser "Luk menu" op, i stedet for blot at sige "Knap, X" -->
<button aria-label="Luk menu" class="luk-knap">
    <span aria-hidden="true">X</span>
</button>
            

Lektion 13: HTML5 Grafik og data-attributter

HTML5 gjorde det muligt at integrere visuelle elementer direkte i kildekoden uden eksterne plugins.

1. Vektorgrafik med <svg>
SVG (Scalable Vector Graphics) er kodebaseret grafik. Fordi det er bygget af matematiske formler (linjer og cirkler) i stedet for pixels, kan et SVG-ikon skaleres op til biografstørrelse uden nogensinde at blive sløret eller tabe kvalitet. Du kan indsætte SVG direkte i din HTML:

<!-- En simpel, skalerbar blå cirkel kodet direkte i HTML -->
<svg width="100" height="100" version="1.1" xmlns="http://w3.org">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
            

2. Brugerdefinerede data-attributter (data-*)
Du kan gemme dine egne skjulte informationer direkte på et HTML-element ved at bruge data- præfikset. Det bruges flittigt, når du skal sende specifikke data (som et produkt-id eller en pris) videre til dit JavaScript- eller PHP-system uden at vise det på skærmen.

<!-- Vi gemmer et produkt-ID og en priskategori direkte på listepunktet -->
<li data-produkt-id="98432" data-pris="premium">Bærbar Computer</li>
            

Lektion 14: Søgemaskineoptimering (SEO) og sociale medier

For at din hjemmeside kan findes på Google, og for at den ser flot ud, når folk deler et link til den på f.eks. Facebook eller LinkedIn, skal vi have de rette meta-tags placeret inde i din sides <head>.

1. SEO meta-tags
Google bruger dit title-tag, men det næstvigtigste element er din metabeskrivelse (meta description). Det er den uddybende tekst, der vises under din overskrift på Googles søgeside.

<head>
    <title>Nemme Hverdagsretter - Opskrifter til en travl uge</title>
    <meta name="description" content="Find over 100 hurtige, sunde og nemme opskrifter på hverdagsmad, der kan laves på under 30 minutter. Perfekt til børnefamilier.">
</head>
            

2. Open Graph meta-tags (sociale medier)
Når du indsætter et link i et opslag på sociale medier, danner platformen automatisk et flot "kort" med et billede, en titel og en beskrivelse. Du styrer præcis, hvilket billede og hvilken tekst der vises, ved at bruge Open Graph (og:) tags:

<!-- Hvilken type indhold er det -->
<meta property="og:type" content="article">
<!-- Overskriften på det sociale kort -->
<meta property="og:title" content="De 5 hemmeligheder bag den perfekte pandekage">
<!-- Beskrivelsen på kortet -->
<meta property="og:description" content="Læs vores komplette guide til at opnå sprøde kanter og den helt rette konsistens hver gang.">
<!-- Linket til det specifikke billede, der skal vises som stort preview-billede -->
<meta property="og:image" content="https://minmadblog.dk">
<!-- Selve URL'en til din artikel -->
<meta property="og:url" content="https://minmadblog.dk">
            

Stort tillykke! Du har nu gennemført det fulde fundament i HTML5. Du har lært at bygge strukturerede, semantiske, responsive og tilgængelige websider helt fra bunden.

Den sidste test: W3C validering

Før du udgiver en hjemmeside, bør du altid tjekke, om du har lavet sjuskefejl (f.eks. glemt at lukke et tag eller stavet til en attribut forkert).

• Besøg W3C Markup Validation Service (den officielle dommer for webstandarder) på validator.w3.org.
• Her kan du uploade din index.html fil. Værktøjet scanner din kode og fortæller dig sort på hvidt, om dit kildeskrift er fejlfrit og følger de globale regler.

Hvad skal du lære nu?

Nu hvor du mestrer HTML5, har du det perfekte skelet. Dine næste skridt som webudvikler er:

1. CSS: Lær at give dit HTML-skelet farver, layouts (Flexbox/Grid) og flotte typografier.
2. JavaScript: Lær at gøre din HTML interaktiv, så du kan reagere på klik og hente live-data i baggrunden.
3. PHP / Databaser: Lær at gøre dine sider dynamiske, så dine formularer kan gemme data permanent i et rigtigt system.