Webbutveckling 1 · område 2 · guide

HTML – innehåll och struktur

Områdets uppslagsbok. Allt från lektion 10 till 14 står här, i den ordning det gås igenom. Var du borta en lektion är det hit du går, och slår du i den under ett arbetspass hittar du rätt genom innehållsförteckningen eller sökrutan i felsökningen.

Exemplen är hämtade ur områdets förlaga, sajten om Vikstads naturreservat, som du får se på lektionerna. Kraven guiden stödjer står i Projekt 1.

Vad du kan efter guiden

• Skriva ett komplett HTML-dokument från grunden, utan mall.
• Förklara varför åäö ibland blir konstiga tecken, och laga det.
• Välja semantiskt element efter vad innehållet är, inte efter hur det ska se ut.
• Länka mellan dina egna sidor, till andra sajter och till ett ställe längre ned på samma sida.
• Lägga in bilder med alt-text som fungerar för den som inte ser bilden.
• Bygga en tabell som går att läsa upp, och ett formulär där varje fält har en etikett.
• Validera en sida, läsa felmeddelandet och rätta felet.

1. Dokumentets grund

Element, tagg och attribut

Tre ord som används om vartannat men betyder olika saker.

En tagg är det som står mellan vinkelparenteser: <p> är en starttagg och </p> är en sluttagg. Ett element är starttaggen, innehållet och sluttaggen tillsammans. Ett attribut står inne i starttaggen och säger något extra om elementet.

<a href="stigar.html">Stigarna</a>

Här är a elementet, <a ...> och </a> är taggarna, href är ett attribut och stigar.html är attributets värde. Attributvärden skrivs inom citattecken.

Några element har inget innehåll och därför ingen sluttagg. img, meta, link, br och hr är de du kommer att möta. Det finns inget </img>.

Dokumentets fyra delar

Varje HTML-sida du skriver i den här kursen har samma yttre skelett:

<!doctype html>
<html lang="sv">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sidans namn</title>
  </head>

  <body>
    <p>Allt som syns på sidan ligger här.</p>
  </body>

</html>

<!doctype html> är inte ett element utan en instruktion till webbläsaren: tolka det här som modern HTML. Utelämnar du den byter webbläsaren till ett gammalt läge där saker beter sig annorlunda, och validatorn stannar direkt.

<html lang="sv"> omsluter hela dokumentet. lang säger vilket språk sidan är skriven på. Det spelar roll för skärmläsare, som annars läser svensk text med engelskt uttal, och för webbläsarens stavningskontroll och översättningsfunktion.

<head> är information om sidan. Ingenting i head syns på sidan. <body> är sidan – allt som syns ligger där.

Så här börjar stigar.html i förlagan. Sidans namn först, sajtens namn efter, så att fliken går att läsa även när den är smal:

<!doctype html>
<html lang="sv">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stigarna – Vikstads naturreservat</title>
  </head>

2. Teckenkodning och entiteter

Varför åäö går sönder

Datorn lagrar text som siffror. En teckenkodning är tabellen som säger vilken siffra som betyder vilket tecken. Skriver du filen med en tabell och webbläsaren läser den med en annan blir det fel – och det är alltid åäö som drabbas först, eftersom a, b och c ligger likadant i nästan alla tabeller.

Så här ser det ut när det gått fel:

Näckrosmossen är blöt året om

Två tecken i stället för ett, varje gång ett svenskt tecken skulle stått. Det betyder att filen är sparad som UTF-8 men läses som något annat. Lösningen är en enda rad, och den ska ligga först i head:

<meta charset="utf-8">

UTF-8 är teckenkodningen som rymmer alla språks tecken. Codespaces sparar dina filer som UTF-8 automatiskt. Det du behöver göra är att tala om det för webbläsaren. Ligger raden längre ned i head har webbläsaren redan hunnit gissa fel på det som stod före den.

Entiteter

Vissa tecken betyder något särskilt i HTML och kan därför inte skrivas rakt av. Vill du visa dem som text skriver du dem som en entitet: ett och-tecken, ett namn och ett semikolon.

<p>Så här skriver du ett stycke: &lt;p&gt;Text&lt;/p&gt;</p>

Sidan visar <p>Text</p> som text i stället för att skapa ett stycke.

I stigar.html används tankstreck i löpande text:

<p>Spängerna är hala när det regnar &ndash; gå försiktigt, särskilt med barn.</p>

3. Semantiska element

Ett semantiskt element säger vad innehållet är, inte hur det ska se ut. nav betyder "det här är navigation". div betyder ingenting alls.

Det spelar roll för tre grupper: skärmläsare, som kan hoppa direkt till main; sökmotorer, som förstår vad som är huvudinnehåll; och du själv om tre veckor, när du letar efter var något låg.

Utan CSS syns knappt någon skillnad på sidan. Det är därför området ligger före CSS – du väljer element efter innebörd, inte efter utseende, eftersom utseende ännu inte finns.

<body>

  <header>
    <p>Sajtens namn</p>
    <nav>...</nav>
  </header>

  <main>
    <h1>Sidans rubrik</h1>
    <section>...</section>
  </main>

  <footer>
    <p>Vem som gjort sidan.</p>
  </footer>

</body>

Så ser det ut i förlagan, med en section per djurgrupp och en article per art. Rubriknivåerna följer nästlingen:

<section id="faglar">
  <h2>Fåglar</h2>

  <article>
    <h3>Trana</h3>
    <p>Ett till två par häckar på mossen varje år.</p>
  </article>

  <article>
    <h3>Fiskgjuse</h3>
    <p>Ett par häckar i en tall vid Skogsleden.</p>
  </article>

</section>

4. Text och listor

Rubriker

h1 till h6 är rubriknivåer, inte textstorlekar. De bygger sidans innehållsförteckning.

• En h1 per sida. Den säger vad sidan handlar om.
• Hoppa inte över nivåer. Efter h2 kommer h3, aldrig h4.
• Välj nivå efter var innehållet hör hemma, inte efter hur stor texten blir. Storleken ändrar du med CSS i område 3.

<h1>Djur och växter</h1>
  <h2>Fåglar</h2>
    <h3>Trana</h3>
    <h3>Fiskgjuse</h3>
  <h2>Däggdjur</h2>

Indraget ovan är bara för att visa strukturen – rubriker nästlas inte inuti varandra i koden.

Stycken och betoning

<p>Ett stycke text. Radbrytningar i koden syns inte på sidan.</p>

Vill du ha ett nytt stycke skriver du ett nytt p. Använd inte <br> för att skapa luft – br är för radbrytningar som hör till innehållet, som i en adress eller en diktrad.

Välj strong och em när betoningen betyder något, b och i när det bara är utseende. En skärmläsare läser strong med tryck och b som vanlig text.

Tre sorters listor

ul – punktlista. Ordningen spelar ingen roll.

<ul>
  <li>Du får plocka bär och matsvamp.</li>
  <li>Du får inte göra upp eld utanför de två eldstäderna.</li>
</ul>

ol – numrerad lista. Ordningen spelar roll: steg, placeringar, instruktioner. Numren skriver du inte själv – webbläsaren räknar.

<ol>
  <li>Kör Vikstadsvägen till dess slut.</li>
  <li>Parkera på grusplanen.</li>
  <li>Följ skylten mot fågeltornet.</li>
</ol>

dl – beskrivningslista. Par av term och förklaring. En ordlista, ett antal begrepp som ska förklaras. dt är termen, dd är beskrivningen.

<dl>
  <dt>Rundsileshår</dt>
  <dd>Köttätande, ungefär fem centimeter bred.</dd>

  <dt>Tuvull</dt>
  <dd>De vita ulltussarna över mossen i juni.</dd>
</dl>

5. Länkar och sökvägar

<a href="stigar.html">Stigarna</a>

href säger vart länken går. Texten mellan taggarna är det du klickar på.

Relativa och absoluta sökvägar

En relativ sökväg utgår från filen du står i. En absolut sökväg börjar med https:// och pekar ut en adress på internet.

Ankarlänkar

En länk kan peka på ett ställe längre ned på samma sida. Elementet du vill nå får ett id, och länken skriver samma namn med # framför.

<a href="#vaxter">Växter på mossen</a>

<section id="vaxter">
  <h2>Växter på mossen</h2>
</section>

Ett id får finnas en gång per sida. Två element med samma id är ett valideringsfel, och länken landar på det första. Ankarlänkar fungerar även mellan sidor: besok.html#kontaktformular öppnar besok.html och hoppar direkt till formuläret.

Länktexter som säger vart de går

Skärmläsare kan lista sidans alla länkar. En lista med sju "läs mer" är obrukbar.

<!-- Fungerar inte -->
<p>Vill du veta mer om föreskrifterna, <a href="...">klicka här</a>.</p>

<!-- Fungerar -->
<p>Läs mer om vad som gäller i naturreservat hos
  <a href="https://www.naturvardsverket.se/">Naturvårdsverket</a>.</p>

Länktexten ska gå att förstå lyft ur meningen.

Navigationen

En navigation är en lista med länkar, inuti nav. Länkarna ligger i en ul för att de är en lista. Utan CSS syns punkterna, och det är rätt så länge.

<nav aria-label="Huvudmeny">
  <ul>
    <li><a href="index.html" aria-current="page">Start</a></li>
    <li><a href="stigar.html">Stigarna</a></li>
    <li><a href="djur-och-vaxter.html">Djur och växter</a></li>
    <li><a href="besok.html">Planera besöket</a></li>
  </ul>
</nav>

aria-label på nav ger navigationen ett namn. Har sidan flera nav – huvudmeny och en innehållsförteckning – behövs det för att skilja dem åt.

Länkar som inte går till en sida:

<a href="mailto:parkenheten@vikstad.example">parkenheten@vikstad.example</a>
<a href="tel:055512345">0555-123 45</a>

6. Bilder

<img src="bilder/karta.svg" alt="Karta över reservatet med tre markerade stigar.">

img har ingen sluttagg. src är sökvägen till bildfilen, alt är texten som ersätter bilden.

Alt-texten

alt läses upp av skärmläsare och visas om bilden inte laddas. Den är ett krav på varje bild i uppgiften. Skriv vad bilden visar, inte vad den heter:

<!-- Säger ingenting -->
<img src="bilder/trana.svg" alt="trana.svg">
<img src="bilder/trana.svg" alt="bild">

<!-- Säger något -->
<img src="bilder/trana.svg"
     alt="En trana i profil. Fågeln är grå med lång hals, långa ben och en röd
          fläck på hjässan.">

Skriv inte "bild på" eller "bilden visar" – att det är en bild vet skärmläsaren redan. Är bilden rent dekorativ och tillför ingenting skriver du alt="", tomt men närvarande. Då hoppar skärmläsaren över den. Att utelämna alt helt är alltid fel.

width, height och figure

<img src="bilder/karta.svg" width="640" height="400" alt="...">

Måtten anges utan enhet och i bildens verkliga pixelstorlek. De styr inte utseendet – det gör CSS senare – utan låter webbläsaren reservera rätt plats innan bilden laddats, så att texten inte hoppar när den kommer.

Hör det en bildtext till bilden, håll ihop dem:

<figure>
  <img src="bilder/sileshar.svg" width="480" height="360"
       alt="En rundsileshår sedd uppifrån. Bladen bildar en rosett.">
  <figcaption>Rundsileshår fångar insekter med klibbiga droppar på bladen.</figcaption>
</figure>

figcaption ska ligga direkt inuti figure, som första eller sista barn. Bildtexten och alt-texten säger olika saker: alt-texten beskriver vad man ser, bildtexten säger något om det. Skriv inte samma sak två gånger.

Formaten

Tumregel: fotografi → JPG eller WebP. Ritad figur → SVG. Bilderna i förlagan är SVG, eftersom de är ritade figurer – en karta, en fågel, en växt. En karta som SVG är skarp både på mobilen och på projektorn.

Bilder från kameran är ofta fyra megabyte. Det är för mycket för en webbsida. Skala ner till den bredd den faktiskt visas i, ungefär 1600 pixlar räcker gott, innan du lägger in den.

7. Ljud och video

<audio src="ljud/tranrop.mp3" controls></audio>

<video src="film/mossen.mp4" width="640" height="360" controls></video>

controls ger uppspelningsknapparna. Utan det syns ingen spelare alls. Sätt inte autoplay – ljud som startar av sig självt är ett av de säkraste sätten att få någon att stänga en sida.

Undertexter med track

Video utan undertext utestänger den som inte hör. track lägger till en textfil som visas i takt med filmen:

<video width="640" height="360" controls>
  <source src="film/mossen.mp4" type="video/mp4">
  <track src="film/mossen.vtt" kind="captions" srclang="sv" label="Svenska" default>
  <p>Din webbläsare kan inte spela upp video.
    <a href="film/mossen.mp4">Ladda ner filmen</a> i stället.</p>
</video>

source i stället för src gör att du kan erbjuda flera format. Texten längst ned visas bara om webbläsaren inte klarar video alls.

Undertextfilen är en vanlig textfil med ändelsen .vtt:

WEBVTT

00:00:00.000 --> 00:00:04.000
Näckrosmossen är åtta meter djup på mitten.

00:00:04.000 --> 00:00:09.500
Den har byggts upp sedan istiden, en millimeter om året.

Ett transkript – hela innehållet i text under spelaren – är ännu bättre. Det går att söka i, att läsa snabbt, och det fungerar för den som varken hör eller kan spela upp filmen.

8. Tabeller

En tabell är för data som hör ihop i rader och kolumner. Tidtabeller, priser, jämförelser, mätvärden. En tabell är aldrig för layout – vill du ha två saker bredvid varandra löser du det med CSS i område 3.

<table>
  <caption>De tre markerade stigarna</caption>
  <thead>
    <tr>
      <th scope="col">Stig</th>
      <th scope="col">Längd</th>
      <th scope="col">Tid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Mosseleden</th>
      <td>2,4 km</td>
      <td>1 timme</td>
    </tr>
    <tr>
      <th scope="row">Strandleden</th>
      <td>4,1 km</td>
      <td>1 timme 30 minuter</td>
    </tr>
  </tbody>
</table>

scope

scope säger vad en rubrikcell är rubrik för. Utan den vet en skärmläsare inte om th-cellen hör till kolumnen eller raden.

• scope="col" – rubrik för kolumnen under sig.
• scope="row" – rubrik för raden bredvid sig.

Har tabellen rubriker åt båda håll, som exemplet ovan, blir varje datacell entydig: en skärmläsare kan säga "Strandleden, Längd, 4,1 km" i stället för bara "4,1 km".

9. Formulär

label och for – den viktigaste regeln

<label for="namn">Namn</label>
<input type="text" id="namn" name="namn">

for på etiketten ska vara exakt samma sträng som id på fältet. Då händer tre saker: skärmläsaren läser upp etiketten när fältet får fokus, klick på texten sätter markören i fältet, och kryssrutor blir mycket lättare att träffa.

id och name är olika saker som ofta får samma värde. id är sidans interna identitet och kopplar ihop etikett och fält. name är namnet som skickas till servern.

Fälttyper

Kryssrutor och alternativknappar har etiketten efter fältet, till skillnad från övriga:

<input type="checkbox" id="kikare" name="behov" value="kikare">
<label for="kikare">Vi vill låna kikare</label>

Alternativknappar hör ihop genom att ha samma name. Det är det som gör att bara en i taget kan väljas:

<input type="radio" id="svar-epost" name="svarssatt" value="epost" checked>
<label for="svar-epost">E-post</label>

<input type="radio" id="svar-sms" name="svarssatt" value="sms">
<label for="svar-sms">SMS</label>

Samma name, olika id. Glömmer du det kan användaren kryssa i båda.

select och textarea

<label for="tur">Inriktning</label>
<select id="tur" name="tur">
  <option value="allman">Allmän tur om reservatet</option>
  <option value="faglar">Fågeltur, start klockan sex</option>
</select>

<label for="meddelande">Övrigt</label>
<textarea id="meddelande" name="meddelande" rows="6" cols="40"></textarea>

textarea har alltid en sluttagg, direkt efter starttaggen om fältet ska vara tomt. Allt du skriver emellan hamnar som förifylld text i rutan – även mellanslag och radbrytningar.

fieldset och legend

<fieldset>
  <legend>Dina uppgifter</legend>

  <p>
    <label for="namn">Namn</label>
    <input type="text" id="namn" name="namn" autocomplete="name" required>
  </p>

  <p>
    <label for="epost">E-postadress</label>
    <input type="email" id="epost" name="epost" autocomplete="email" required>
  </p>
</fieldset>

legend ska vara första elementet inuti fieldset. För alternativknappar är fieldset inte bara snyggt utan nödvändigt: utan en legend hör skärmläsaren "E-post" och "SMS" utan att få veta vad frågan var.

Krav och hjälp

autocomplete="name", autocomplete="email" och autocomplete="tel" är de du behöver. De sparar tid för alla, och mycket tid för den som har svårt att skriva.

<button type="submit">Skicka anmälan</button>

Skriv vad knappen gör. "Skicka anmälan" är bättre än "Skicka", som är bättre än "OK".

10. Validering och webbläsartest

W3C:s validator läser din HTML och säger vad som inte följer standarden. Den finns på validator.w3.org och kan ta din kod på tre sätt:

• Address – klistra in din publicerade adress. Enklast när sajten ligger uppe.
• File Upload – ladda upp filen från din dator.
• Direct Input – klistra in koden. Fungerar innan sajten är publicerad.

Validera varje sida för sig. Validatorn läser ett dokument i taget och följer inte dina länkar.

Validatorn skiljer på tre sorter: Error är fel och ska bort. Warning är något som troligen är fel. Info är en upplysning. Kravet på E är noll Error, på C noll av båda.

De vanligaste felen

Testa i två webbläsare

Öppna sajten i två olika webbläsare – Chrome och Firefox, eller Edge och Firefox. De tolkar korrekt HTML likadant, men de har olika standardstil: rubrikstorlekar, formulärfält och datumväljare ser olika ut.

Det är därför det ingår i uppgiften. Ser något helt annorlunda ut i den ena är det nästan alltid ett strukturfel som råkar visa sig i just den webbläsaren.

Testa också med enbart tangentbord. Tab flyttar framåt, Shift + Tab bakåt, Enter följer en länk. Kommer du åt alla länkar och alla fält, och i en ordning som följer sidan?

11. Ta det längre

För dig som har ska-kraven på plats och siktar mot C eller A.

• Språkbyten mitt i texten. Ett engelskt uttryck i svensk text kan märkas ut, så att skärmläsaren byter uttal: <span lang="en">responsive design</span>.
• Tid som går att läsa maskinellt. <time datetime="2026-09-07">7 september</time>. Datumet i datetime skrivs alltid som år-månad-dag.
• Förkortningar. <abbr title="HyperText Markup Language">HTML</abbr> visar förklaringen när man pekar på ordet.
• Rubriker på flera navigationer. Har sidan både en huvudmeny och en innehållsförteckning behöver båda ett aria-label.
• Tabeller med rubriker åt båda håll. scope="col" på kolumnrubrikerna och scope="row" på första cellen i varje rad.
• Formulär som hjälper till. required på det som verkligen krävs, pattern där formatet är bestämt, autocomplete på namn, e-post och telefon.
• Ankarlänkar på långa sidor. En innehållsförteckning högst upp med länkar till sidans egna avsnitt.
• Motivera dina bildformat. Kunna säga varför just den bilden är SVG och den andra JPG, och vad som hade blivit sämre med det omvända.

12. Felsökning

13. Snabbreferens

14. Ordlista

Klicka på en rad för att visa betydelsen, eller träna på orden med knapparna nedan.