Sponsored Post: Semantische Websites mit HTML5

Sponsored Post (Was ist das?)
20.02.2012

22 17 30 ◄ Blättern ►

Die neuen HTML5-Elemente erlauben Webentwicklern, Websites semantisch besser aufzubereiten. Beispiele für neue Ansätze, die durch die neuen Elemente ermöglicht werden, gibt es viele. Dieser Artikel gibt anhand eines Beispiels für die Erstellung eines einfachen Blog-Layouts einen praktischen Einblick in die Möglichkeiten von HTML5-Elementen.

Websites müssen funktional sein und optisch überzeugen. Wie sie unter der Haube aussehen, kümmert den Besucher einer Website wenig. Hier hat der Webentwickler sein Reich und nutzt die ihm zur Verfügung stehenden HTML-Elemente. Ob ein `h1`, `span`, `div` oder `p`, schnell lässt sich eine Seite als Dokument beschreiben. Aber eben nur als Dokument. Was fehlt, sind semantische Möglichkeiten zur Strukturierung. Das folgende Beispiel soll das verdeutlichen:

<div>
    <h1>Meine Webseite</h1>
</div>
<div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>
<div>
    <ul>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Search</a></li>
    </ul>
</div>
<div>
    <h2>Ein neuer Post</h2>
    <div>...</div>
</div>
<div>
    <span>&copy; 2012 by Max Mustermann</span>
</div>

So könnte ein Weblog aussehen. Es gibt eine Seitenüberschrift, Navigation, Inhalt und eine Fußnote. Mittels CSS lassen sich diese Bereiche auch visuell anpassen und positionieren. Doch woran erkennt man letztlich, welches `div` welchen Bereich darstellt? Im Webdesign bedient man sich hierzu CSS-Klassen.

<div class="header">
   <h1>Meine Webseite</h1>
</div>

Die CSS-Klasse `header` dient hier als semantische Hilfe. Der Kopfbereich der Webseite wird damit deklariert. Letztlich bleibt es dem Webentwickler überlassen, wie er seine Bereiche inhaltlich unterscheidet. CSS-Klassen sind eine der Möglichkeiten, die dafür zur Verfügung stehen.

Semantik pur

Und genau hier kommen die neuen semantischen HTML5-Elemente ins Spiel. Wo Webentwickler sich bisher selbst gewisse Konventionen für Semantik setzen mussten, kann man nun auf fertige semantische Elemente wie `article`, `section`, etc... zurückgreifen. Am besten lassen sich die semantischen Elemente anhand eines Webseiten-Designs erklären. Für ein Webseiten-Design braucht man einen Anwendungsfall, hier dient ein einfaches Blog-Layout als Beispiel.

Layout der Beispiel Seite

Ein typisches Blog-Design soll es werden. Oben eine Kopfzeile mit Navigation und Beschreibung der Seite, darunter der eigentliche Inhalt, rechts davon zusätzliche Informationen und unten schließlich die Fußzeile für Impressum und ähnliches. Hier die semantische Struktur:

Hallo Blog, welches Blog?

Beim Gestalten des Blog geht es im ersten Schritt um die Kopfzeile. Der Besucher soll erkennen, wo er sich befindet. Welche Webseite ist das, wo in der Webseite bin ich und welche wichtigen Bereiche, die ich direkt ansteuern kann, gibt es auf der Webseite? Um das entsprechend umzusetzen, bedient man sich drei neuer Tags: <header>, <hgroup> und <nav>.

Mit dem <header> Tag definiert man semantisch die Überschrift des momentanen Kontextes. Der Kontext ist in diesem Fall der <body> und damit die gesamte Webseite. Das <header> Element kann mehrfach in der Webseite vorkommen, in unterschiedlichen Kontexten. Zum Beispiel in einem Post oder in einem Artikel. Das <hgroup> Element gruppiert Header Tags, also <h1>,<h2>,<h3>. Da wir die Webseite mit zwei Header-Elementen beschreiben, verwenden wir das <hgroup> Tag, um diese Headings semantisch zu gruppieren. Schließlich fehlt noch die Navigation. Diese wandert auch in das <header> Tag und wird aus einer unsortierten Liste bestehen. Hier die Grafik zum Vorgehen:

Das Resultiert in folgenden HTML Code:

<!doctype html>
<html>
   <body>
      <header>
         <hgroup>
            <h1>Mein Blog</h1>
            <h2>Zeugs das ich los werden muss</h2>
         </hgroup>
         <nav>
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Archive</a></li>
               <li><a href="#">About Me</a></li>
               <li><a href="#">Kontakt</a></li>
            </ul>
         </nav>
      </header>
   </body>
</html>

Artikel braucht ein Blog

Auch für den Hauptinhalt der Seite gibt es neue Tags, allen voran <article>. Ein <article> Element enthält die eigentlichen Informationsinhalte und beinhaltet in unserem Beispiel auch ein <header>- und ein <footer>- Tag. Im <header> landet die Überschrift des Inhalts sowie Informationen zum Autor und das Publizierungsdatum. Im <footer> gibt es zusätzliche Navigationselemente für Social-Bookmarking, die in einem <nav> Element hinterlegt sind. Damit sieht die Umgestaltung des Inhaltsblocks grafisch so aus:

Das <section>-Element definiert den gesamten Bereich als zusammenhängendes semantisches Konstrukt. Möchte man zum Beispiel Seiten komplett umgestalten, so kann man diese komplette Sektion weiterverwenden und an ein anderes DOM-Element hängen. Die Sektion kann mehrere <article> beherbergen und ist der Hauptbereich der Webseite. Erweitern wir die Seite um folgenden HTML Code:

<section id="content">
   <article>
      <header>
         <h2>HTML5 Tutorial</h2>
      </header>
      <div>
         Bla bla bla
      </div>
      <footer>
         <nav>
            <ul>
               <li><a href="#">Tweet this</a></li>
               <li><a href="#">Email this</a></li>
            </ul>
         </nav>
      </footer>
   </article>
</section>

Seitenwind

Das Blog soll auch eine Sidebar erhalten. Hier könnte man das neue <aside>-Element verwenden. Liest man allerdings die Definition des Tags kommen Zweifel auf:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Die Sidebar wäre immer sichtbar, bei jedem Artikel, ein <aside> Element sollte laut Definition zum jeweiligen Inhalt einen gewissen Bezug haben. Wenn man dynamische Webseiten erstellen kann, wäre es denkbar, die Sidebar immer relevant zum angezeigten Inhalt anzupassen.

Für das Beispiel Blog nehmen wir stattdessen eine Sektion. <aside> kann dann womöglich direkt im Artikel zum Einsatz kommen.

<section id="sidebar">
   <article>
      <header>
         <h2>@writeline auf Twitter</h2>
      </header>
      <div>Tweets...</div>
   </article>
   <nav>
      <ul>
         <li><a href="#">Follow me on Twitter</a></li>
         <li><a href="#">Archiv</a></li>
         <li><a href="#">Search</a></li>
      </ul>
   </nav>
</section>

Ein guter Abschluß!

Fehlt nur noch die Fußzeile. Copyright und Impressum sollen dort eingebaut werden. Das <footer>-Element haben wir schon beim Artikel verwendet, im Kontext von <body> ist es die Fußzeile der Webseite.

<footer>
   <ul>
      <li>&copy; 2012 by Max Mustermann</li>
      <li><a href="#">Impressum</a></li>
   </ul>
</footer>

Das angedachte Layout ist nun in HTML5 semantisch abgebildet und kann in der Folge mit CSS visuell verfeinert werden.

Wer an der gesamten Beispielanwendung interessiert ist, findet diese im Tutorial Eine HTML5 Webseite mit WebMatrix erstellen.

Kan Nie Verstaan

Da war doch was? Richtig! Was der Browser nicht kennt, ignoriert er einfach. So auch die neuen semantischen Elemente, falls man keinen modernen Webbrowser wie zum Beispiel den Internet Explorer benutzt. Hier kann eine Bibliothek wie der Modernizr helfen. Er erlaubt es, sogenannte Polyfills auf älteren Browsern zu aktivieren, die fehlende HTML5-Funktionalität nachbauen. Das funktioniert erstaunlich gut.

Fazit

Durch die neuen HTML5-Elemente können Webseiten nun semantisch besser aufbereitet werden und erlauben es nicht nur Menschen besser zu verstehen, welche Bereiche welche Bedeutung haben. Zukünftige Browser oder auch Betriebssysteme könnten die Seite grafisch anders aufbereiten. Navigationselemente müssten nicht zwangsläufig nur auf der Webseite bleiben, diese könnten auch direkt nativ im Dock des Betriebssystems angezeigt werden. Die Möglichkeiten sind groß – wichtig ist es einen Anfang zu machen.

Weiterführende Links:

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden