Behalve de definitie van individuele delen van je pagina (zoals "een paragraaf" of  "een afbeelding"), biedt HTML ook een aantal elementen op blokniveau aan waarmee je gebieden van je website kan definiëren (zoals "de hoofding", "het navigatiemenu" en "de kolom met de belangrijkste inhoud"). Met dit artikel kan je leren hoe je de structuur van een eenvoudige website kunt plannen en hoe je de HTML kan schrijven om deze structuur op te zetten.

Vereisten: Basiskennis HTML, aangeboden in Beginnen met HTML. Kennis over HTML tekstopmaak aangeboden in HTML tekst : basispricipes. Hoe hyperlinks werken zoals besproken in Hyperlinks maken.
Doel: Je leert hoe je je document met semantische tags kan structureren en hoe je de structuur van een eenvoudige website kan maken.

Standaardsecties van een document

Webpagina's kunnen en zullen heel wat van elkaar verschillen, maar de meeste zullen een aantal gelijkaardige standaardcomponenten weergeven, behalve als de pagina een video of spel weergeeft die het volledige scherm beslaat, als de pagina onderdeel is van één of ander artistiek project of als die gewoon slecht is gestructureerd.

hoofding (header)
Meestal is dit een grote brede band aan de bovenkant van de pagina met een grote koptekst en/of een logo. Dit is waar je de belangrijkste en bekendste informatie vindt, en meestal wordt die constant over alle webpagina's van je website weergegeven.
navigatiebalk (navigation bar)
De navigatiebalk bevat links naar de belangrijkste secties van de site. Meestal worden die weergegeven door menuknoppen, links of tabpagina's. Zoals de hoofding blijft de inhoud meestal constant op alle webpagina's. Als de navigatie op je website niet consistent is, zal dit enkel tot verwarde en gefrustreerde gebruikers leiden. Vele webontwikkelaars beschouwen de navigatiebalk als onderdeel van de hoofding in plaats van als een individueel onderdeel, maar dat is geen vereiste. In feite zijn er ook die vinden dat het beter is om de twee gescheiden te houden omdat ze zo veel  toegankelijker zijn voor schermlezers, die de twee onderdelen beter kunnen lezen als ze apart in de website bestaan.
belangrijkste inhoud (main content)
Dit is een groot gebied in het midden van de pagina die de meeste unieke inhoud van de webpagina bevat. Dit kan bijvoorbeeld een video zijn die je wil bekijken of het belangrijkste verhaal dat je wil lezen, de kaart die je wil bekijken, de nieuwskoppen enz.  Dit deel van de website zal zeker variëren van pagina tot pagina!
zijbalk (sidebar)
In de zijbalk staan links, perifere info, citaten, advertenties enz. Meestal bevinden de belangrijkste en de perifere inhoud zich binnen dezelfde context (Op de pagina van een nieuwsartikel bijvoorbeeld kan de zijbalk een biografie van de auteur bevatten of links naar gerelateerde artikelen). Er zijn ook pagina's waarin de zijbalk wordt gebruikt voor terugkerende elementen zoals een secundair navigatiesysteem.
voettekst (footer)
Een band die langs de onderkant van de pagina loopt en die in het algemeen de kleine lettertjes bevat, auteursrechtvermeldingen of contactinformatie. Het is een plek waar je algemene informatie kan plaatsen (zoals in de hoofding) maar die dan meestal niet van al te groot belang is of gewoon ondergeschikt aan de info die je in de belangrijkste inhoud terugvindt.  De voettekst wordt soms ook voor SEO-doeleinden gebruikt door links te verschaffen die zorgen voor een snelle toegang tot populaire inhoud.
Een "typische website" zou ongeveer zo kunnen worden opgezet:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

HTML voor het structureren van de inhoud

Het eenvoudige voorbeeld dat we hierboven tonen is niet mooi, maar als de illustratie van de lay-out van een typische website is het echt wel oké. Sommige websites hebben meer kolommen, sommige zijn veel complexer maar je begrijpt wat ik bedoel. Met de juiste CSS, kan je ongeveer elk element rond de verschillende secties plaatsen en je webpagina er toch laten uitzien zoals je zelf wil. Maar, zoals we al eerder hebben gezegd, het is belangrijk dat je de semantiek respecteert en dat je het juiste element voor de juiste job gebruikt.

Visuele elementen vertellen namelijk niet het volledig verhaal. We gebruiken kleuren en tekstgrootte om de aandacht van de gebruikers op de nuttigste onderdelen van de inhoud te vestigen, zoals het navigatiemenu en gerelateerde links, maar wat bijvoorbeeld met mensen die een visuele beperking hebben en die concepten zoals "roze" en een "groot letterype" niet erg nuttig vinden?

Opmerking: Kleurenblinde mensen vertegenwoordigen ongeveer 8% van de wereldbevolking. Blinde en visueel beperkte mensen maken ruwweg 4-5% van de wereldbevolking uit. (In 2012 waren er 285 millioen zulke mensen in de wereld, terwijl de volledige bevolking toen rond 7 billioen besloeg.)

In je HTML-code kan je de opmaak van secties baseren op hun functionaliteit. Je kan ondubbelzinnige elementen gebruiken die deze secties vertegenwoordigen. Ondersteunende technologieën zoals schermlezers kunnen die elementen herkennen en de gebruiker helpen met allerlei taken. Dat zou "vind de belangrijkste navigatiebalk" kunnen zijn of "vind de belangrijkste inoud". Zoals we al eerder in de cursus hebben vermeld hangen er een aantal gevolgen aan vast als je niet de juiste elementstructuur en semantiek voor de juise job gebruikt.

Om zulk een semantische opmaak toe te passen, verschaft HTML ons een aantal tags die speciaal voor dat doel zijn ontworpen en die je kan gebruiken. Bijvoorbeeld:

Actief leren: we onderzoeken de code voor ons voorbeeld

Het voorbeeld dat je hierboven hebt gezien wordt gegenereerd door de code hieronder. (Je kan het voorbeeld ook in onze Github repo vinden). Bekijk het voorbeeld hierboven en dan de code hieronder en ontdek welke code-onderdelen overeenstemmen met welke secties in het visuele voorbeeld.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Mijn paginatitel</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- De drie regels hieronder zijn een noodoplossing om ervoor te zorgen dat semantische elementen van HTML5 ook werken in de oude versies van Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Hier is onze belangrijkste hoofding die op alle pagina's van onze website wordt gebruikt. -->

    <header>
      <h1>Hoofding</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Startpagina</a></li>
        <li><a href="#">Ons team</a></li>
        <li><a href="#">Projecten</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- Een zoekformulier is een andere niet-lineaire manier om in een website te navigeren. -->

       <form>
         <input type="search" name="q" placeholder="Zoekopdracht">
         <input type="submit" value="Start!">
       </form>
     </nav>

    <!-- Hier vindt je de belangrijkste inhoud van onze pagina. -->
    <main>

      <!-- Het bevat een artikel -->
      <article>
        <h2>Hoofding van het artikel</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>Subsectie</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Nog een subsectie</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- De inhoud van de zijbalk kan ook in de belangrijkste inhoud worden genest. -->
      <aside>
        <h2>Gerelateerd</h2>

        <ul>
          <li><a href="#">Oh wat ben ik toch graag aan de kust.</a></li>
          <li><a href="#">Oh wat ben ik toch graag dicht bij de zee.</a></li>
          <li><a href="#">Maar in het Noorden van Engeland</a></li>
          <li><a href="#">Houdt het nooit op met regenen</a></li>
          <li><a href="#">Ach ja...</a></li>
        </ul>
      </aside>

    </main>

    <!-- En hier is onze belangrijkste voettekst die op alle pagina's van onze website wordt gebruikt. -->

    <footer>
      <p>©Copyright 2050 door helemaal niemand. Alle rechten omgedraaid.</p>
    </footer>

  </body>
</html>

Neem je tijd om de code te bekijken en te begrijpen — de commentaren in de code zouden je moeten helpen. We vragen je niet om iets anders te doen in dit artikel. Als je de lay-out van een document goed wil begrijpen, moet je een gezonde HTML-structuur schrijven en die dan weergeven met CSS. We wachten ermee tot je CSS-layout gaat studeren (dat vind je in het hoofdstuk over CSS).

HTML layout-elementen in groter detail

Het is goed om de algemene betekenis van alle HTML-sectie-elementen in detail te begrijpen. — Dit zal beetje bij beetje komen terwijl je ervaring opdoet met webontwikkeling.  Je kan veel details vinden in onze HTML element reference. Nu is het belangrijk dat je probeert deze belangrijkste definities te begrijpen:

  • <main> is voor inhoud die uniek is op deze pagina. Gebruik <main> slechts een keer per pagina en plaats die onmiddellijk in <body>. Je kan dit element best niet nesten in andere elementen.
  • <article> omhult een blok van gerelateerde inhoud die op zichzelf zinvol blijft zonder de aanwezigheid van de rest van de pagina.
  • <section> lijkt op <article> maar het wordt gebruikt om één deel van de pagina te groeperen. Dit deel heeft één enkel functioneel doel (bijvoorbeeld een mini-map of een reeks nieuwskoppen en hun samenvatting) Het wordt als een aanbevolen praktijk beschouwd om elke secie met een koptekst (of heading) te beginnen. Merk ook op dat je <article>-elementen kan opdelen in andere <section>-elementen, of <section>-elementen in andere <article>-elementen, het hangt wat af van de context.
  • <aside> bevat inhoud die geen onmiddellijk verband houdt met de belangrijkste inhoud maar wel extra informatie kan verschaffen die er op een indirecte manier  mee is verbonden (lemma's in een woordenlijst,  biografie van de auteur, gerelateerde links enz.)
  • <header> vertegenwoordigt een groep inleidende inhoud. Als het een kind is van <body> definiëert het de globale hoofding van een webpagina, maar als het een kind is van een <article> of <section> definiëert het een specifieke hoofding voor die sectie (probeer dit niet te verwarring met titles and headings (i.e. titels en kopteksten))
  • <nav> bevat de belangrijkste navigerende functionaliteit voor die pagina. Secundaire links enz zouden niet in de navigatie mogen worden gestopt.
  • <footer> vertegenwoordig een groep met inhoud die op het einde van de webpagina past.

Elementen zonder semantische betekenis

Soms zal je in een situatie terechtkomen waarin je geen ideaal semantisch element kan vinden om een aantal onderdelen te groeperen of om één of andere inhoud te mee te omhullen. Soms zal je misschien een reeks elementen willen groeperen zodat ze er met wat CSS of JavaScript als één enkele entiteit gaan uitzien. Voor dat soort gevallen beschikt HTML over het <div>- en het <span>-element. Deze kan je best met een geschikt class-attribuut gebruiken. Je kan ook één of ander label voor hen bedenken zodat ze gemakkelijk als doel van een selectie kunnen worden gebruikt.

<span> is een inline niet-semantisch element dat je enkel zou mogen gebruiken als je echt geen beter semantisch tekstelement kunt bedenken om je inhoud mee in te pakken of als je geen extra betekenis wil toevoegen. Bijvoorbeeld:

<p>Om 01:00 stapte de dronken koning terug naar zijn kamer, het bier deed niets om hem te helpen
terwijl hij door de deur waggelde<span class="editor-note">[Opmerking van de redacteur: Op dit moment in het
stuk, moeten de lichten worden gedimd]</span>.</p>

In dit geval moet de opmerking van de redacteur gewoon extra regie aan de regisseur van het stuk bieden. Het hoeft geen extra semantische betekenis te krijgen. Voor goedziende gebruikers, kan je CSS gebruiken om de opmerking een beetje te onderscheiden van de rest van de tekst.

<div> is een niet-semantisch element op blokniveau, dat je enkel zou moeten gebruiken als je geen beter semantisch blokelement kan bedenken of geen specifieke betekenis wil toevoegen. Beeld je bijvoorbeeld een widget in de vorm van een winkelkarretje in, dat je op elk moment kan openen terwijl je je op een koopsite bevindt:

<div class="winkelkarretje">
  <h2>Winkelkarretje</h2>
  <ul>
    <li>
      <p><a href=""><strong>Zilveren oorbellen</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="zilveren oorbellen">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Totaal: $237.89</p>
</div>

Dit is niet echt een <aside> want er is niet noodzakelijk een verband met de belangrijkste inhoud van de pagina (je wil de inhoud van dat karretje op elke pagina zichtbaar kunnen maken). Het rechtvaardigt ook niet echt het gebruik van een <section> want het vormt geen onderdeel van de belangrijkste inhoud van de pagina. In dit geval is een <div> dus prima. We hebben een koptekst toegevoegd die als een wegwijzer kan dienen zodat mensen met schermlezer de widget kunnen vinden.

Waarschuwing: Divs zijn zo handig dat je ze nogal gemakkelijk te veel gaat gebruiken. Omdat ze geen semantische betekenis dragen, zullen ze je HTML-code snel rommelig maken. Wees voorzichtig en gebruik ze enkel als er geen betere semantische oplossing is en probeer het gebruik ervan tot een minimum te beperken; anders zal je veel werk moeten steken in het updaten en het onderhoud van je documenten.

Regeleindes en horizontale lijnen

<br> en <hr> zijn twee elementen die je nu en dan zal gebruiken en die je dus beter wil leren kennen :

<br> creërt een regeleinde in een paragraaf; het is de enige manier om een rigide structuur in een serie kort lijnen te dwingen, zoals in een postadres of een gedicht. Bijvoorbeeld:

<p>Er was eens een meisje en ze heette Nell<br>
Die hield erg veel van HTML<br>
Maar haar structuur was slecht, haar semantiek was droef<br>
en haar opmaak was zo heel veel en erg stroef.</p>

Zonder de <br>-elementen zou de paragraaf als een lange regel worden weergegeven (zoals we al eerder in de cursus hebben gezegd, HTML negeert de meeste witte ruimte). Als je ze in de code stopt, geeft de opmaak dit weer:

Er was eens een meisje en ze heette Nell
Die hield erg veel van HTML
Maar haar strutuur was slecht, haar semantiek was droef
en haar opmaak was zo heel veel en erg stroef.

<hr>-elementen creëren een horizontale lijn in het document die een thematische verandering in de tekst aangeeft (zoals een ander onderwerp of een scène. Visueel ziet die er gewoon uit als een horizontale lijn. Dit is een voorbeeld:

<p>Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.</p>
<hr>
<p>Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.</p>

Dit zou zo worden weergegeven:

Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.


Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.

De planning van een eenvoudige website

Jbt gepland hoe de inhoud van je eenvoudige website eruit zal zien. De volgende logische stap is uit te werken welke inhoud je in de hele website zal steken, wat voor pagina's je nodig hebt en hoe ze moeten worden geordend en aan elkaar gelinkt om de beste gebruikerservaring mogelijk te maken. Dit noemen we Information architecture. In een grote complexe website, kan er heel wat planning in dit proces worden gestoken maar voor een eenvoudige website van slechts een paar pagina's kan dit vrij simpel zijn en plezierig!

  1. Denk eraan dat je een paar elementen hebt die vaak voorkomen in de meeste (misschien zelfs in alle) pagina's, zoals het navigatiemenu en de inhoud van de voettekst. Als je site bijvoorbeeld voor een zaak dient, is het een goed idee om je contactinformatie in de voettekst van elke pagina te steken. Noteer wat je op elke pagina terug wil zien komen the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. Vervolgens teken je een ruwe schets die toont hoe jij wil dat de structuur er op elke pagina zal uitzien (het zou er kunnen uitzien als onze simpele website hierboven). Noteer wat de functie van elk blok zal zijn. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. Nu brainstorm je welke andere inhoud je op je website wil zien (inhoud die niet op elke pagina zal voorkomen). Maak er een grote lijst van en schrijf die op. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. De volgende stap is om all deze inhoudelijke componenten in groepen te sorteren. Op die manier krijg je een idee van welke onderdelen samen kunnen leven op de verscillende pagina's. Dit lijkt erg op een techniek die we Card sorting noemen. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. Probeer nu een ruwe sitemap te schetsen - maak een bubbel voor elke pagina van je site en trek lijnen die de typische workflow tussen de verschillende pagina's toont. De startpagina zal waarschijnlijk in het midden liggen. Link de meeste of zelfs alle anderen. De meeste pagina's in een kleine site zouden bereikbaar moeten zijn vanuit de belangrijkste navigatie, hoewel er uitzonderingen zijn. Je wil misschien ook opmerkingen toevoegen over hoe alles zal worden weergegeven .A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

Actief leren: creëer je eigen sitemap

Volg nu dezelfde stappen en probeer zelf een eigen website te creëren. Waarover wil je een site bouwen? 

Opmerking: Sla je werk ergens op; je hebt het misschien later nog nodig.

Samenvatting

Op dit moment zou je een beter idee moeten hebben van hoe je een webpagina of website kan structureren. In het laatste artikel van deze module zullen we het debuggen van HTML bestuderen.

Zie ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje
 Laatst bijgewerkt door: Tonnes,