HTML – cheat sheet

Struktur, semantik, links, billeder, formularer og tilgængelighed

1. Mindste gyldige HTML-side

<!doctype html>
<html lang="da">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidens titel</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Overskrift</h1>
  <script src="app.js" defer></script>
</body>
</html>

<title> vises i browserfanen og bruges af søgemaskiner. lang="da" hjælper skærmlæsere. charset="utf-8" gør at danske bogstaver (æ, ø, å) og emojis vises korrekt – uden den kan de blive til mærkelige tegn. defer kører JavaScript, når HTML er læst.

2. Tekst og overskrifter

<h1>Sidens vigtigste overskrift</h1>
<h2>Et afsnit</h2>
<h3>Et underafsnit</h3>

<p>Et almindeligt tekstafsnit med
  <strong>vigtig</strong> og <em>fremhævet</em> tekst.</p>

<blockquote>Et længere citat.</blockquote>
<hr>
<br>
Overskrifter er struktur: Brug normalt præcis én h1, og vælg h2–h6 efter hierarki – ikke efter ønsket skriftstørrelse. Det klarer CSS.

3. Semantisk sidelay-out

<body>
  <header>
    <h1>Skolens kantine</h1>
    <nav aria-label="Hovedmenu">...</nav>
  </header>
  <main>
    <article>
      <section>
        <h2>Ugens menu</h2>
      </section>
    </article>
    <aside>Relateret indhold</aside>
  </main>
  <footer>Kontaktoplysninger</footer>
</body>

Brug de semantiske elementer, når deres betydning passer. div er kun en neutral beholder, fx til layout eller styling.

4. Lister

<ul>
  <li>Mælk</li>
  <li>Brød</li>
</ul>

<ol>
  <li>Åbn projektet</li>
  <li>Skriv koden</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Sproget, der giver siden struktur.</dd>
</dl>

ul = liste uden tal (punkter). ol = liste med tal. dl = begreb med forklaring.

5. Links og stier

<a href="om-os.html">Om os</a>
<a href="../index.html">En mappe op</a>
<a href="mailto:hej@eksempel.dk">Skriv til os</a>

<a href="https://example.com" target="_blank"
   rel="noopener noreferrer">
  Åbn eksternt site
</a>

<!-- Ankerlink: hop til element med id="kontakt" på samme side -->
<a href="#kontakt">Gå til kontakt</a>
<!-- ... længere nede på siden ... -->
<h2 id="kontakt">Kontakt</h2>

En relativ sti tager udgangspunkt i den aktuelle fil. #kontakt er et anker: browseren scroller til elementet med id="kontakt" på samme side – ingen ny side hentes. Ankeret rammer kun id, ikke class="kontakt". Skriv beskrivende linktekst – ikke kun “klik her”. Brug target="_blank" sparsomt og altid med rel.

6. Billeder, lyd og video

<img src="figs/diagram.png"
     alt="Diagram over dataflow"
     width="640" height="320">

<img src="pynt.png" alt="">

<figure>
  <img src="graf.png" alt="Salg stiger fra januar til marts">
  <figcaption>Salg i første kvartal.</figcaption>
</figure>

<video controls width="640">
  <source src="intro.mp4" type="video/mp4">
  Din browser understøtter ikke video.
</video>
alt skal altid med: Skærmlæsere læser teksten op for blinde brugere, og den vises, hvis billedet ikke kan indlæses. Er billedet rent dekorativt, brug alt="". Skriv ikke “billede af”.

7. Tabeller

<table>
  <caption>Åbningstider</caption>
  <thead>
    <tr><th scope="col">Dag</th><th scope="col">Tid</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mandag</th><td>08–16</td></tr>
    <tr><th scope="row">Tirsdag</th><td>08–16</td></tr>
  </tbody>
</table>

Tabeller er til data med rækker og kolonner – aldrig til at placere sidens layout.

8. Formular: grundmønster

<form action="/tilmeld" method="post">
  <label for="navn">Dit navn</label>
  <input id="navn" name="navn" type="text"
         required autocomplete="name">

  <label for="besked">Besked</label>
  <textarea id="besked" name="besked" rows="4"></textarea>

  <button type="submit">Send</button>
</form>

name er navnet på den værdi, som sendes. id forbinder feltet med label for. En placeholder er et eksempel – ikke en erstatning for label.

9. Inputtyper og valg

<input type="email" name="email" required>
<input type="number" name="antal" min="1" max="10">
<input type="date" name="dato">

<fieldset>
  <legend>Vælg niveau</legend>
  <input id="a" type="radio" name="niveau" value="a" checked>
  <label for="a">A</label>
  <input id="b" type="radio" name="niveau" value="b">
  <label for="b">B</label>
</fieldset>

<label><input type="checkbox" name="nyt"> Nyhedsbrev</label>

Radio-knapper med samme name er én gruppe. En checkbox kan vælges eller fravælges uafhængigt.

10. Select, knapper og validering

<label for="by">By</label>
<select id="by" name="by" required>
  <option value="">Vælg en by …</option>
  <option value="aarhus">Aarhus</option>
  <option value="odense">Odense</option>
</select>

<button type="submit">Gem</button>
<button type="button">Åbn hjælp</button>
<button type="reset">Nulstil</button>

<input type="password" minlength="8">
<input type="text" pattern="[A-Z]{2}[0-9]{4}">

required, minlength, min/max og pattern giver browser-validering. Valider også på serveren – klientvalidering kan omgås.

11. Attributter og globale attributter

<p class="intro" id="velkomst" title="Kort hjælp">
  Hej!
</p>

<button disabled>Gemmer …</button>
<input readonly value="Kan læses, ikke ændres">
<div hidden>Skjult indhold</div>
<p data-elev-id="42">Ada</p>

<div aria-live="polite" id="status"></div>

class bruges typisk af CSS og JavaScript; id skal være unikt. Gem egne data i data-*, fx element.dataset.elevId i JavaScript. Når browseren læser din HTML, bygger den en levende model af siden kaldet DOM'en – det er den, JavaScript finder og ændrer elementer i via class og id (se JavaScript cheat sheet'et).

12. Tilgængelighed – hurtige regler

13. HTML-tegn i tekst

&lt;     <
&gt;     >
&amp;    &
&quot;   "
&nbsp;   fast mellemrum

<p>Skriv &lt;h1&gt; som tekst.</p>
<!-- Dette er en kommentar -->

HTML-elementer skrives normalt med start- og sluttag: <p>tekst</p>. Nogle elementer har ingen sluttag, fx <img>, <meta>, <link>, <br> og <hr>.

14. Typiske faldgruber