HTML Academy · Lektion

section-elementet kontra div

Lær, hvornår De skal bruge section i stedet for en almindelig div

Lektion 3 af 413 trin

section-elementet kontra div er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

section-elementet

Elementet <section> grupperer relateret indhold i en tematisk sektion:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section kontra div

Det afgørende spørgsmål er: Har denne gruppe et tema eller et formål, som kan navngives?

<section> — ja; det repræsenterer en tematisk gruppering og bør have en overskrift
<div> — nej; det er blot en container til styling eller scripting

section kræver en overskrift

Alle <section>-elementer bør have en overskrift (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Hvornår skal du bruge section

Brug <section> til:

Kapitler i et dokument
Faner eller trin i en guide
Dele af en lang artikel (introduktion, metoder, resultater)
Marketingsektioner på en hjemmeside (funktioner, priser, kundeudtalelser)

Hvornår skal du bruge div

Brug <div>, når du blot har brug for en container til CSS eller JavaScript uden semantisk betydning:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section i en lang artikel

Brug section-elementer til at oprette kapitler i et article-element:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Sektioner på hjemmesiden

En struktureret hjemmeside med sektioner:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section opretter en overskriftskontekst

Section-elementer opretter nye overskriftskontekster i HTML5-algoritmen for dokumentets disposition:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby for section-elementer

Knyt en section sammen med dens overskrift for skærmlæsere:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Beslutningsdiagram

Hvilket containerelement skal du bruge?

Overordnet navigation? → <nav>
Sidens primære indhold? → <main>
Selvstændigt indhold? → <article>
Tematisk gruppering med en overskrift? → <section>
Sidekolonne eller relateret indhold? → <aside>
Blot en container til styling? → <div>

section uden overskrift: brug div

Hvis du ikke kan give en section en overskrift, skal du bruge div i stedet:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Hurtigt tjek

Hvornår bør du foretrække div frem for section?

Besvar den i den interaktive lektion

Opsummering: section kontra div

Det vigtigste ved section kontra div:

<section> — tematisk gruppe, der bør have en overskrift
<div> — semantisk neutral container til styling eller scripting
section opretter et navngivet landmark-område til navigation for skærmlæsere
Tilføj aria-labelledby for at knytte section-elementet til dets overskrift
Er du i tvivl, så brug div; du kan altid opgradere senere

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “section-elementet kontra div” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “section-elementet kontra div”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “section-elementet kontra div”?

Lær, hvornår De skal bruge section i stedet for en almindelig div Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “section-elementet kontra div”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til HTML Academy