HTML Academy · Oppitunti

section-elementti vastaan div

Opettele, milloin käytät section-elementtiä ja milloin tavallista div-elementtiä

Oppitunti 3/413 vaihetta

section-elementti vastaan div on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

section-elementti

<section>-elementti ryhmittelee toisiinsa liittyvän sisällön temaattiseksi osioksi:

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

section vai div

Keskeinen kysymys on: onko tällä ryhmällä teema tai tarkoitus, jonka voisi nimetä?

<section> — kyllä; se edustaa temaattista kokonaisuutta, jolla pitäisi olla otsikko
<div> — ei; se on vain tyylittely- tai komentosarjasäiliö

section tarvitsee otsikon

Jokaisella <section>-elementillä pitäisi olla otsikko (<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>

Milloin section-elementtiä käytetään

Käyttäkää <section>-elementtiä seuraaville:

Asiakirjan luvut
Välilehdet tai ohjatun toiminnon vaiheet
Pitkän artikkelin osat (Johdanto, Menetelmät, Tulokset)
Etusivun markkinointiosiot (Ominaisuudet, Hinnoittelu, Asiakaspalautteet)

Milloin div-elementtiä käytetään

Käyttäkää <div>-elementtiä, kun tarvitsette vain CSS:n tai JavaScriptin säiliön ilman semanttista merkitystä:

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

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

section-elementti pitkässä artikkelissa

Luokaa section-elementtien avulla lukuja artikkelin sisään:

<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>

Etusivun section-elementit

Section-elementtejä käyttävä rakenteinen etusivu:

<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 luo otsikkokontekstin

Section-elementit luovat uusia otsikkokonteksteja HTML5-asiakirjan jäsennyksen algoritmissa:

<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 section-elementeille

Yhdistäkää section-elementti sen otsikkoon ruudunlukijoita varten:

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

Päätöspuu

Mitä säiliöelementtiä pitäisi käyttää?

Pääasiallinen navigointi? → <nav>
Sivun ensisijainen sisältö? → <main>
Itsenäinen sisältö? → <article>
Temaattinen, otsikollinen kokonaisuus? → <section>
Sivupalkki tai siihen liittyvä sisältö? → <aside>
Pelkkä tyylittelysäiliö? → <div>

section ilman otsikkoa: käyttäkää div-elementtiä

Jos ette voi antaa section-elementille otsikkoa, käyttäkää sen sijaan div-elementtiä:

<!-- 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>

Pikatarkistus

Milloin div-elementtiä pitäisi suosia section-elementin sijaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus: section vai div

Section- ja div-elementtien tärkeimmät asiat:

<section> — temaattinen kokonaisuus, jolla pitäisi olla otsikko
<div> — semanttisesti neutraali säiliö tyylittelyä tai komentosarjoja varten
Section luo nimetyn alueen, jossa ruudunlukijan käyttäjät voivat liikkua
Lisätkää aria-labelledby yhdistämään section-elementti sen otsikkoon
Jos olette epävarmoja, käyttäkää div-elementtiä; voitte aina muuttaa sen myöhemmin section-elementiksi

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”section-elementti vastaan div” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “section-elementti vastaan div”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”section-elementti vastaan div”?

Opettele, milloin käytät section-elementtiä ja milloin tavallista div-elementtiä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”section-elementti vastaan div”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: HTML Academy