Youtube: HTML structureren
Overzicht elementen
Voor we onze HTML pagina kunnen 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:
element | betekens |
---|---|
<span> |
deel van een zin |
<div> |
deel van het document |
<header> |
inleidend gedeelte |
<footer> |
afsluitend gedeelte |
<main> |
hoofdinhoud (één per pagina) |
<section> |
stuk met een titel (cfr. hoofdstuk in een boek) |
<nav> |
hoofdnavigatie (één per pagina) |
<aside> |
gerelateerde inhoud (cfr. gerelateerde links) |
<article> |
onafhankelijke inhoud (cfr. widget) |
→ <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>
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...
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
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
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.
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>
→ er is bijgevolg maar één <main>
per pagina mogelijk
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>
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>
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.
Praktijkvoorbeeld
Laat ons zeggen dat we deze pagina willen maken:
![](img/07_structureren/full.png)
Ongestructureerd
De basis HTML, zonder structureren:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<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>© <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>© Rogier van der Linde, 2010</p>
<ul>
<li><a href="#">disclaimer</a>
<li><a href="#">sitemap</a>
<li><a href="#">contact</a>
</ul>
</body>
</html>
Gestructureerd met div's
Met <div>
elementen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<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>
</body>
</html>
→ dit werkt, maar <div>
heeft geen semantische betekenis
→ het is daardoor moeilijk om te zien wat de structuur is
Met structurele elementen
Gestructureerd met betekenisvolle elementen <header>
, <main>
, <section>
enz...:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<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>
</body>
</html>
→ veel betere semantische HTML markup
Samengevat
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
Uitsmijter: groeperen van content
Vuistregel
✊content die bij elkaar hoort, moet samen in een HTML element zitten
Voorbeelden van dingen die bij elkaar horen in een groep:
- controls, titel, help teksten enz... van eenzelfde formulier zitten in een
<form>
- sociale media iconen steek je in een
<ul>
- avatar, titel, datum, tekst enz... van eenzelfde commentaar hoort in een
<article>
of<section>
- contact informatie zit in
<address>
- afbeelding en bijschrift steek je in
<article>
- inleidende inhoud: logo, topmenu, login... hoort in een
<footer>
Voorbeeld: formulier
<p>velden met een * zijn verplicht</p>
<form>
<p>
...
</p>
<p><input type="submit" value="registreren"></p>
</form>
<form>
<p>velden met een * zijn verplicht</p>
<p>
...
</p>
<p><input type="submit" value="registreren"></p>
</form>
Voorbeeld: sociale media
<a href="#" title="like ons op facebook"><img src="img/icn_fb.png" alt="facebook icon"></a>
<a href="#" title="volg ons"><img src="img/icn_tw.png" alt="twitter icon"></a>
<a href="#" title="bekijk ons"><img src="img/icn_yt.png" alt="youtube icon"></a>
<ul>
<li><a href="#" title="like ons"><img src="img/icn_fb.png" alt="facebook icon"></a></li>
<li><a href="#" title="volg ons"><img src="img/icn_tw.png" alt="twitter icon"></a></li>
<li><a href="#" title="bekijk ons"><img src="img/icn_yt.png" alt="youtube icon"></a></li>
</ul>
Voorbeeld: commentaar
...
<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>
...
...
<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
<h3>Contacteer me!</h3>
<p>Name: John Doe</p>
<p>Email: john.doe@gmail.com</p>
<p>Tel: +3347892347</p>
<h3>Contacteer me!</h3>
<address>
<p>Name: John Doe</p>
<p>Email: john.doe@gmail.com</p>
<p>Tel: +3347892347</p>
</address>