Innehållshierarki & struktur

Innehållet är en trappa

När du skriver en text tänker du naturligt på vad som är en rubrik, vad som är ett stycke och vad som är en lista. I HTML gör du precis samma sak, fast med taggar istället för ord.

HTML handlar inte om att bestämma utseende, färg eller storlek på texten. Du skriver kod för att berätta för webbläsaren vad informationen faktiskt är. Om din kod beskriver innehållet på ett logiskt sätt kommer din webbsida att fungera för alla: från Google-roboten som indexerar din sida till användaren som navigerar utan att kunna se skärmen.

Konkret handlar det om tre saker: sätt rätt rubriknivå, lägg varje stycke i ett <p>, och gör listor till listor.

Alla de här taggarna är semantiska, vilket betyder att de beskriver innehållets mening snarare än dess utseende. Vi styr utseendet med CSS senare.

Rubriker

För att förstå varför rubriker är viktiga kan du göra ett enkelt tankeexperiment: Tänk dig att du ska läsa en nyhetssajt, men du kan inte se skärmen. Hur gör du för att hitta det du letar efter?

Personer med visuella nedsättningar använder ett verktyg som kallas skärmläsare Skärmläsare Programvara som läser upp HTML-strukturen och texten på en webbsida för användare med synnedsättning. En korrekt semantisk struktur och rubrikhierarki är avgörande för att skärmläsaren ska kunna navigera smidigt. Se: Innehållshierarki & struktur . Det är en programvara som läser upp källkoden och texten på sidan. Skärmläsaren har en funktion som låter användaren lyssna på en snabb “innehållsförteckning” genom att hoppa direkt från rubrik till rubrik. Om du hoppar från en huvudrubrik (<h1>) direkt till en jätteliten underrubrik (<h3>) skapar du ett logiskt hål. Det blir som en bok där kapitel 2 helt saknas.

Regler för rubriker

1. En enda <h1> per sida: Detta är hela webbsidans huvudtitel. Det ska bara finnas en.
2. Håll ordningen: Gå alltid stegvis nedåt i trappan. Efter <h1> kommer <h2>. Under en <h2> använder du <h3>.
3. Använd inte rubriker som dekoration: Välj aldrig en <h3> bara för att du vill att en text ska bli fet eller få en viss storlek. Det löser vi med CSS senare.

Så här bygger du en korrekt rubrikhierarki:

<h1>Min Portfolio</h1>
<h2>Mina Projekt</h2>
<h3>Gutenberg-projektet</h3>
<h3>Framtida projekt</h3>
<h2>Om mig</h2>

Paragrafer, en tanke per stycke

När du skriver en text delar du naturligt upp den i stycken för att göra den lättare att läsa. Varje gång du byter ämne, eller påbörjar en ny sammanhängande tanke, skapar du ett nytt stycke.

I HTML använder du <p>-taggen (Paragraph) för detta. Webbläsaren ignorerar helt om du trycker på Enter i din kodeditor för att göra radbrytningar. Du måste explicit tala om var stycket börjar och slutar med taggar.

Så här delar du upp två olika tankar i varsitt stycke:

<p>Webbutveckling handlar om att kommunicera med kod.</p>
<p>Strukturen berättar för webbläsaren vad som är viktigt på sidan.</p>

Ibland vill du byta rad utan att starta ett nytt stycke. Det händer när informationen hör ihop men ska visas på flera rader, som en postadress eller en dikt. Till det använder du taggen <br /> (Break).

<p>
    Storgatan 12<br />
    123 45 Umeå
</p>

Listor

Allt innehåll som är en serie av relaterade saker ska märkas upp som en lista. Det kan vara en inköpslista, stegen i ett recept eller länkarna i en navigationsmeny.

Du väljer listtyp utifrån om ordningen spelar roll eller inte:

• <ul> (Unordered list): En punktlista där ordningen inte spelar någon roll.
• <ol> (Ordered list): En numrerad lista för saker som måste ske i ordning, till exempel instruktioner.

Varje sak inuti listan måste omslutas av en <li>-tagg (List item). En lista får bara ha <li>-element som direkta barn.

Så här ser det ut i kod:

<ul>
    <li>HTML-struktur</li>
    <li>CSS-styling</li>
    <li>Javascript-logik</li>
</ul>

Min Portfolio<br /><br />

Det här är min plats på webben. Jag håller på att lära mig webbutveckling.<br /><br />

Projekt<br />
Gutenberg-projektet<br />
Framtida projekt 2<br />
Framtida projekt 3<br /><br />

Om mig<br /><br />
Jag heter [Ditt namn] och studerar webbutveckling.

Testa strukturen med WAVE

Validatorn kontrollerar att din HTML är korrekt skriven. Men korrekt kod kan ändå ha en trasig struktur: en rubriktrappa som hoppar över steg är giltig HTML men förvirrande för den som navigerar med skärmläsare. För det behövs ett annat verktyg, WAVE (Web Accessibility Evaluation Tool). Det visar hur en maskin uppfattar din sida: rubriker, listor och strukturen bakom det visuella.

WAVE finns som webbläsartillägg för Chrome, Edge och Firefox. Installera det från wave.webaim.org/extension. Du behöver tillägget för att kunna testa lokala sidor, webbversionen på wave.webaim.org når bara publicerade sajter.