HTML5-Elemente

<section> <section>
  ...
</section>		 Thema: eingentlicher Inhalt. Ev. auch Kapitel oder die einzelnen Tabs in einem Dialog
<nav> <nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">galerie</a></li>
    <li><a href="#">impressum</a></li>
  </ul>
</nav>		 Abschnitt mit Navigationslinks, meist nur für die eigentliche Website-Navigation.
<article> <article>
  ...
</article>		 abgeschlossene Einheit auf einer Webseite, die unabhängig weiterverbreitet oder wiederverwendet werden kann. Z.B. ein Blogeintrag, ein Benutzerkommentar oder ein interaktives Objekt.
<aside> <aside>
  ...
</aside>		 Zusatzinformation, die sich auf die umgebenden Inhalte bezieht. Z.B. Seitenleisten oder Randbemerkungen.
<hgroup> <hgroup>
  ...
</hgroup>		 Gruppiert die Überschrift eines Abschnitts. Kann sich aus verschiedenen Elementen wie h1-h6 und anderen Elementen wie <p> zusammensetzen. Z.B. Titel zusammen mit Untertitel oder Schlagzeile.
<header> <header>
  ...
</header>		 Gruppiert die einführenden Elemente einer Webseite oder Abschnittes. Z.B. Logo, Seitentitel u.ä.
<footer><footer>
  ...
</footer>		Gruppiert die abschliessenden Elemente einer Webseite oder eines Abschnittes. Z.B. Autor, Quellenangaben, Impressum o.ä.
<time><time datetime="2012-10-22">22. Oktober 2012</time>

<time datetime="2013-04-29T15:48:22+01:00">4. April 2013, 15:48 MEZ</time>

<time datetime="2015-07-13" pubdate="pubdate">13.07.2013</time>

Datum und Zeit im 24 Stundenformat, optional mit einer Zeit und einer Zeitverschiebung. Hier wird ein T der Zeit vorangestellt und die Zonenverschiebung in Stunden und Minuten angegeben. Ev. wird mit dem Attribut pubdate gekennzeichnet, dass es sich um das Erstellungsdatum handelt.
<mark><mark>
  ...
</mark>		Markierung analog zu einem Leuchtmarker.
<audio> 
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Ihr Brwoser unterstützt das audio-Element nicht.
</audio>
 Audio-Files lassen sich direkt einbinden. Wegen Browser-Unterschieden werden im Beispiel zwei Formate angeboten. Weitere Attribut-Eigenschaften sind:
  • autoplay="autoplay"
  • loop="loop"
  • preload="preload"
<video>
<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>
Das Video-Tag erlaubt mehrere Quelldateien anzugeben. Dies ist notwendig, weil selbst die wichtigsten Browser keinen gemeinsamen Nenner aufweisen und die Filme in mind. drei Formaten zur Verfügung gestellt werden müssen.
komplettes Beispiel zu <video>
<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4",
"autoPlay":false, "autoBuffering":true}}' /> 
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>,
 or <a href="pr6.ogv">Ogg</a>.</p> 
  </object>
</video>
<script>
  var v = document.getElementById("movie");
  v.onclick = function() {
    if (v.paused) {
      v.play();
    }
    else {
      v.pause();
    }
  };
</script>
Dieses Beispiel nimmt Rücksicht auf die Internet-Explorer vor Version 9 und stammt ab der Website von Mark Pilgrim: http://diveintohtml5.org/video.html.