html5

Grundgerüst

Ein Beispiel für ein HTML5 Grundgerüst.Im Kopfbereich „Doctype“ mit Sprach. und Zeichensatzangabe. Für den Internet Explorer wird über Conditional Comments, ein JavaScript eingebunden, denn es sorgt dafür, daß der IE HTMLl5 Elemente erkennt.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Beispiel HTML5</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection">
</head>
<body>

  <header>
    <h1>Beispiel HTML5</h1>
    <p>HTML5</p>
  </header>
  
  <div id="cont">
  <!-- Seiteninhalt -->
  </div>
  
  <aside id="sideleft">
    <nav>
      <h2>Navigation</h2>
       <ul>
        <li><a href="index.html">Startseite</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impress.html">Impressum</a></li>
      </ul>
    </nav>
  </aside>
  
  <footer>
    <p>2010 universum <a href="#">Impressum</a></p>
  </footer>
</body>
</html>

Beschreibung:

header ⇒ Seitenkopf oder Banner.
aside ⇒ Seitenleisten Kontainer.
nav ⇒ Navigation.
footer ⇒ Seiten Fussleiste.

Formulare

Beispiel für ein Suchformular mit dem „form“ Kontainer.

    <form id="suchform">
      <fieldset>
        <legend>Suche</legend>
          <label for="suchbegriff" class="invisible">
            Suchbegriff eingeben
          </label>
        <input name="suchbegriff"id="suchbegriff" type="search" size="15">
        <input type="submit" value="Suche">
      </fieldset>
    </form>

Das HTML5 Navigationselement „nav“.

  <nav>
    <h2>Navigation</h2>
    <ul>
      <li><a href="index.html">Startseite</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
      <li><a href="imress.html">Impressum</a></li>
    </ul>
  </nav>

Seitenleiste

Ein Seitenleisten Kontainer und Navigation mit „aside“ und „nav“.

<aside id="sidebar">
  <nav>
    <h2>Navigationsleiste</h2>
    <ul>
      <li><a href="index.html">Startseite</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
      <li><a href="impress.html">Impressum</a></li>
    </ul>
  </nav>
</aside>

Bild mit definierten Bereichen

Mit „map“, ein Bild oder eine Karte mit anklickbaren Bereichen versehen.

<img src="bild.gif" width="200" height="150" alt="Bild" usemap="#beispiel" />

<map name="beispielmap">
<area shape="rect" coords="0,0,75,200" alt="bsp1" href="link_1.htm" />
<area shape="circle" coords="90,66,6" alt="bsp2" href="link_2.htm" />
<area shape="circle" coords="142,42,7" alt="bsp3" href="link_3.htm" />
</map>

Das „name“ Attribut wird benötigt, um die Karte dem „<img>“ zuzuordnen und stellen so die Beziehung zwischen Karte und Bild her. „<map>“ unterstützt auch „globale“ und „event“ Attribute von HTML5.

Den Bereich innerhalb einer „<map>“ definiert „<area>“.

Attribute:

alt ⇒ alternativer Text für Region
coords ⇒ Koordinaten eines Raumes
href ⇒ Zielurl der Region
hreflang ⇒ Sprache der Zielurl
shape ⇒ Form der Fläche

Multimedia

audio

Das HTMLl5 „audio“ Tag kann zur Wiedergabe von Audiodateien, ohne eine andere Erweiterung wie „Flash“ verwendet werden. Das Audio Tag unterstützt derzeit ogg, wav und mp3 Dateien. Die Unterstützung der Audioformate hängt vom verwendeten Browser ab.

<audio controls="controls" preload="preload">
  <source src="/pfad/zu/audio/audio.ogg" type="audio/ogg; codecs=vorbis" controls>
Dein Browser unterstützt das html5 audio Element nicht.
</audio>

^{Beispielausgabe im Firefox.}

video

Das „video“ Tag kann zur Wiedegabe von Videos verwendet werden. Auch hier muss dann natürlich dieses Video Tag vom Webbrowser unterstützt werden.

<video width="320" height="240"  controls="controls" preload="preload">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Dein Browser unterstützt das video Element nicht.
</video>