HTML5 structuur aanbrengen

door Kris Bergstra · 1 mei 2012

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.

```
<!DOCTYPE html>
```
```
<html lang="nl">
```
```
  <head>
```
```
    <meta charset="utf-8" />
```
```
    <title>Untitled</title>
```

	<style type="text/css" title="text/css" media="all">

```
          <!--
```

          header, footer, nav, article, aside, section {

```
	  display: block;
```
```
          }
```
```
          -->
```
```
        </style>
```
```
<script>
```
```
document.createElement('header');
```
```
document.createElement('footer');
```
```
document.createElement('nav');
```
```
document.createElement('article');
```
```
document.createElement('aside');
```
```
document.createElement('section');
```
```
</script>
```
```
</head>
```
```
<body>
```
```
 
```
```
<header>
```

  <h1><abbr title="Hypertext Markup Language">HTML</abbr>5,&amp;

  structuur aanbrengen in een HTML5 document</h1>

```
    <nav> <ul>
```

      <li><a href="/Archief/">Archief</a></li>

      <li><a href="/About/">About</a></li> </ul>

```
    </nav>
```
```
</header>
```
```
 
```
```
<article>
```

  <h2><code>nav</code> is niet bedoeld voor <em>alle</em> Links</h2>

  <p>Maar het <code>nav</code> element bevat wel vaak links.

  Niet <em>alle</em> links hebben de <code>nav</code> nodig.</p>

```
</article>
```
```
 
```
```
<article>
```

  <h2>De <code>DOCTYPE</code>. Wat nog meer?</h2>

  <p>Heb je de <code>DOCTYPE</code> dan kun je HTML5 gaan leren.</p>

```
</article>
```
```
 
```
```
<aside>
```
```
  <h2>HTML5 links</h2>
```
```
  <p>Meer links over HTML:</p> <ul>
```

    <li><a href="http://html5.com">HTML5</a></li>

    <li><a href="http://html4.com">HTML4</a></li> </ul>

```
</aside>
```
```
 
```
```
<footer>
```

  <p>Copyright &copy; 2017 - <a href="http://localhost:8888">Meneer Simmering</a></p>

```
</footer>
```
```
 
```
```
</body>
```
```
</html>
```

HTML5 structuur aanbrengen

1 reactie

Geef een reactie Reactie annuleren