HTML & CSS voor beginners (deel 19): Semantiek voor het web (2)

Op dit moment worden HTML-documenten meestal gestructureerd met behulp van div-elementen. De opmaak en positionering van deze containers gebeurt meestal met CSS. Voor software zoals schermlezers is deze aanpak natuurlijk nutteloos, omdat ze niet kunnen herkennen welke betekenis bepaalde inhoud heeft. Dit moet veranderen door de nieuwe structuurelementen.

Twee van de belangrijkste nieuwe elementen zijn section en article, die centraal staan in deze tutorial.

Artikel aanduiden

Met het article-element kunnen teksten (forumberichten, krantenartikelen, enz.) worden aangeduid als een artikel. Het volgende voorbeeld toont de definitie van een typisch artikel.

<article>
   <h1>Web-apps maken (Deel 09): jQuery Mobile (1)</h1>
   <p>jQuery is zonder twijfel een van de bekendste JavaScript-frameworks. Op "klassieke" websites wordt jQuery daarom al duizend keer gebruikt...</p>
   ...
</article>

Dankzij het article-element kunnen jullie dus jullie inhoud semantisch structureren.

Hoe zoiets eruit kan zien, kan heel mooi worden weergegeven aan de hand van een blog.

<article>
  <header>
    <h1>Web-apps maken (Deel 09): jQuery Mobile (1)</h1>
    <p>Gepubliceerd op: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery is zonder twijfel een van de bekendste JavaScript-frameworks. Op "klassieke" websites wordt jQuery daarom al duizend keer gebruikt...</p>
  ...
  <footer>
    <p><small>Copyright door PSD-Tutorials.de</small></p>
  </footer>
</article>

In dit voorbeeld wordt binnen het article-element de typische verdeling in kop-, hoofd- en voetgedeelte gemaakt. En zo'n indeling is heel vaak te vinden in blogs.

Secties aanmaken

We gaan verder met het section-element. Het element section verdeelt de pagina in verschillende secties. Dit kunnen bijvoorbeeld secties, hoofdstukken, tabbladen, enz. zijn. Door section kunnen bijvoorbeeld gebieden zoals inleidingen en actuele berichten logisch van elkaar worden gescheiden.

section dient om de inhoud op te delen op basis van daadwerkelijke inhoudelijke overwegingen. Over het verschil tussen section en div zal ik het overigens nog eens hebben aan het einde van deze tutorial.

Het volgende voorbeeld toont een typische blogstructuur. Deze structuur bevat echter nog iets wat in veel blogs ook daadwerkelijk nodig is, namelijk een commentaargedeelte. Dit commentaargedeelte is gedefinieerd binnen een section-element. De individuele opmerkingen binnen de section-sectie worden elk omgeven door een article-element.

<article>
  <header>
    <h1>Web-apps maken (Deel 09): jQuery Mobile (1)</h1>
    <p>Gepubliceerd op: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery is zonder twijfel een van de bekendste JavaScript-frameworks. Op "klassieke" websites wordt jQuery daarom al duizend keer gebruikt...</p>
  ...

  <section>
    <h2>Reacties</h2>
    <article>
      <header>
      <h3>Gereageerd door: Nieuwsmaatje</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Een uur geleden</time></p>
    </header>
    <p>Bedankt voor de tutorial!</p>
    </article>
    <article>
      <header>
      <h3>Gereageerd door: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Twee uur geleden</time></p>
    </header>
    <p>Top! Hiermee kan ik verder.</p>
    </article>
  </section>
</article>

Nogmaals de opmerking dat ik natuurlijk nog uitgebreid zal ingaan op de hier ook gebruikte elementen zoals header, footer, enz. Op dit moment alleen dit: Met deze elementen kunnen inhouden worden verdeeld in kop- en voetgedeelten, waardoor een verdere logische structurering van documenten mogelijk is.

Nog een ander voorbeeld om de combinatie van article- en section-elementen verder te verduidelijken. In feite kan het section-element worden gebruikt om een artikel op te delen in logische secties met elk een eigen kop.

<article> 
  <h1>App-ontwikkeling</h1> 
  <p>Hier leer je hoe je web-apps kunt maken.</p>
  <section> 
     <h2>Web-apps maken (Deel 09): jQuery Mobile (1)</h2> 
     <p>jQuery is zonder twijfel een van de bekendste JavaScript-frameworks.</p> 
   </section> 
  <section> 
     <h2>Web-apps maken (Deel 08): De snelle start in jQuery</h2> 
     <p>JavaScript is voor websites een mooi iets, tenslotte kun je er allerlei interessante dingen mee doen.</p> 
   </section> 
 </article>

Het is overigens ook mogelijk om article-elementen te definiëren binnen een section-element. Een typisch voorbeeld hiervan kan een reactiegedeelte zijn, zoals al eerder getoond werd. Maar het is ook mogelijk om de sectie op te delen in de onderwerpen die in de blog worden behandeld.

Ook hier is weer een passend voorbeeld:

<section> 
  <h1>App-ontwikkeling</h1>
  <article> 
     <h2>Web-apps maken (Deel 09): jQuery Mobile (1)</h2> 
     <p>jQuery is ongetwijfeld een van de bekendste JavaScript-frameworks.</p> 
   </article> 
  <article> 
     <h2>Web-apps maken (Deel 08): De snelle start met jQuery</h2> 
     <p>JavaScript is handig voor websites, omdat er allerlei interessante dingen mee gedaan kunnen worden.</p> 
   </article>    
 </section>

Ook kunnen andere section-elementen binnen een section-element worden opgenomen. Nestingen zijn dus toegestaan. Hier is ook een voorbeeld van:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Welkom</h2>     
      <p>We zijn blij...</p>
    </section>   
    <section>     
      <h2>Tutorials</h2>
      <P>Hier zijn onze nieuwste tutorials...</p> 
    </section>
    <aside>
      <p>Contact</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Deze sectie-nesting resulteert in de volgende structuur:

1. PSD-Tutorials.de

1.1 Welkom

1.2 Tutorials

1.3 Contact

2. (c) 2014 PSD-Tutorials.de
   
   Zulke structureringen zijn ook mogelijk.
   
   

Het verschil tussen div, article en section

De afbakening tussen div, article en section is toegegeven niet helemaal eenvoudig te begrijpen. Het article-element is eigenlijk primair bedoeld voor de structurering van blogposts. Het section-element bevindt zich eigenlijk een niveau lager dan article. Binnen het section-element moet altijd een kop worden gedefinieerd. Zelfs als er feitelijk geen kop wordt gedefinieerd, zou het theoretisch mogelijk moeten zijn om binnen dat element een kop aan te geven.

Natuurlijk zijn div-elementen nog steeds niet verboden in HTML5, maar moeten nog steeds worden gebruikt. Ze zijn bijvoorbeeld interessant als het gaat om het samenvoegen van elementen.

Tenslotte, nogmaals de opmerking over de visuele effecten van de tot nu toe gepresenteerde elementen. Jullie hebben daadwerkelijk CSS nodig voor het opmaken, omdat het normale gebruik van de getoonde elementen geen effect heeft in de browser. Hier structureer je alleen de inhoud semantisch. Alles wat met uiterlijk te maken heeft, regel je via stylesheets.