Webdesign aus Berlin
Konzept, Gestaltung, Umsetzung
Entwicklung, Hosting und Support
Hier schreibt...
Robert Agthe über das Web, Technologien, Zukunftsvisionen und den typischen Freelancer und Programmierer Alltag. Übrigens, ich bin käuflich.
Die letzten Beiträge
- App URL Schemes auf iOS und Android - Warum nutzt sie keiner?
- HTML5 Gaming, Javascript Game Engines, Working Draft Podcast und Ich
- Warum Google mit seinen Applikationen nicht aus den Pott kommt
- Virb Vom Sozialen Netzwerk zum Homepagebaukasten
- Google Buzz Share Bookmarklet
- Apple iPad objektiv betrachtet. Ein Versuch
- Was Microformats sind und warum man sie verwenden sollte
- Warum Wordpress als CMS nicht geeignet ist
- Gesundheit am Computer Arbeitsplatz und was man dafür tun kann
- Alles was man über Google Wave wissen sollte / Einladungen zu vergeben
HTML5 Tag Übersicht und Dokumentaufbau
HTML5 ist der neue vom W3C verabschiedete Standard für Webseiten. Neben neuen Auszeichnungs-Tags, die viele Browser noch nicht verstehen, gibt es auch eine Menge Zeug, dass man heute schon verwenden kann. Ich versuche hier einen Überblick zu liefern.
HTML5 Aufbau von Dokumenten
Eine HTML5 Seite sieht erst einmal vom Aufbau genauso aus wie eine XHTML Seite. Auf anhieb fällt 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 lässt. 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 Hölle 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 zurückgreifen. <article> verleiht auch hier dem Ìnhalt Semantik.
<article>
<h2>Mein Blogartikel</h2>
<p>Hier könnte 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 Sprünge.
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 können per <ul> oder <table> angeordnet sein.
Wenn Wir alles nun zusammen nehmen, könnte 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. gehören zum täglichen Webleben einfach dazu und verdienen eine sinvolle Auszeichnung.
HTML5 <dialog> Tag
Im HTML5 Standard wurden viele moderne Anwendungsgebiete berücksichtig und mit einbezogen. So auch Chats oder Foren Einträge bzw Blog Kommentare. Der Ergebnis findet man im <dialog> Tag. Damit kann man nämlich 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 können nicht von Suchmaschinen oder behinderten Menschen erfasst werden. Um diese Medien textlich zugänglich 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 zurückgreifen zu müssen. Browser die den HTML5 Standard unterstützen müssen 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 ermöglicht es Vektor- und Bitmap-Grafiken, Animationen und Spiele im Browser zu realisieren. Was damit möglich wird sieht man zb. auf der Seite von 9Elements. Um im <canvas> Element zu Zeichnen, ist Javascript nötig. Damit können dann aber leicht Kurven, Linien, Farbverläufe 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 Wörter mit <mark> hervorheben. Damit kann man also Wörter 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 Möglichkeit. 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 Bäume (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 Verfügung 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
Zusätzliche Informationen zu anderen Elementen oder Medien.
<details open="open">
<p>Auf dem Bild sehen Sie eine Katze</p>
</details>
HTML5 <bb> Tag
The HTML
HTML5 <output> Tag
Ergebnis einer Kalkulation oder einer Auswertung. In einem Warenkorb wäre 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 für eine Ausspracheanleitung genutzt. Diese spezielle Nutzung der Ruby-Technik im Japanischen heißt Furigana.
Weitere Informationen zu HTML5
Es sind noch weitere Blog-Einträge zum Thema HTML5 geplant. Links werden hier ergänzt. Für Anregungen und Kommentare bin ich natürlich Dankbar.
Dieser Eintrag wurde von polarity am 16.08. 2009 - 07:17 Uhr verfasst.
Get Social
Kommentare
Was halten andere von dem Eintrag
regina schrieb 2009-09-03 12:08:27:
Wieder mal schön, bei Dir zu stöbern. Man findet immer etwas Brauchbares! Danke für diesen guten Morgen, danke für jeden neuen
regina schrieb 2009-09-03 12:10:27:
für jeden neuen "tag" sollte das heißen, aber weils in klammern war, zeigt ers nicht an, der doofe!
Bitte Einloggen / Registrieren zum kommentieren.
