Semantisk HTML5: semantik kontra div-soppa
Ersätt meningslösa omslutande div-element med semantiska element och förstå algoritmen för dokumentöversikt och rubrikhierarki.
Semantisk HTML5: semantik kontra div-soppa är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Div-soppa — problemet
Div-soppa är en sida som helt byggts av <div>- och <span>-element. Den kräver klassnamn för att kommunicera strukturen, kan inte förstås av skärmläsare utan dessa klasser och förmedlar ingen betydelse till sökmotorer.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>Det semantiska alternativet
Ersätt betydelselösa div-element med semantiska element som kommunicerar syftet. Strukturen är nu självbeskrivande och begriplig utan någon CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Algoritmen för dokumentöversikten
Rubrikelement (h1-h6) skapar en dokumentöversikt. Skärmläsare navigerar efter rubriker. Hjälpmedel meddelar översiktens nivå. Behåll en logisk hierarki: h1 för sidans titel, h2 för huvudavsnitt och h3 för underavsnitt.
<time> — Maskinläsbara datum
Elementet <time> märker upp datum och tider med ett maskinläsbart datetime-attribut. Sökmotorer förstår datum för evenemang; skärmläsare kan läsa upp formaterade datum.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
Elementet <address> omsluter kontaktinformation för närmaste article eller dokumentet. Det behöver inte vara en postadress — e-post, telefonnummer och användarnamn i sociala medier räknas också.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> och <figcaption>
<figure> omsluter fristående innehåll som bilder, diagram, kodexempel eller videor. <figcaption> tillhandahåller en bildtext som är semantiskt kopplad till figuren.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> och <cite>
<blockquote> markerar ett längre citat. Använd attributet cite för källans URL. Elementet <cite> markerar titeln på ett kreativt verk (bok, artikel eller film).
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> och <summary>
Kombinationen <details> + <summary> skapar en inbyggd accordion-/utfällningswidget utan JavaScript. Webbläsaren hanterar öppning och stängning, tangentbordsinteraktion och tillgänglighet automatiskt.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — Markerad text
<mark> representerar text som markerats för hänvisning — till exempel en träff i ett sökresultat. Den är semantiskt annorlunda än att färga text gul med CSS.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — Förkortningar
Omslut förkortningar och akronymer med <abbr> och ange den fullständiga termen i attributet title. Skärmläsare och webbläsare gör den fullständiga formen tillgänglig för användaren när pekaren hålls över texten.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>När <code><div></code> och <code><span></code> ska användas
Båda är fortfarande användbara. <div> är rätt val för en generisk blockomslutning utan semantisk betydelse — layoutbehållare och komponentrötter i React. Använd <span> för krokar för inline-styling utan semantisk betydelse.
Snabb kontroll
Vilket HTML-element skapar en inbyggd utfällningswidget som kan fällas ihop utan JavaScript?
Sammanfattning: semantisk HTML5
Ersätt div-soppa med semantiska element: header, nav, main, article, section, aside och footer. Använd time för datum, figure/figcaption för medier och details/summary för accordions samt mark för markeringar. Reservera div och span för layoutbehållare utan semantisk betydelse.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Semantisk HTML5: semantik kontra div-soppa” gratis?
Ja – hela texten till ”Semantisk HTML5: semantik kontra div-soppa” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Semantisk HTML5: semantik kontra div-soppa”?
Ersätt meningslösa omslutande div-element med semantiska element och förstå algoritmen för dokumentöversikt och rubrikhierarki. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Semantisk HTML5: semantik kontra div-soppa”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Formulärkontroller: input-typer, select och textarea
- ARIA och tillgänglighet: label, role och aria-*
- Semantisk HTML5: semantik kontra div-soppa
- Attribut för formulärvalidering