section-elementet kontra div
Lær når De bør bruke section fremfor en vanlig div
section-elementet kontra div er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
section-elementet
Elementet <section> grupperer relatert innhold i en tematisk seksjon:
<section>
<h2>Contact Information</h2>
<p>Email: hello@example.com</p>
<p>Phone: (555) 555-0100</p>
</section>section kontra div
Det sentrale spørsmålet er: Har denne gruppen et tema eller et formål som kan navngis?
<section>— ja; det representerer en tematisk gruppering og bør ha en overskrift<div>— nei; det er bare en beholder for styling eller skripting
section krever en overskrift
Hver <section> bør ha 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>Når bør du bruke section
Bruk <section> for:
- Kapitler i et dokument
- Faner eller trinn i en veiviser
- Deler av en lang artikkel (Innledning, Metoder, Resultater)
- Markedsføringsseksjoner på en hjemmeside (Funksjoner, Priser, Uttalelser)
Når bør du bruke div
Bruk <div> når du bare trenger en beholder for CSS eller JavaScript uten 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 artikkel
Bruk section-elementer til å opprette kapitler i en article:
<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>Seksjoner på hjemmesiden
Strukturert hjemmeside med seksjoner:
<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 oppretter overskriftskontekst
section-elementer oppretter nye overskriftskontekster i HTML5-algoritmen for dokumentdisposisjonen:
<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
Knytt en section til overskriften for skjermlesere:
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->Beslutningsflyt
Hvilket beholderelement skal du bruke?
- Hovednavigasjon? →
<nav> - Hovedinnholdet på siden? →
<main> - Selvstendig innhold? →
<article> - Tematisk gruppering med overskrift? →
<section> - Sidefelt eller relatert innhold? →
<aside> - Bare en beholder for styling? →
<div>
section uten overskrift: bruk div
Hvis du ikke kan gi en section en overskrift, bruker du 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>Hurtigsjekk
Når bør du foretrekke div fremfor section?
Oppsummering: section kontra div
Det viktigste om section kontra div:
<section>— tematisk gruppe som bør ha en overskrift<div>— semantisk nøytral beholder for styling eller skripting- section oppretter et navngitt landemerkeområde for navigering med skjermleser
- Legg til
aria-labelledbyfor å knytte section til overskriften - Når du er i tvil, bruker du div; du kan alltid oppgradere senere
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «section-elementet kontra div» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «section-elementet kontra div», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «section-elementet kontra div»?
Lær når De bør bruke section fremfor en vanlig div Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «section-elementet kontra div»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- header nav main og footer
- article-elementet og selvstendig innhold
- section-elementet kontra div
- time address og mark