5. • das Web hat sich seit der Entwicklung von HTML4/XHTML1 grundlegend
verändert
• statische Dokumente werden zu komplexen Applikationen
• semantisches Fundament fehlt
• HTML5 soll das ändern
• Entwicklung begann bei WHATWG
• 2006 reaktiviert W3C die alte HTML-Arbeitsgruppe
• beide Organisationen arbeiten an gemeinsamer Spezifikation
• Editor Ian Hickson (google) sammelt und fürht Vorschläge zusammen
9. Nein! Es sind beide Serialisationen (Schreibweisen) möglich
Wichtig! Beide haben selben DOM
HTML5 erlaubt XML Syntax für Elemente ohne End-Tag: <img … />
Bsp: Unterschiedlicher DOM bei HTML4 und XHTML
HTML4 - bei einer Tabelle wird explizit <tbody> in das DOM eingefügt
in XHTML nicht
<table><tr><td>Text</td></tr></table>
in HTML4 zeigt das CSS table > tr > td bei keine Wirkung
14. Sektionen: Der Elementtyp section
• Zeichnet eine Sektion aus
• eine Sektion ist eine Gruppe von Elementen die thematisch
zusammengehören -z.B. Inhalte und dazugehörige Überschriften
zusammenfassen
• ist semantisch nicht leer bzw. bedeutungslos
• zur Zusammenfassung von Elementen fürs Styling div verwenden
Kopfbereich: Der Elementtyp header
• definiert „Kopfbereich“ einer Webseite oder einer Sektion
15. Navigationsbereich: Der Elementtyp nav
• Zeichnet einen Bereich mit Navigationslinks aus
• Nur Haupt- und Bereichsmenüs auszeichnen
<nav>
<h2>Navigation</h2>
<ul>
<li class="home"><strong title="Hier befinden Sie sich
gerade.">Startseite</strong></li>
<li><a href="/adventskalender/">Adventskalender</a></li>
<li><a href="/mission-statement/">Mission Statement</a></li>
<li><a href="/linkliste/">Linkliste</a></li>
<li><a href="/krautcosmos/">KrautCosmos </a></li>
<li><a href="/impressum/">Impressum</a></li>
</ul>
</nav>
Navigationsbereich mit Hauptmenü
16. Eigenständige Bereiche: Der Elementtyp article
• Zeichnet inhaltlich eigenständige Bereiche einer Webseite aus
<article>
<header>
<h1>Frontendentwicklung ist nicht einfach!</h1>
<p class="postmetadata">31. Juli 2009 | Abgelegt in
<a href="/category/artikel/" rel="category tag">Artikel</a>
| Tags: <a href="/tag/css/">CSS</a>,
<a href="/tag/html/">HTML</a></p>
</header>
<p>»Aber CSS ist doch einfach!« Man könnte stattdessen
auch »Frontendentwicklung« oder »HTML« setzen. (...) Lasst
es Euch nicht einreden: Frontendentwicklung ist nicht
einfach, sondern eine ständige Herausforderung!</p>
<section>
<h2>1 Kommentar</h2>
<p>Du kannst einen Kommentar hinterlassen oder einen
Trackback auf deiner Website einrichten.</p>
<article id="comment-42">
<header>
<h3><cite>Kommentar von Max Mustermann</cite></h3>
<p class="commentmetadata">02. August 2009</p>
</header>
<p>Toller Artikel! Danke!</p>
</article>
</section>
</article>
Auszeichnung eines Kommentars als verschachteltes article-Element
17. Marginalien und Randbereiche: Der Elementtyp aside
• enthält erläuternde und weiterführende Informationen als Ergänzung zum
Hauptinhalt
<aside>
<h1>Webkrauts Mission Statement</h1>
<p>Die Webkrauts setzen sich dafür ein, die Vorteile der
Webstandards auch im deutschsprachigen Raum stärker zur
Geltung zu bringen.</p>
<p>Sie leisten Aufklärungsarbeit durch Veröffentlichungen
im Netz und in anderen Medien.</p>
</aside>
Informationen über die Webkrauts als erläuternder Kasten
20. • Aktuelle Versionen von Opera, Safari und Firefox stellen alle vorgestellten
Elemente wie gewünscht dar
• CSS Anweisung notwendig:
article, aside, footer, header, hgroup, nav, section
{ display: block; }
• Ältere Browser haben allerdings einige Probleme.
• Firefox 2 (und jeder andere Browser mit einer Gecko-Version kleiner als 1.9b5)
schließt unbekannte Elemente, sobald er auf ein Blockelement stößt wie p, h1,
div und so weiter.
• Im Internet Explorer gibt es ein ähnliches Problem, und das zieht sich durch
sämtliche Versionen, die heute noch relevant sind – bis IE6
<section class="sektion">
<h1>Foo</h1> <section class="sektion"></section>
<h1>Foo</h1>
<p>Bar</p> <p>Bar</p>
</section> </section><//section>
<p>Baz</p>
<p>Baz</p>
• Die beste Lösung stellt dabei das HTML5 enabling script von Remy Sharp dar.
document.createElement('section');
23. Native Einbindung von Filmen in Webseiten
Browser Unterstützung:
• Firefox ab Version 3.5,
• Safari ab 3.2,
• Google Chrome Browser (Version 3.x).
• Opera hat für Version 10.1 eine Unterstützung angekündigt.
• Redmonder Browser (IE) bleiben augenblicklich komplett außen vor.
Codecs und Formate
• Mozilla Foundation und Opera ausschließlich Ogg Media Container(.ogg, .ogv)
und den Theora Video Codec
• Apple's Safari H.264 Codec (.mp4, .mp4v)
• Google Browser Chrome unterstützt beide
• Redmond schweigt
Einbindung
<video src="sample.ogg" controls> <video src="sample.mp4" controls>
Ihr Browser unterstützt das Element Ihr Browser unterstützt das Element
<code>video</code> nicht <code>video</code> nicht
oder erkennt das Format der Datei nicht. oder erkennt das Format der Datei nicht.
</video> </video>
25. Native Einbindung von Filmen in Webseiten
Browser Unterstützung:
• Firefox ab Version 3.5,
• Safari ab 3.2,
• Google Chrome Browser (Version 3.x).
• Opera hat für Version 10.1 eine Unterstützung angekündigt.
• Redmonder Browser (IE) bleiben augenblicklich komplett außen vor.
Codecs und Formate
• Mozilla Foundation und Opera ausschließlich Ogg Media Container(.ogg) und
Vorbis Audio Codec, Wave (.wav)
• Apple's Safari MPEG-1, Audio Layer 3 Format (.mp3), Wave (.wav)
• Google Browser Chrome unterstützt beide
• Redmond schweigt
Einbindung
<audio controls>
<source src="sample-audio.ogg" type="audio/ogg" />
<source src="sample-audio.mp3" type="audio/mpeg" />
Ihr Browser unterstützt das Element
<code>audio</code> nicht oder beide Formate
(Ogg/Vorbis, MPEG3) der Audiodatei(en) sind unbekannt.
</audio>
27. •ermöglicht Zeichenoperationen, mit Hilfe derer wir (fast) beliebige geometrische
Formen und Pfade zeichnen können.
•beispielsweise die Erstellung von Charts und/oder Diagrammen
•umfangreiche Möglichkeiten zur Komposition, Animation und Manipulation von
Bilder und Grafiken und Filmen.
•ähnlich wie Actionscript
Browser Unterstützung:
• Alle Browser mit mind. Gecko 1.8 Engine (Firefox ab 1.5),
• Safari ab 3.x,
• Opera ab 9.x
• der aktuelle Google-Browser Chrome
• Internet Explorer interpretiert das Element noch nicht. Javascript Lösung
Einbindung
<canvas id="sample" width="290" height="150">
Ihr Browser unterstützt das Element
<code>canvas</code> nicht.
</canvas>
das Web hat sich seit 1999, als HTML4/XHTML1 entwickelt wurde, grundlegend ver&#xE4;ndert. Aus einem Web von statischen Dokumenten wurden hochkomplexe Applikationen, f&#xFC;r die aber kaum semantisches Fundament vorhanden ist. Das soll sich in HTML5 &#xE4;ndern.
Die Entwicklung begann bei der WHATWG, einer Gruppe von Browserherstellern, die mit dem W3C-Prozess nicht einverstanden waren. Dort wurde der (zu vorigen (X)HTML-Versionen inkompatible) XHTML2-Standard entwickelt, der aber auf keinerlei Akzeptanz bei den Browserherstellern stie&#xDF;. 2006 sah das W3C ein, dass HTML5 eine gute Sache ist und reaktivierte die alte HTML-Arbeitsgruppe. Beide Organisationen existieren heute nebeneinander und arbeiten an einer gemeinsamen Spezifikation, Editor Ian Hickson (Google) sammelt die Vorschl&#xE4;ge und f&#xFC;hrt sie zusammen.
Unterst&#xFC;tze existierende Inhalte: Parser (nicht Autoren!) sollen mit alten, aber dennoch existierenden Techniken umgehen k&#xF6;nnen, auch wenn sie nicht in HTML5 festgelegt sind. So werden bspw. fehlerhaft verschachtelte Elemente (<b>a<i>b</b>c</i>) genauso unterst&#xFC;tzt wie Elemente, die nicht mehr zum Standard geh&#xF6;ren (<u> etwa).
Graceful degradation (etwa: &#x201E;Schrittweises Zur&#xFC;ckfallen&#x201C;): Wird eine Komponente in HTML5 nicht von einem Browser unterst&#xFC;tzt, so darf das nicht dazu f&#xFC;hren, dass die gesamte Webseite unzug&#xE4;nglich wird. Beispiel: Das (vorgeschlagene) irrelevant-Attribut kann per CSS emuliert werden: [irrelevant] {display:none;}
Das Rad nicht neu erfinden: Wenn es schon eine weit verbreitete und implementierte Technik gibt, dann sollte sie &#xFC;bernommen werden statt etwas komplett neues zu entwickeln. Beispiel: contenteditable="" (um Bereiche der Seite bearbeitbar zu machen) ist bereits in vielen Browsern vorhanden und wird daher &#xFC;bernommen.
Paving the Cowpaths (etwa: &#x201E;Trampelpfade pflastern&#x201C;): Wenn es schon weit verbreitete Techniken gibt, dann sollte in Erw&#xE4;gung gezogen werden diese zu nutzen. Beispiel: <br /> kommt oft in HTML statt <br> vor und es schadet niemandem, wenn man die Nutzung erlaubt.
Evolution statt Revolution: HTML5 entwickelt (X)HTML weiter und wirft altbekannte Grunds&#xE4;tze nicht weg. Das bedeutet, dass Webentwickler nichts komplett neues erlernen m&#xFC;ssen, sondern nach und nach neue Features einbauen k&#xF6;nnen. Das gilt nat&#xFC;rlich auch f&#xFC;r die Hersteller von Browsern.
Nein. HTML5 verf&#xFC;gt &#xFC;ber beide Serialisationen (Schreibweisen), kann also sowohl als X(HT)ML als auch als HTML geschrieben und interpretiert werden. Wichtig ist: Beide verf&#xFC;gen nach dem Parsen &#xFC;ber den selben DOM-Baum. Es wird also tendenziell einfacher JavaScripts f&#xFC;r HTML und XHTML zu schreiben.
Der DOM-Baum von HTML4 und XHTML1-Dokumenten konnte zuvor trotz gleicher Schreibweise unterschiedlich sein. Bei einem HTML4-Dokument wird zum Beispiel bei folgender Tabelle ein <tbody> explizit in das DOM eingef&#xFC;gt, bei XHTML nicht:
<table><tr><td>Text</td></tr></table>
Das bedeutet, dass CSS wie table > tr > td in HTML4 keine Wirkung zeigt.
Zum anderen erlaubt HTML5 ausdr&#xFC;cklich die Nutzung der XML-Syntax f&#xFC;r Elemente ohne End-Tag: <img &#x2026; /> f&#xFC;hrt nicht mehr zu Validierungsfehlern, auch wenn man ein HTML-Dokument benutzt.
Viele Webdesigner beginnen ihre Entw&#xFC;rfe mit der Entwicklung eines Wireframes (Drahtgitter, Gittermodell). Damit wird ein sehr fr&#xFC;her konzeptueller Prototyp einer Website bezeichnet, der die wichtigsten Bereiche wie Header, Navigation, Spaltenraster und Footer schematisch darstellt, h&#xE4;ufig in Form verschiedenfarbiger oder in verschiedenen Graut&#xF6;nen abgestufter K&#xE4;sten. Dabei reicht es aus, den grundlegenden konzeptuellen Entwurf nur sehr rudiment&#xE4;r abzubilden, um die Platzierung der einzelnen Bereiche zu verdeutlichen, und anschlie&#xDF;end Schritt f&#xFC;r Schritt zu verfeinern. Abbildung 1 zeigt, wie ein Wireframe in einem fortgeschrittenen Stadium aussehen k&#xF6;nnte.Abb. 1: Ein Wireframe veranschaulicht Gr&#xF6;&#xDF;e, Position und Wirkung der Hauptelemente einer Website
Webautoren gehen so &#xE4;hnlich vor, wenn sie beginnen, das Markup f&#xFC;r eine Webseite aufzubauen. Auch sie arbeiten sich von au&#xDF;en nach innen vor. Am Anfang steht die Auszeichnung der groben Struktur, deren Inhalte im Anschluss Schritt f&#xFC;r Schritt ausgezeichnet werden. In Ermangelung geeigneter Elemente f&#xFC;r Seitenbereiche wie Header, Logo, Suche, Hauptmen&#xFC;, Seitenspalte oder Footer greifen Webautoren auf div-Elemente zur&#xFC;ck und vergeben geeignete Bezeichner und Klassen. Ein solches &#xBB;Grundskelett&#xAB; einer Website zeigt Listing 1.
Sektionen: Der Elementtyp section
Das Element section zeichnet eine Sektion in einem Dokument oder einer Web-Applikation aus.
Eine Sektion ist eine Gruppe von Elementen, die thematisch zusammengeh&#xF6;ren. Beispiele daf&#xFC;r sind Abschnitte eines Textes, einzelne Register (Tabs) in einer registerbasierten Benutzeroberfl&#xE4;che oder einzelne Bereiche einer Website wie die Einleitung, der Newsbereich oder Kontaktinformationen. Sektionen enthalten h&#xE4;ufig eine &#xDC;berschrift und gelegentlich einen Footer, der (sichtbare) Metainformationen zur Sektion enth&#xE4;lt.
Sektionen eignen sich dazu, Inhalte und deren &#xDC;berschriften in einem gemeinsamen Element zusammenzufassen. Das geht in HTML5 &#xFC;ber die reine Auzeichnungsebene hinaus; dazu sp&#xE4;ter mehr. section ist kein semantisch leeres, bedeutungsloses Element; ebenso wenig wie die anderen in diesem Artikel vorgestellten Elemente. Wer einen Container ben&#xF6;tigt, um Elemente f&#xFC;rs Styling zusammenzufassen, der sollte weiterhin div verwenden.
Kopfbereiche: Der Elementtyp header
Das Element header definiert den &#xBB;Kopfbereich&#xAB; einer Webseite oder eines Sektionselements.
Als Auszeichnung des Kopfbereichs einer Webseite enth&#xE4;lt es Elemente wie die Haupt&#xFC;berschrift, das Logo, das Suchfeld oder die Hauptnavigation. Innerhalb eines Sektionselements enth&#xE4;lt es &#xDC;berschriften oder Elemente wie das Inhaltsverzeichnis oder die Einleitung der Sektion.
Das Element nav zeichnet einen Bereich mit Navigationslinks aus, entweder mit Links zu anderen Seiten oder zu Sprungankern innerhalb derselben Seite.
Webautoren sollten nicht jede Gruppe von Links mit nav auszeichnen, sondern nur zentrale Navigationsbereiche wie das Haupt- und das Bereichsmen&#xFC;. Typischerweise enth&#xE4;lt das nav-Element Listen, welche die Navigation repr&#xE4;sentieren.
Das Element article zeichnet einen inhaltlich eigenst&#xE4;ndigen Bereich auf einer Webseite aus, der zwar im Kontext der Seite steht, aber f&#xFC;r sich unabh&#xE4;ngig ist.
Ein Inhalt ist dann eigenst&#xE4;ndig, wenn er auch au&#xDF;erhalb der Seite f&#xFC;r sich allein Sinn ergibt, beispielsweise wenn er in einem anderen Kontext wiedergeben oder in einem Portal als eigenst&#xE4;ndige Komponente dargestellt wird. Das kann ein Weblog-Eintrag sein, ein Artikel, ein Forumsbeitrag oder ein interaktives Widget.
Das Element aside enth&#xE4;lt erl&#xE4;uternde und weiterf&#xFC;hrende Informationen, welche die Hauptinhalte erg&#xE4;nzen.
Gute Beispiele f&#xFC;r den richtigen Einsatz dieses Elements sind Marginalien mit Definitionen oder Erl&#xE4;uterungen, Querverweise zu anderen relevanten Ressourcen oder K&#xE4;sten mit Hintergrundinformationen, aber h&#xE4;ufig wird aside auch einfach zur Auszeichnung von Randspalten mit Navigationsbereichen, Kommentaren etc. verwendet werden. In einem Artikel &#xFC;ber Webstandards und das diesbez&#xFC;gliche Engagement der Webkrauts k&#xF6;nnten wir wie folgt vorgestellt werden.
Das Element footer enth&#xE4;lt sichtbare Metainformationen &#xFC;ber eine Webseite oder ein Sektionselement.
Typische Inhalte sind Informationen dar&#xFC;ber, wer den Inhalt der Seite oder Sektion verfasst hat (wobei diese mit address ausgezeichnet werden), oder Links zu anderen Dokumenten, beispielsweise das Impressum oder Angaben zum Datenschutz. Der Footer muss nicht unbedingt am Ende der Sektion stehen, aber &#xFC;blicherweise tut er das (daher der Name). footer-Elemente k&#xF6;nnen section-Elemente enthalten, um die Inhalte zu unterteilen.
Aktuelle Versionen von Opera, Safari und Firefox stellen alle in diesem Artikel vorgestellten Elemente wie gew&#xFC;nscht dar. Lediglich ein
article, aside, footer, header, hgroup, nav, section
{ display: block; }
ist notwendig, damit die neuen Elemente sich so verhalten, wie man es erwarten k&#xF6;nnte. &#xC4;ltere Browser haben allerdings einige Probleme.
Firefox 2 (und jeder andere Browser mit einer Gecko-Version kleiner als 1.9b5) schlie&#xDF;t unbekannte Elemente, sobald er auf ein Blockelement st&#xF6;&#xDF;t wie p, h1, div und so weiter. Auf diese Browser brauchen Webentwickler allerdings heute nicht mehr zu achten. Die Mozilla Foundation hat die Unterst&#xFC;tzung f&#xFC;r Firefox 2 mittlerweile eingestellt &#x2013; und auch wir sollten das tun.
Im Internet Explorer gibt es ein &#xE4;hnliches Problem, und das zieht sich durch s&#xE4;mtliche Versionen, die heute noch relevant sind &#x2013; leider sind das alle Versionen bis hinab zum IE 6. Der IE schlie&#xDF;t unbekannte Elemente stets sofort, ganz gleich, welches Element dem unbekannten Element nachfolgt.
Im DOM (Document Object Model) dieser Browser wird aus
<section class="sektion">
<h1>Foo</h1>
<p>Bar</p>
</section>
<p>Baz</p>
folgendes:
<section class="sektion"></section>
<h1>Foo</h1>
<p>Bar</p>
</section><//section>
<p>Baz</p>
<section> und </section>; werden also nicht als &#xF6;ffnenden und schlie&#xDF;enden Tag eines Elements erkannt, sondern in beiden F&#xE4;llen als Start-Tag eines eigenen Elements, dem jeweils ein schlie&#xDF;ender Tag hinzugef&#xFC;gt wird. So entsteht <//section> als schlie&#xDF;endes Tag f&#xFC;r </section>. Aus Container-Elementen, die sich per CSS stylen oder per Scripting ansprechen lassen, werden so leere Elemente, mit denen Webautoren nichts mehr anfangen k&#xF6;nnen.
Dieses Problem k&#xF6;nnen Webautoren nicht ignorieren. Peter Kr&#xF6;ner schl&#xE4;gt daher in einem lesenswerten Artikel einige Workarounds vor.
Die beste L&#xF6;sung stellt dabei das HTML5 enabling script von Remy Sharp dar. Dar&#xFC;ber kann jedes (unbekannte) Element beim Browser per JavaScript angemeldet werden. F&#xFC;r das section-Element sieht das beispielsweise so aus:
document.createElement('section');
Die angemeldeten Elemente werden dann wie bekannte Elemente behandelt, d.h. Webautoren k&#xF6;nnen mit ihnen in allen Belangen arbeiten. Das HTML5 enabling script meldet alle neuen HTML5-Elemente an und wird im Gleichschritt mit dem HTML5-Entwurf aktualisiert. Gewissenhafte Webautoren sehen jedoch sofort das Problem an dieser Methode: Wenn im Browser JavaScript nicht aktiviert ist, funktioniert das Skript und somit vermutlich die gesamte Website nicht. Im professionellen Einsatz ist diese Methode folglich untauglich, da es schlichtweg schlechter Stil ist, aktiviertes JavaScript vorauszusetzen.
