HTML Academy · Lektion

Elementen span och div

Använd generiska inline- och blockcontainrar som krokar för formatering.

Lektion 4 av 413 steg

Elementen span och div är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Generiska behållare

HTML har två generiska, semantiskt neutrala behållarelement:

<div> — en behållare på blocknivå
<span> — en inline-behållare

De har ingen egen betydelse — de finns enbart som krokar för styling och skript.

div-elementet

<div> är en behållare på blocknivå — den skapar en ny rad före och efter sig:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

span-elementet

<span> är en inline-behållare — den flödar tillsammans med texten:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

När du ska använda div i stället för semantiska element

Innan du väljer <div> bör du kontrollera om ett semantiskt element passar:

Sidhuvud → <header>
Navigering → <nav>
Huvudinnehåll → <main>
Blogginlägg → <article>
Sidopanel → <aside>
Sidfot → <footer>

Använd <div> endast när inget semantiskt element passar.

Divitis

Divitis — att överanvända <div> för allt:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

CSS-krokar med class och id

Både <div> och <span> används med attributen class eller id som mål för CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Mål för JavaScript

<div> och <span> kan också vara mål för JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Regler för kapsling

Regler för kapsling av generiska behållare:

<div> kan innehålla <div> och <span>
<span> kan endast innehålla <span> och inline-innehåll
Placera inte <div> inuti <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div för layout

Vanligt layoutmönster med div-element:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span för inline-styling

Vanliga mönster för inline-styling:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div och span är osynliga

Som standard är <div> och <span> osynliga omslag:

<div> lägger inte till någon visuell styling utöver blockvisning
<span> lägger inte till någon styling alls
Allt utseende kommer från den CSS du använder
Detta gör dem till perfekta neutrala behållare

Snabbkontroll

Vilket element bör du använda för att styla ett enskilt ord i ett stycke?

Besvara frågan i den interaktiva lektionen

Sammanfattning: span och div

Det viktigaste om generiska behållare:

<div> — blocknivå, grupperar element för layout
<span> — inline, riktar in sig på textdelar för styling
Båda är semantiskt neutrala — de tillför ingen betydelse
Föredra semantiska HTML5-element när de passar
Använd class och id för att koppla dem till CSS och JavaScript

Gratis att börja

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: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Elementen span och div” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Elementen span och div”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Elementen span och div”?

Använd generiska inline- och blockcontainrar som krokar för formatering. Ni övar på HTML 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 HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML 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 4 av 4.

Hur lång tid tar lektionen ”Elementen span och div”?

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 HTML Academy-lektionen?

Ja. Varje HTML 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

← Tillbaka till HTML Academy