HTML5 structuur aanbrengen

HTML5 heeft een aantal nieuwe tags gekregen, de zogenaamde structuurtags. Deze tags vervangen als het ware de ‘div’ tags die worden gebruikt om aan te geven welk onderdeel van de webpagina van toepassing is. Je ziet bijvoorbeeld veel websites met een <div id=”footer”>, om de footer aan te duiden.

Deze divs worden dus vervangen door structuur tags. Er zijn er 5 die ik in onderstaande video wil benoemen. header, nav, aside, article en footer. Ik laat je in de video zien waar je ze zou moeten toepassen.


Ook laat ik zien welke opbouw een goede HTML5 pagina heeft en hoe je ervoor kunt zorgen dat de structuurtags ook werken in oudere browsers.

HTML code van de complete webpagina in HTML5.

  1. <!DOCTYPE html>
  2. <html lang="nl">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Untitled</title>
  6. 	<style type="text/css" title="text/css" media="all">
  7.           <!--
  8.           header, footer, nav, article, aside, section {
  9. 	  display: block;
  10.           }
  11.           -->
  12.         </style>
  13. <script>
  14. document.createElement('header');
  15. document.createElement('footer');
  16. document.createElement('nav');
  17. document.createElement('article');
  18. document.createElement('aside');
  19. document.createElement('section');
  20. </script>
  21. </head>
  22. <body>
  23.  
  24. <header>
  25.   <h1><abbr title="Hypertext Markup Language">HTML</abbr>5,&amp;
  26.   structuur aanbrengen in een HTML5 document</h1>
  27.     <nav> <ul>
  28.       <li><a href="/Archief/">Archief</a></li>
  29.       <li><a href="/About/">About</a></li> </ul>
  30.     </nav>
  31. </header>
  32.  
  33. <article>
  34.   <h2><code>nav</code> is niet bedoeld voor <em>alle</em> Links</h2>
  35.   <p>Maar het <code>nav</code> element bevat wel vaak links.
  36.   Niet <em>alle</em> links hebben de <code>nav</code> nodig.</p>
  37. </article>
  38.  
  39. <article>
  40.   <h2>De <code>DOCTYPE</code>. Wat nog meer?</h2>
  41.   <p>Heb je de <code>DOCTYPE</code> dan kun je HTML5 gaan leren.</p>
  42. </article>
  43.  
  44. <aside>
  45.   <h2>HTML5 links</h2>
  46.   <p>Meer links over HTML:</p> <ul>
  47.     <li><a href="http://html5.com">HTML5</a></li>
  48.     <li><a href="http://html4.com">HTML4</a></li> </ul>
  49. </aside>
  50.  
  51. <footer>
  52.   <p>Copyright &copy; 2017 - <a href="http://localhost:8888">Meneer Simmering</a></p>
  53. </footer>
  54.  
  55. </body>
  56. </html>

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

1 reactie

  1. Wouter J schreef:

    I.p.v. die HTML5 reset CSS (display: block; geval) is het beter om HTMLshiv te gebruiken.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.