HTML5 Aufbau von Dokumenten

<!DOCTYPE html>
 <html lang="de">
     <head>
         <title>HTML5 und CSS3 Schulung von Nico Schober - Senior Frontend Engineer - hmmh AG! </title>
         <meta charset="utf-8">
         <meta name="description" content="HTML5 Starter Pack by Sickdesigner.com">
         <link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
         <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
         <link rel="stylesheet" href="css/queries/netbooks-tablets.css" type="text/css" media="screen and (max-width: 1007px)" />            
            
         <script type="text/javascript" src="js/html5.js"> </script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>     
            
         <!--[if IE 7]> <link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen"> <![endif]-->
         <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen"> <![endif]-->
     </head>
     <body>
     <div id="header">
 <div id="logo">Logo</div>
                        <div id="search">Suche</div>
                        <div id="nav">Hauptmenü</div>
                      </div>
                    
                      <div id="content">
                        <h1>Hauptbereich</h1>
                    
                        <div class="section">
                          <h2>Sektion</h2>
                          <h3>Abschnitt</h3>
                    
                          <!-- Content -->
                        </div>
                    
                        <div class="section">
                          <h2>Sektion</h2>
                    
                          <!-- Content -->
                        </div>
                      </div>
                    
                      <div id="sidebar">
                        <div id="subnav">Bereichsmenü</div>
                      </div>
                    
                      <div id="footer">Footer</div>
                    </body>
                    </html>                  
                      

Eine HTML5 Seite sieht erst einmal vom Aufbau genauso aus wie eine XHTML Seite. Auf anhieb fllt der sehr einfache Doctype auf, den man sich endlich mal merken kann. Hat man also ein valides XHTML Dokument und tauscht den Doctype aus, hat man automatisch auch ein valides HTML5 Dokument:

<!DOCTYPE html>
                    

Man sollte darauf achten das folgende Elemente basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir, noscript und folgende Attribute nicht im Dokument auftauchen.

Soweit man das alles beachtet, kann man HTML5 heute schon einsetzen und hat damit in den meisten Browsern keine Probleme. Aber auch keine Vorteile. Denn HTML5 wird ja erst durch die neuen Elemente und Attribute interessant.

Neue HTML5 Elemente und Attribute

Ab hier begibt man sich auf experimentelles Gebiet, denn nicht alle neuen Browser interpretieren alle neuen HTML5 Tags und alle alten Browser verfahren mit unbekannten Elementen anders. Dabei ist das beste Verhalten, das ein Browser bei unbekannten Tags an den Tag legen kann, es zu ignorieren. Wichtig beim heutigen Einsatz von HTML5 ist also das Fallback-Verhalten von veralteten Browsern.

Elemente für die Struktur

Diese Elemente helfen das Dokument sinnvoller auszuzeichnen. Man kann diese Elemente als moderne <div> Tags mit "Sinn" verstehen. Im abschliessenden Beispiel, wird das hoffentlich gut erkenntlich.

HTML5 <section> Tag

Section macht genau das, was was sein Name schon erahnen lsst. Er unterteilt das Dokument in verschiedene Sektionen. Vor HTML5 musste man DIV Elemente mit entsprechender ID verwenden um zb. Header oder Footer abzugrenzen (und zu Stylen). Damit ist man wieder ein Schritt weg von der DIV Hlle und kann sein Dokument semantisch korrekter gestalten.

<section id="content">
    <p>Hallo hier steht Content.</p>

</section>
                    

HTML5 <article> Tag

Article zeichnet Artikel aus. Macht Sinn, denn heute haben Blogs die Weblandschaft erobert. Auch hier musste man bisher auf DIVs zurckgreifen. <article> verleiht auch hier dem nhalt Semantik.

<article>

    <h2>Mein Blogartikel</h2>
    <p>Hier knnte ein Text stehen.</p>
</article>
                    

HTML5 <aside> Tag

Viele Blogs oder Webseiten haben eine Sidebar. Inhalte die nicht wirklich etwas mit dem aktuell angezeigten Artikel zu tun haben. Genau da springt <aside> ein und hilft Suchmaschinen wie Google oder Screenreadern auf die Sprnge.

HTML5 <header> Tag

Der <header> Tag zeichnet den Kopf eines Dokuments oder einer <section> aus. Hier sollten berschriften für Blog Artikel oder die Dokument Headline hinein. Der Header informiert praktisch ber den eigentlichen Inhalt einer <section> oder eines HTML5 Dokuments.

HTML5 <footer> Tag

Der <footer> informiert ber Copyright oder relevante Links zu anderen Dokumenten die in Beziehung mit dem aktuellen Dokument oder <section> stehen. Der <footer> Tag kann in HTML Dokumenten oder auch in <section> Elementen verwendet werden.

HTML5 <nav> Tag

Jede Seite hat eine Navigation um auf andere Seiten zu gelangen. Der Ideale Platz für Navigationslinks bei HTML5 ist nun genau innherhalb dieses <nav> Tags. Die Links knnen per <ul> oder <table> angeordnet sein.

Wenn Wir alles nun zusammen nehmen, knnte ein HTML5 Dokument nun folgendermassen aussehen:

<header>
<!-- Logo usw. -->
</header>
<nav>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/about-me">über mich</a></li>
</ul>
</nav>
<article>
<section id="BlogArtikel_1">
<header>
<h1>Mein erster Blog</h1>
<p class="details">von Robert Agthe</p>
</header>
<footer> (c) 2009 Robert Agthe </footer>
<p>Hier steht der eigentliche Artikel mit Text usw.</p>
</section>
</article>
<aside>
<!-- Sidebar mit Links usw. -->
</aside>
<footer>
<!-- Copyright und Impressum -->
</footer>

Elemente für Inhalt und Medien

HTML5 erweitert seine Auszeichnungen Endlich um praktische Anwendungsgebiete. Video, Audio, Chats, Foren usw. gehren zum tglichen Webleben einfach dazu und verdienen eine sinvolle Auszeichnung.

HTML5 <dialog> Tag

Im HTML5 Standard wurden viele moderne Anwendungsgebiete bercksichtig und mit einbezogen. So auch Chats oder Foren Eintrge bzw Blog Kommentare. Der Ergebnis findet man im <dialog> Tag. Damit kann man nmlich Konversationen auszeichnen. Das ganze funktioniert hnlich einer Definitions Liste <dl>:

<dialog>
<dt>Robert</dt>
<dd>Hallo Daniel</dd>
<dt>Daniel</dt>
<dd>Hallo Robert. Naaaa? Was geht ab?</dd>
</dialog>

HTML5 <figure> Tag

Viele Medien knnen nicht von Suchmaschinen oder behinderten Menschen erfasst werden. Um diese Medien textlich zugnglich zu machen, kann man sie per <figure> Tag an eine Beschreibung binden.

<figure>
<video src="ogg"></video>
<legend>Video über eine Bushaltestelle</legend>
</figure>

HTML5 <audio> und <video> Tag

Die zwei Tags erlauben es nun zum ersten mal, Video und Audio direkt im Browser wiederzugeben ohne auf Javascript oder Flash zurckgreifen zu mssen. Browser die den HTML5 Standard untersttzen mssen einen Standardplayer definiert haben um diese Inhalte wiederzugeben. Dennoch kann der Developer der Seite seinen eigene Wiedergabemethode implementieren.

HTML5 <canvas> Tag

Der fast interesanteste Tag von allen. Er ermglicht es Vektor- und Bitmap-Grafiken, Animationen und Spiele im Browser zu realisieren. Was damit mglich wird sieht man zb. auf der Seite von 9Elements. Um im <canvas> Element zu Zeichnen, ist Javascript ntig. Damit knnen dann aber leicht Kurven, Linien, Farbverlufe usw. dargestellt werden.

HTML5 <embed> Tag

Mit <embed> werden, wie bisher auch schon, PlugIns wie Flash oder Java eingebunden.

HTML5 <mark> Tag

Mit <mark> lassen sich Textpassagen markieren. Man stelle sich eine Suchfunktion, vor die auf einer Ergebnisliste die in die Suche eingegebenen Wrter mit <mark> hervorheben. Damit kann man also Wrter in Bezug zu der aktuellen Benutzerinteraktion herstellen. Verwendet man dieses Element in einem Zitat, kann man damit den Bezug zur Antwort verdeutlichen.

HTML5 <meter> Tag

Mit diesem Tag kann man eine "Spanne" darstellen. Wichtig ist, dass der Maximale Wert dieser Spanne bekannt sein mu.

<meter min="0" max="100" value="2" title="millimeters">104mm</meter>
<meter min="0" max="100" value="25"></meter>
<meter>23%</meter>

HTML5 <progress> Tag

Damit kann man den Status einer laufenden Aktion auszeichnen. Beispielsweise bei einer Installation oder eines Bilduploads.

<progress value="10" max="100">63%</progress>

                    

HTML5 <time> Tag

Um Zeit auszuzeichnen gab es bisher keine Mglichkeit. Zeitangaben waren für alle Screenreader und Suchmaschinen Bots bisher einfach Text wie alles andere auch. Nun kann man Zeitangaben sinnvoll auszeichnen. Sind sie doch auch sehr wichtige Informationen die zeigen ob Dokumente aktuell oder veraltet sind oder ob Events abgelaufen sind oder erst noch stattfinden.

<time>1. Augus 2009</time>
<time datetime="2010-12-24">24. Dezember 2010</time>

                    

HTML5 <command> Tag

Tastenkombinationen lassen sich mit diesen Tag auszeichnen. Oft lassen sich Webseiten per Tastatur bedienen. Die Auszeichnung hilft diese Tastenkombinationen technisch auszulesen und vom Content abzutrennen.

HTML5 <datagrid> Tag

Dynamische Datenraster lassen sich mit <datagrid> austauschen. Damit sind Tabellen, Listen oder Bume (trees) gemeint, die dynamisch ausgegeben werden. <datagrid> kann andere Elemente wie <ol> oder <table> enthalten.

HTML5 <datalist> Tag

Damit kann man zb. Listen von vordefinierten Eingaben zur Verfgung stellen. Man denke da an "Autocomplete" Funktionen in Form Elementen.

<input type="text" list="antworten">
<datalist id="antworten">
<option value="Ich habe geraucht">
<option value="Ich habe getrunken">
<option value="Ich habe gekifft">
</datalist>

HTML5 <details> Tag

Zustzliche Informationen zu anderen Elementen oder Medien.

<details open="open">
<p>Auf dem Bild sehen Sie eine Katze</p>
</details>

HTML5 <bb> Tag

Soll Browserspezifische Funktionen anstoßen können (denkbar wären Drucken, Zoom, Download).

HTML5 <output> Tag

Ergebnis einer Kalkulation oder einer Auswertung. In einem Warenkorb wre die Summe der bestellten Artikel eine gutes Beispiel diesen Tag anzuwenden.

HTML5 <ruby>,<rt>,<rp> Tag

Mit "ruby" ist hier nicht die Scriptsprache Ruby gemeint. Es geht um eine Ausspracheanleitung von Chinesischen oder Japanischen Schriftzeichen.

Ruby ist ein Begriff aus der Typografie für ein Annotationssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint. Bei chinesischen oder japanischen Texten wird Ruby fr eine Ausspracheanleitung genutzt. Diese spezielle Nutzung der Ruby-Technik im Japanischen heit Furigana.