STRUCTUREREN

tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web

gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar

STRUCTUREREN

Structureren in HTML

Beschikbare elementen

  • Voor we onze HTML pagina kunnen beginnen opmaken met CSS, hebben we een manier nodig om meer structuur te brengen, door gebieden aan te duiden in de HTML die later de headers, kolommen, zijbalk, footer enz... zullen worden.
  • Alle beschikbare structurele elementen in HTML:
    <span> deel van een zin
    <div> deel van het document
    <header> inleidend gedeelte
    <footer> afsluitend gedeelte
    <main> hoofdinhoud
    <section> stuk met een titel
    <nav> hoofdnavigatie
    <aside> gerelateerde inhoud
    <article> onafhankelijke inhoud
  • <span> is een inline element, de rest is blocklevel

Span

  • De <span> is een inline element, en duidt een deel van een zin aan. Het heeft verder geen betekenis, en is enkel nuttig om later met CSS of Javascript te gebruiken. Een voorbeeld: 
    <p>
  By impossible of in <span class="highlight">difficulty discovered</span> 
  celebrated ye. Justice joy manners boy met resolve produce. Bed head 
  <span class="highlight">loud</span> next plan rent had easy add him. 
</p>
  • merk op dat in dit geval <em> of nog beter <mark> correcter zou zijn

Div

  • Een <div> is een algemene manier om een deel van het document aan te duiden. Het heeft verder geen betekenis, en is enkel zinvol om later met CSS of Javascript te gebruiken, b.v. een pagina wrapper, tekstkolommen, container voor scripted content als een map or kalender... Typisch voorbeeld: 
    <footer>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</footer>
  • als de kolommen titels bevatten, zou <section> beter zijn (zie verder)

Header

  • De <header> markeert een inleidend gedeelte. De meest klassieke toepassing is aanduiding van de bovenkant van de pagina, waar het typisch zaken bevat als de paginatitel, navigatie elementen, het logo, de slagzin, het zoekvenster... 
    <body>
  <header>
    ... <!-- logo, zoeken, menu enz... hier -->
  </header>
  ...
</body>

Quotes van het W3C:

A general rule is that the section element is appropriate (...) if the element's contents would be listed explicitly in the document's outline.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Footer

  • De <footer> markeert afsluitende inhoud. De meest klassieke toepassing is aanduiding van de onderkant van de pagina, waar het typisch zaken bevat als copyright informatie, kleine links, sociale media... 
    <body>
  ...
  <footer>
    ... <!-- copyright, sociale media, kleine links enz... hier -->
  </footer>
</body>
  • merk op: hoewel <header> and <footer> meestal gebruikt worden voor een hele pagina, kan je ze in principe ook gebruiken om de boven- en onderkant van andere dingen aan te duiden, zoals een productomschrijving op een webshop, een review...

Letterlijk van het W3C:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Main

  • De <main> markeert de hoofdinhoud van een pagina. Dit is nuttig voor screenreaders, die dan meteen naar de content kunnen springen zonder telkens weer alles in de <header> voor te lezen. Een typische pagina opbouw wordt dan: 
    <body>
  <header>
    ... 
  </header>
  <main>
    ... <!-- hoofdinhoud pagina hier -->
  </main>
  <footer>
    ... 
  </footer>
</body>
  • er is bijgevolg maar één <main> per pagina mogelijk

Letterlijk van het W3C:

The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Section — strikte interpretatie

  • Volgens de strikte definitie markeren <section>'s de titels met bijhorende inhoud, waarbij sections genest worden volgens de hiërarchische documentstructuur: 
    <section>
  <h2>Chapter 1</h2>
  <section>
    <h3>Chapter 1.1</h3>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure...</p>
  </section>    
  <section>
    <h3>Chapter 1.1</h3>
    <p>On the other hand, we denounce with righteous indignation and dislike men who are...</p>
  </section>    
</section>  
<section>
  <h2>Chapter 2</h2>
  ...
</section>
  • denk aan de inhoudsopgave van een rapport of boek
  • een sectie moet altijd de titel en de volledige inhoud omvatten en omgekeerd
  • strikt gezien zijn er dus altijd exact evenveel sections als titels

Quotes van het W3C:

A general rule is that the section element is appropriate (...) if the element's contents would be listed explicitly in the document's outline.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Section — losse interpretatie

  • Deze strikte definitie is niet altijd werkbaar. In praktijk hebben niet alle blokken altijd een titel, en de hiërarchische pagina opbouw is niet altijd even duidelijk. Daarom gebruiken we soms een lossere definitie voor section als gewoon een "visueel samenhanged stuk van de pagina" — met of zonder titel. De <main> is een goede kandidaat om in sections te verdelen: 
    <main>
  <section>
    ...blok 1...
  </section>
  <section>
    ...blok 2...
  </section>
  <section>
    ...blok 3...
  </section>
</main>
  • gebruik het enkel om grote blokken aan te duiden; voor kleinere onderverdelingen of puur als grafisch of technisch hulpmiddel gebruik je best nog steeds <div>
  • mix binnen één element geen sections met andere elementen: gebruik ofwel <section>, ofwel niet
  • vraag aan je docent welke interpretatie gebruikt wordt, strikt of los

Nav

  • De <nav> markeert de hoofdnavigatie. Gebruik het dus enkel voor menus; niet voor filters, paginering, zoekformulieren, kleine links in de footer enz... Typisch voorbeeld: 
    <nav>
  <ul class="mainmenu">
    <li><a href="index.html">home</a></li>
    <li><a href="products.html">products</a></li>
    <li><a href="about.html">about</a></li>
    <li><a href="contact.html">contact</a></li>
  </ul>
</nav>

Letterlijk van het W3C:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.

Aside

  • De <aside> is een speciaal geval van <section>, en bevat bijkomende informatie, zoals gerelateerde links, product suggesties, reclame, quick facts, auteur informatie enz... Een typisch voorbeeld: 
    <aside>
  <h3>Over de auteur</h3>
  <p>Hi, ik ben Dan!</p>
  <img src="img/photo_dan.jpg" alt="een foto van Dan!">
  <h3>Recente posts</h3>
  <ul>
    <li><a href="...">Firefighters zijn ECHTE Superheroes</a></li>
    <li><a href="...">ZippyPaws Woodland Vrienden</a></li>
    <li><a href="...">Brusha brusha brusha</a></li>
  </ul>
</aside>
  • als je niet zeker bent, gebruik je best gewoon een <section> of <div>

Letterlijk van het W3C:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

[Article]

  • De <article> bevat onafhankelijke en herbruikbare content. Als je het integraal kan kopiëren naar een andere website, dan is het waarschijnlijk een article. Denk aan embedded tweets, widgets als polls, kalenders of weersvoorspelling... Typisch voorbeeld: 
    <article>
  <h1>Weersvoorspelling</h1>
  <dl>
    <dt>maandag</dt>
    <dd>Regen, af en toe een opklaring</dd>
  </dl>
  <dl>
    <dt>dinsdag</dt>
    <dd>Zonnig, maar fris voor de tijd van het jaar</dd>
  </dl>
</article>
  • als je niet zeker bent, gebruik je best gewoon een <section> of <div>

Letterlijk van het W3C:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

STRUCTUREREN

Praktijkvoorbeeld

Screenshot

HTML

  • De basis HTML, zonder structureren: 
    <h1><a href="#">My Blog</a></h1>

<p>You are not logged in – <a href="#">login</a></p>

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
</ul>

<p>Submenu</p>
<ul>
  <li><a href="#">item1</a></li>
  <li><a href="#">item2</a></li>
  <li><a href="#">item3</a></li>
  <li><a href="#">item4</a></li>
  <li><a href="#">item5</a></li>
  <li><a href="#">item6</a></li>
  <li><a href="#">item7</a></li>
  <li><a href="#">item8</a></li>
  <li><a href="#">item9</a></li>
  <li><a href="#">item10</a></li>
  <li><a href="#">item11</a></li>
  <li><a href="#">item12</a></li>
  <li><a href="#">item13</a></li>
  <li><a href="#">item14</a></li>
  <li><a href="#">item15</a></li>
</ul>

<h2>Lorem Ipsum</h2>

<h3>Part 1</h3>
<p>
  But I must explain to you how all this mistaken idea of denouncing pleasure
  and praising pain was born and I will give you a complete account of the system,
  and expound the actual teachings of the great explorer of the truth, the
  master-builder of human happiness. No one rejects, dislikes, or avoids pleasure
  itself, because it is pleasure, but because those who do not know how to pursue
  pleasure rationally encounter consequences that are extremely painful.
</p>

<h3>Part 2</h3>
<p>
  Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
  because it is pain, but because occasionally circumstances occur in which toil
  and pain can procure him some great pleasure. To take a trivial example, which of
  us ever undertakes laborious physical exercise, except to obtain some advantage
  from it? But who has any right to find fault with a man who chooses to enjoy a
  pleasure that has no annoying consequences, or one who avoids a pain that
  produces no resultant pleasure?
</p>

<h3>Part 3</h3>
<p>
  On the other hand, we denounce with righteous indignation and dislike men who are
  so beguiled and demoralized by the charms of pleasure of the moment, so blinded
  by desire, that they cannot foresee the pain and trouble that are bound to ensue;
  and equal blame belongs to those who fail in their duty through weakness of will,
  which is the same as saying through shrinking from toil and pain.
</p>

<p>Posted on <time pubdate datetime="2011-11-03">yesterday</time> by Bobby Peru</p>
<p>For further reading, see also this <a href="#">more detailed article</a></p>

<h4>Advertisement</h4>
<p>Buy our <a href="#">brand new lorem ipsum T-shirt</a> today!</p>
<p>&copy; <a href="#">someCompany</a></p>

<h4>Comments</h4>
<h5>I love Lorem Ipsum</h5>
<p>
  I personally believe Lorem Ipsum is the most sensitive poem ever written
  (Alice, <time datetime="2009-02-17T11:22">3 hours ago</time>)
</p>
<h5>Lorem Ipsum Sucks</h5>
<p>There, I said it! (Bob, <time datetime="2009-02-17T12:35">2 hours ago</time>)</p>

<p>&copy; Rogier van der Linde, 2010</p>

<ul>
  <li><a href="#">disclaimer</a>
  <li><a href="#">sitemap</a>
  <li><a href="#">contact</a>
</ul>

HTML met divs

  • Gestructureerd met <div> elementen: 
    <div id="wrapper">
  <div id="header">
    <h1><a href="#">My Blog</a></h1>
    <p>You are not logged in – <a href="#">login</a></p>
  </div>
  <div id="mainmenu">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
    </ul>
  </div>
  <div id="submenu">
    <p>Submenu</p>
    <ul>
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
      <li><a href="#">item6</a></li>
      <li><a href="#">item7</a></li>
      <li><a href="#">item8</a></li>
      <li><a href="#">item9</a></li>
      <li><a href="#">item10</a></li>
      <li><a href="#">item11</a></li>
      <li><a href="#">item12</a></li>
      <li><a href="#">item13</a></li>
      <li><a href="#">item14</a></li>
      <li><a href="#">item15</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="blogpost">
      <h2>Lorem Ipsum</h2>
      <h3>Part 1</h3>
      <p>
        But I must explain to you how all this mistaken idea of denouncing pleasure
        and praising pain was born and I will give you a complete account of the system,
        and expound the actual teachings of the
        <span class="highlight">great explorer</span> of the truth, the
        master-builder of human happiness. No one rejects, dislikes, or avoids pleasure
        itself, because it is pleasure, but because those who do not know how to pursue
        pleasure rationally encounter consequences that are extremely painful.
      </p>
      <h3>Part 2</h3>
      <p>
        Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
        because it is pain, but because occasionally circumstances occur in which toil
        and pain can procure him some great pleasure. To take a trivial example, which of
        us ever undertakes laborious physical exercise, except to obtain some advantage
        from it? But who has any right to find fault with a man who chooses to enjoy a
        pleasure that has no annoying consequences, or one who avoids a pain that
        produces no resultant pleasure?
      </p>
      <h3>Part 3</h3>
      <p>
        On the other hand, we denounce with righteous indignation and dislike men who are
        so beguiled and demoralized by the 
        <span class="highlight">charms of pleasure</span> of the moment, so blinded
        by desire, that they cannot foresee the pain and trouble that are bound to ensue;
        and equal blame belongs to those who fail in their duty through weakness of will,
        which is the same as saying through shrinking from toil and pain.
      </p>
      <p>Posted on <time pubdate datetime="2011-11-03">yesterday</time> by Bobby Peru</p>
      <div id="extra">
        <p>For further reading, see also this <a href="#">more detailed article</a></p>
        <div class="ad">
          <h4>Advertisement</h4>
          <p>Buy our <a href="#">brand new lorem ipsum T-shirt</a> today!</p>
          <p>© <a href="#">someCompany</a></p>
        </div>
      </div>
    </div>
    <div id="comments">
      <h4>Comments</h4>
      <div class="comment">
        <h5>I love Lorem Ipsum</h5>
        <p>
          I personally believe Lorem Ipsum is the most sensitive poem ever written
          (Alice, <time datetime="2009-02-17T11:22">3 hours ago</time>)
        </p>
      </div>
      <div class="comment">
        <h5>Lorem Ipsum Sucks</h5>
        <p>There, I said it! (Bob, <time datetime="2009-02-17T12:35">2 hours ago</time>)</p>
      </div>
    </div>
  </div>
  <div id="footer">
    <p>© Rogier van der Linde, 2010</p>
    <ul>
      <li><a href="#">disclaimer</a>
      <li><a href="#">sitemap</a>
      <li><a href="#">contact</a>
    </ul>
  </div>
</div>
  • dit werkt, maar <div> heeft geen semantische betekenis

HTML met structurele elementen

  • Gestructureerd met betekenisvolle elementen <header>, <main>, <section> enz...: 
    <div id="wrapper">
  <header>
    <h1><a href="#">My Blog</a></h1>
    <p>You are not logged in – <a href="#">login</a></p>
  </header>
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
    </ul>
  </nav>
  <div>
    <p>Submenu</p>
    <ul>
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
      <li><a href="#">item6</a></li>
      <li><a href="#">item7</a></li>
      <li><a href="#">item8</a></li>
      <li><a href="#">item9</a></li>
      <li><a href="#">item10</a></li>
      <li><a href="#">item11</a></li>
      <li><a href="#">item12</a></li>
      <li><a href="#">item13</a></li>
      <li><a href="#">item14</a></li>
      <li><a href="#">item15</a></li>
    </ul>
  </div>
  <main>
    <section id="blogpost">
      <h2>Lorem Ipsum</h2>
      <section>
        <h3>Part 1</h3>
        <p>
          But I must explain to you how all this mistaken idea of denouncing pleasure
          and praising pain was born and I will give you a complete account of the system,
          and expound the actual teachings of the <span class="highlight">great explorer</span> 
          of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids 
          pleasure itself, because it is pleasure, but because those who do not know how to pursue
          pleasure rationally encounter consequences that are extremely painful.
        </p>
      </section>
      <section>
        <h3>Part 2</h3>
        <p>
          Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
          because it is pain, but because occasionally circumstances occur in which toil
          and pain can procure him some great pleasure. To take a trivial example, which of
          us ever undertakes laborious physical exercise, except to obtain some advantage
          from it? But who has any right to find fault with a man who chooses to enjoy a
          pleasure that has no annoying consequences, or one who avoids a pain that
          produces no resultant pleasure?
        </p>
      </section>
      <section>
        <h3>Part 3</h3>
        <p>
          On the other hand, we denounce with righteous indignation and dislike men who are
          so beguiled and demoralized by the <span class="highlight">charms of pleasure</span> 
          of the moment, so blinded by desire, that they cannot foresee the pain and trouble that 
          are bound to ensue; and equal blame belongs to those who fail in their duty through 
          weakness of will, which is the same as saying through shrinking from toil and pain.
        </p>
      </section>
      <p>Posted on <time pubdate datetime="2011-11-03">yesterday</time> by Bobby Peru</p>
      <aside>
        <p>For further reading, see also this <a href="#">more detailed article</a></p>
        <article>
          <h4>Advertisement</h4>
          <p>Buy our <a href="#">brand new lorem ipsum T-shirt</a> today!</p>
          <p>© <a href="#">someCompany</a></p>
        </article>
      </aside>
    </section>
    <div id="comments">
      <h4>Comments</h4>
      <div class="comment">
        <h5>I love Lorem Ipsum</h5>
        <p>
          I personally believe Lorem Ipsum is the most sensitive poem ever written
          (Alice, <time datetime="2009-02-17T11:22">3 hours ago</time>)
        </p>
      </div>
      <div class="comment">
        <h5>Lorem Ipsum Sucks</h5>
        <p>There, I said it! (Bob, <time datetime="2009-02-17T12:35">2 hours ago</time>)</p>
      </div>
    </div>
  </main>
  <footer>
    <p>© Rogier van der Linde, 2010</p>
    <ul>
      <li><a href="#">disclaimer</a>
      <li><a href="#">sitemap</a>
      <li><a href="#">contact</a>
    </ul>
  </footer>
</div>
  • veel betere semantische HTML markup

Samenvatting

  • Probeer het niet te overdenken. Over het algemeen zijn <div> elementen nog steeds ok, maar probeer deze zeker goed te krijgen:
    • een <header> rond het bovenste van de pagina
    • een <main> rond het midden van de pagina
    • een <footer> rond het einde van de pagina
    • een <nav> rond je hoofdmenu
  • Als je je comfortabel voelt, probeer dan:
    • een <section> te gebruiken als je een titel hebt
    • een <aside> te gebruiken voor gerelateerde pagina informatie
    • een <article> te gebruiken voor advertenties en widgets

STRUCTUREREN

Content groeperen

Vuistregel

content die bij elkaar hoort, moet samen in een HTML element zitten

Voorbeelden

  • Voorbeelden van dingen die bij elkaar horen in een groep:
    • controls, titel, help teksten enz... van eenzelfde formulier
    • sociale media iconen
    • avatar, titel, datum, tekst enz... van eenzelfde commentaar
    • contact informatie
    • afbeelding en bijschrift
    • inleidende inhoud: logo, topmenu, login...
  • Deze zouden in een gemeenschappelijk element moeten zitten, respectievelijk:
    • <form>
    • <ul>
    • <article>
    • <address>
    • <figure>
    • <header>

Voorbeeld: formulier

  • fout: 
    <h3>Registratie</h3>
<p>velden met een * zijn verplicht</p>
<form>
  <p>
    ...
  </p>
  <p><input type="submit" value="registreren"></p>
</form>
  • goed: 
    <form>
  <h3>Registratie</h3>
  <p>velden met een * zijn verplicht</p>
  <p>
    ...
  </p>
  <p><input type="submit" value="registreren">
</form>

Voorbeeld: sociale media

  • fout: 
    <a href="#" title="like ons op facebook"><img src="img/icn_fb.png" alt="facebook icon"></a>
<a href="#" title="volg ons op twitter"><img src="img/icn_tw.png" alt="twitter icon"></a>
<a href="#" title="bekijk ons op youtube"><img src="img/icn_yt.png" alt="youtube icon"></a>
  • goed: 
    <ul>
  <li><a href="#" title="like ons op facebook"><img src="img/icn_fb.png" alt="facebook icon"></a></li>
  <li><a href="#" title="volg ons op twitter"><img src="img/icn_tw.png" alt="twitter icon"></a></li>
  <li><a href="#" title="bekijk ons op youtube"><img src="img/icn_yt.png" alt="youtube icon"></a></li>
</ul>

Voorbeeld: commentaar (1)

  • fout: 
    ...
<h3>Worst movie ever</h3>
<p>
  Gumbo beet greens corn soko endive gumbo gourd...
</p>
<img src="img/users/avatar080450.png" alt="avatar Bob">
<p>posted on 11/09/2014 12:45 by <em>Bob</em></p>
<h3>Great movie</h3>
<p>
  Turnip greens yarrow ricebean rutabaga endive cauliflower...
</p>
<img src="img/users/avatar059458.png" alt="avatar Alice">
<p>posted on 10/09/2014 16:23 by <em>Alice</em></p>
...

Voorbeeld: commentaar (2)

  • goed: 
      ...
  <h1>Worst movie ever</h1>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd...
  </p>
</article>

<article>
  <img src="img/users/avatar080450.png" alt="avatar Bob">
  <p>posted on 11/09/2014 12:45 by <em>Bob</em></p>
  <h1>Great movie</h1>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower...
  </p>
</article>

<article>
  <img src="img/users/avatar059458.png" alt="avatar Alice">
  <p>posted on 10/09/2014 16:23 by <em>Alice</em></p>
  ...

Voorbeeld: contact info

  • fout: 
    <h3>Contacteer me!</h3>
<p>Name: John Doe</p>
<p>Email: john.doe@gmail.com</p>
<p>Tel: +3347892347</p>
  • goed: 
    <h3>Contacteer me!</h3>
<address>
  <p>Name: John Doe</p>
  <p>Email: john.doe@gmail.com</p>
  <p>Tel: +3347892347</p>
</address>
Odisee logo