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>

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

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.