HTML & CSS for nybegynnere (Del 19): Semantikk for nettet (2)

For øyeblikket blir HTML-dokumenter hovedsakelig strukturert ved hjelp av div-elementer. Formatering og posisjonering av disse beholderne skjer vanligvis ved hjelp av CSS. For programvare som skjermlesere er denne tilnærmingen naturligvis ubrukelig, siden de ikke kan gjenkjenne hvilken betydning visse innhold har. Dette skal endres gjennom de nye strukturelementene.

To av de viktigste nye elementene er section og article, som er i fokus i denne opplæringen.

Artikkel merking

Ved hjelp av article-elementet kan tekster (foruminnlegg, avisartikler osv.) merkes som artikler. Det følgende eksemplet viser definisjonen av en typisk artikkel.

<article>
   <h1>Opprette webapper (Del 09): jQuery Mobile (1)</h1>
   <p>jQuery er utvilsomt et av de mest kjente JavaScript-rammene. På "klassiske" nettsteder brukes jQuery allerede tusenvis av ganger ...</p>
   ...
</article>

Takket være article-elementet kan du dermed strukturere innholdet semantisk.

Hvordan noe slikt kan se ut, kan demonstreres veldig godt ved hjelp av en blogg.

<article>
  <header>
    <h1>Opprette webapper (Del 09): jQuery Mobile (1)</h1>
    <p>Publisert den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery er utvilsomt et av de mest kjente JavaScript-rammene. På "klassiske" nettsteder brukes jQuery allerede tusenvis av ganger ...</p>
  ...
  <footer>
    <p><small>Opphavsrett ved PSD-Tutorials.de</small></p>
  </footer>
</article>

I dette eksempelet blir den ganske typiske oppdelingen i hode-, hoved- og bunnområder gjort innenfor article-elementet. En slik oppdeling er veldig vanlig å finne i blogger.

Opprettelse av seksjoner

Vi fortsetter med section-elementet. Seksjonselementet deler nettsiden inn i ulike seksjoner. Dette kan for eksempel være seksjoner, kapitler, faner osv. Gjennom section kan for eksempel områder som innledning og siste nytt logisk skilles fra hverandre.

section brukes til å dele innholdet etter faktiske innholdsmessige hensyn. Jeg vil for øvrig også komme tilbake til forskjellen mellom section og div mot slutten av denne opplæringen.

Det følgende eksempelet viser en typisk bloggstruktur. Imidlertid inneholder denne strukturen fortsatt noe som faktisk er nødvendig i mange blogger, nemlig et kommentarområde. Dette kommentarområdet er definert innenfor et section-element. De enkelte kommentarene innenfor section-området blir igjen plassert i hver sin article-element.

<article>
  <header>
    <h1>Opprette webapper (Del 09): jQuery Mobile (1)</h1>
    <p>Publisert den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery er utvilsomt et av de mest kjente JavaScript-rammene. På "klassiske" nettsteder brukes jQuery allerede tusenvis av ganger...</p>
  ...

  <section>
    <h2>Kommentarer</h2>
    <article>
      <header>
      <h3>Kommentert av: Nyhetsvenn</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">For en time siden</time></p>
    </header>
    <p>Takk for opplæringen!</p>
    </article>
    <article>
      <header>
      <h3>Kommentert av: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">For to timer siden</time></p>
    </header>
    <p>Flott! Dette hjelper meg videre.</p>
    </article>
  </section>
</article>

Her er det verdt å merke seg at jeg selvfølgelig vil komme grundig tilbake til elementer som header, footer osv. som også brukes her. På dette tidspunktet kan jeg si såpass: Gjennom disse elementene kan innholdet deles opp i hode- og bunnområder, og muliggjør derfor en ytterligere logisk strukturering av dokumenter.

Et annet eksempel vil tydeliggjøre kombinasjonen av article- og section-elementer ytterligere. Faktisk er det mulig å bruke section-elementet til å dele inn en artikkel i logiske innholdsområder, hver med sine egne overskrifter.

<article> 
  <h1>App-utvikling</h1> 
  <p>Her kan du lære hvordan du lager webapper.</p>
  <section> 
     <h2>Opprette webapper (Del 09): jQuery Mobile (1)</h2> 
     <p>jQuery er utvilsomt et av de mest kjente JavaScript-rammene.</p> 
   </section> 
  <section> 
     <h2>Opprette webapper (Del 08): Rask innføring i jQuery</h2> 
     <p>JavaScript er flott for nettsteder, siden det tillater en rekke interessante ting.</p> 
   </section> 
 </article>

Det er for øvrig også mulig å definere article-elementer innenfor et section-element. Et typisk eksempel kan være et kommentarområde, akkurat som allerede vist. Det er også mulig å dele seksjonen inn i de temaområdene som behandles i bloggen.

Også her er et passende eksempel:

<section> 
  <h1>App-utvikling</h1>
  <article> 
     <h2>Opprettelse av web-apper (del 09): jQuery mobile (1)</h2> 
     <p>jQuery er utvilsomt en av de mest kjente JavaScript-rammeverkene.</p> 
   </article> 
  <article> 
     <h2>Opprettelse av web-apper (del 08): En rask innføring i jQuery</h2> 
     <p>JavaScript er flott for nettsider, siden det lar deg gjøre mange spennende ting.</p> 
   </article>    
 </section>

I tillegg kan det være andre section-elementer inne i et section-element. Innkapslinger er derfor tillatt. Her er et eksempel:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Velkommen</h2>     
      <p>Vi gleder oss...</p>
    </section>   
    <section>     
      <h2>Tutorials</h2>
      <P>Her finner du våre nyeste tutorials...</p> 
    </section>
    <aside>
      <p>Kontakt</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Denne innkapslingen av section gir følgende struktur:

1. PSD-Tutorials.de

1.1 Velkommen

1.2 Tutorials

1.3 Kontakt

2. (c) 2014 PSD-Tutorials.de
   
   Slike struktureringer er også mulig.
   
   

Forskjellen mellom div, article og section

Det er innrømmet ikke helt enkelt å forstå grensen mellom div, article og section. Faktisk ble article-elementet primært definert for strukturering av blogginnlegg. section-elementet er faktisk plassert ett nivå under article. Innad i section-elementet bør det også alltid defineres en overskrift. Selv om det faktisk ikke defineres noen overskrift, bør det teoretisk sett være mulig å angi en overskrift innenfor det aktuelle elementet.

Selvfølgelig er ikke div-elementer upopulære i HTML5, men bør fortsatt brukes. De er for eksempel interessante når det gjelder å samle elementer sammen.

Til slutt, et notat angående de visuelle effektene av de hittil presenterte elementene. Faktisk trenger du CSS for å formatere dem skikkelig. Den normale bruken av de viste elementene har ingen effekt i nettleseren. Du strukturerer innholdet semantisk her. Alt som har med utseende å gjøre, reguleres gjennom stilark.