HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)

Auch hier sei zu Beginn des Tutorials wieder darauf hingewiesen, dass ihr von den vorgestellten Elementen keine Wunderdinge erwarten solltet. Optisch machen diese nämlich tatsächlich noch nicht viel her. Interessant sind sie aber natürlich vor dem Hintergrund, dass ihr damit eure Dokumente logisch und semantisch strukturieren könnt.

Navigationsbereiche

Über das nav-Element lassen sich Navigationsleisten oder andere Bereiche für zusätzliche Elemente semantisch auszeichnen. Gedacht ist dieses Element also hauptsächlich, um Hyperlinks auf andere Seiten oder auf ergänzende Informationen zu markieren.

Ein Beispiel:

<nav>
   <a href="index.html">Startseite</a>
   <a href="html5.html">HTML5 lernen</a>
   <a href="css.html">CSS</a>
   <a href="cms.html">Joomla!</a>
   <a href="wordpress.html">Wordpress</a>
</nav>

Innerhalb von nav könnt ihr beliebige Elemente verwenden. Ihr könnt die Navigation also nach wie vor über Listen definieren. Andere Elemente lassen sich aber ebenfalls problemlos innerhalb von nav einsetzen. nav darf zudem innerhalb eines Dokuments auch mehrfach vorkommen.

Details angeben

Ein weiteres interessantes Element ist details. Darüber kann man – und das lässt bereits der Elementname erahnen – zusätzliche Informationen über einen Inhalt angeben. Beachtet, dass das details-Element erst in Verbindung mit dem summary-Element richtig interessant wird. Mehr zu diesem Element dann im Anschluss.

Zunächst ein Beispiel für den Einsatz von details:

<article>
  <details>
    <summary>Verweise zum Artikel...</summary>
    <ul>
      <li><a href="verweise1.html">Link 1</a></li>
      <li><a href="verweise2.html">Link 2</a></li>
      <li><a href="verweise3.html">Link 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Quellenangaben zum Artikel ...</summary>
    <ul>
      <li><a href="quelle1.html">Link 4</a></li>
      <li><a href="quelle2.html">Link 5</a></li>
      <li><a href="quelle3.html"">Link 6</a></li>
    </ul>
  </details>
</article>

Der Inhalt des details-Elements wird so lange vor dem Besucher versteckt, bis der das innerhalb von details enthaltene summary-Element anklickt.




Interessant könnte das beispielsweise im Zusammenhang mit einem Video-Player sein. Auch hierfür ein Beispiel:

<video id="film" width="320" height="180" autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>
<details open>
  <summary>Videoplayer-Steuerung ein-/ausblenden</summary>
  <p>
    <button id="start" onClick="start()">Start/Pause</button>
    <button id="stumm" onClick="stumm()">Stummschalten</button>
    <button id="lauter" onClick="lauter()">Lauter</button>
    <button id="leiser" onClick="leiser()">Leiser</button>
  </p>
</details>

Wird die Seite aufgerufen, ist zunächst einmal nur das Playerfenster zu sehen.




Klickt ein Besucher nun allerdings auf den Ein- und Ausblenden-Link, werden die innerhalb von summary definierten Inhalte angezeigt.




Laut Spezifikation sollen die Browser, wenn kein summary-Element gefunden wird, einen Standardinhalt anzeigen.

Interessant ist übrigens auch das open-Attribut für details.

<details open>
…
</details>

Wird dieses Attribut gesetzt, ist der Inhalt des summary-Elements beim Laden der Seite direkt zu sehen.

Zusammenfassungen

Jetzt also noch einmal ein etwas detaillierter Blick auf das summary-Element.

<article>
  <details>
    <summary>Verweise zum Artikel...</summary>
    <ul>
      <li><a href="verweise1.html">Link 1</a></li>
      <li><a href="verweise2.html">Link 2</a></li>
      <li><a href="verweise3.html">Link 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Quellenangaben zum Artikel ...</summary>
    <ul>
      <li><a href="quelle1.html">Link 4</a></li>
      <li><a href="quelle2.html">Link 5</a></li>
      <li><a href="quelle3.html"">Link 6</a></li>
    </ul>
  </details>
</article>

Innerhalb von summary wird also in Verbindung mit details der noch nicht geöffnete Inhalt definiert. Dank summary lassen sich also zusätzliche Informationen einbinden, die erst bei Bedarf eingeblendet werden.

Zugegebenermaßen könnte man auf- und zuklappbare Bereiche natürlich auch ganz einfach per JavaScript realisieren. Ist JavaScript allerdings im Browser deaktiviert, wird die Anwendung nicht funktionieren. Von daher ist eine baldige breite Unterstützung von details und summary wünschenswert.

Randbereiche und Marginalien

Zusätzliche Informationen, Marginalien, Querverweise usw. lassen sich in HTML5 mit dem aside-Element auszeichnen. Der dadurch ausgezeichnete Inhalt befindet sich zwar im Kontext mit dem Gesamtdokument, ist ihm aber nicht direkt zugehörig.

Beachtet bitte, dass in der HTML5-Spezifikation nicht festgelegt ist, welche Dimension für einen über aside ausgezeichneten Bereich gelten soll. Somit könnte der aside-Inhalt also beispielsweise als Marginalie, aber auch als Sidebar angezeigt werden.

Das folgende Beispiel zeigt die Definition eines aside-Bereichs.

<body>
  <header>
   <h1>PSD-Tutorials.de</h1>
  </header>
 <article>
  <h2>Web-Apps erstellen (Teil 10): jQuery mobile (2)</h2>
    <p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das HTML-Grundgerüst, das ihr bereits kennengelernt habt.</p>
    <aside>
     <h3>Weiterführendes</h3>
      <ul>
       <li><a href="#/fn1">Weiterführende Informationen gibt es…</a></li>
      </ul>
     </aside>
    </article>
    <aside>
     <nav>
      <h2>Navigation</h2>
      <ul>
       <li><a href="#">Startseite</a></li>
       <li><a href="# ">Kontakt</a></li>
     </ul>
     </nav>
   </aside>
  </body>

Zeitangaben hinzufügen

Zeitangaben können über das neue time-Element speziell ausgezeichnet werden. Die Besonderheit dieses Elements besteht darin, dass die Zeitangaben von Mensch und Maschine lesbar sind.

Für Menschen werden die Zeitangaben ins time-Element geschrieben. Um den Browsern die Chance zu geben, die Zeitinformationen ebenfalls auslesen zu können, wird das datetime-Attribut des time-Elements verwendet.

<p>Wir treffen uns am 
<time datetime="2014-04-15 19:00">15. April um 19 Uhr</time>.
</p>

An dieser Stelle noch einmal der Hinweis, dass das in den aktuellen Browsern zunächst einmal keine optischen Auswirkungen hat, sondern ausschließlich dazu gedacht ist, Zeitangaben maschinenlesbar zu machen.

Texte hervorheben

Mit dem mark-Element gibt es die Möglichkeit, Wörter oder ganze Textpassagen optisch hervorzuheben. Dabei wird in der Spezifikation von HTML5 ausdrücklich darauf hingewiesen, dass das Element nur in Verbindung mit textuellen Inhalten verwendet werden soll. Zudem muss es in einer bestimmten Beziehung zum Kontext stehen.

Ein Beispiel:

<p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das <mark>HTML-Grundgerüst</mark>, das ihr bereits kennengelernt habt.</p>

Wie die Browser die Hervorhebung umsetzen, ist dabei nicht festgelegt.




Google Chrome und Firefox setzen allerdings beide auf einen gelben Hintergrund.

Dialoge auszeichnen

Auch an die gesonderte Auszeichnung von Dialogen wurde in HTML5 gedacht. Hierfür gibt es das dialog-Element. Momentan wird das dialog-Element allerdings ausschließlich von Safari und Google Canary, also der Entwicklerversion des Browsers, unterstützt.




Auch hierzu wieder ein Beispiel:

<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Das ist der Inhalt der Box.</p>
<button id="hide">Schließen</button>
</dialog>
<button id="show">Zeige den Inhalt</button>
</div>
<script type="text/JavaScript">
(function() {  
    var dialog = document.getElementById('dialog');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog.close();  
    };  
})(); 
</script>

Sobald die Schaltfläche angeklickt wird, ist der Dialog zu sehen. Damit das Ganze funktioniert, wird im vorherigen Beispiel auf eine Kombination aus HTML5, CSS und JavaScript gesetzt.