Es folgt eine Übersicht von Elementen die neu mit HTML 5 eingeführt werden inklusive einer kurzen Erklärung:

Weitere neue Elemente

VIDEO
erlaubt die Einbindung von Videos direkt in HTML ohne Flash, geplante Formate (die aber nicht von allen Browsern unterstützt werden sind OGG Theora, H.264 und WebM (VP8).

AUDIO
erlaubt die Einbindung von Audio direkt in HTML ohne Flash, geplante Formate (die aber nicht von allen Browsern unterstützt werden sind OGG Vorbis, MP3 und WAV.

EMBED
definiert einen Bereich für eingebundenen Inhalt aus fremden Quellen oder auch Plugins

MARK
dieses Element wird wie ein BOLD oder ITALIC benutzt um Text zu markieren

PROGRESS
dient dazu um einen Download Fortschritt darzustellen dazu kann ein Maximalwert und ein Valuewert (Fortschritt) angegeben werden

METER
Maßeinheit um den Füllstand/Restwert einer bekannten Maximalgröße anzugeben (freier Speicher, Anzahl Teilnehmer)

TIME
Element um Zeitangaben zu markieren oder wesentlich exaktere Zeitangaben zusätzlich mit anzugeben

RUBY, RT, RP
dient dazu hinweise zur Aussprache von Sprachen wie Chinesisch oder Japanisch mit auszugeben

CANVAS
dient dazu um im Browser zu rendern und zu zeichnen in Verbindung mit JavaScript .. dieses Element wird wohl über kurz oder lang Flash ersetzen

COMMAND
definiert einen Button der gleichzeitig nur eine Erweiterung des MENU Elements sein kann er dient als Anker für weitere Elemente der Website die ggf. auf den Wert zurückgreifen

DETAILS
definiert ein Element das auf und zugeklappt werden kann um weitere Informationen dazustellen

DATALIST
dient dazu um für INPUT Elemente eine Autovervollständigung zu ermöglichen

KEYGEN
dient dazu zwei Schlüssel zu generieren .. einer wird an den Server übertragen ein anderer lokal gespeichert

OUTPUT
dient z.b. Scripten als Ausgabebereich von Berechnungen oder Kalkulationen

Design ist fertig .. ihr entfernt 1-2 Hilfslinien die ihr zum ausrichten benutzt habt und plötzlich stimmen Abstände nicht mehr die ihr mit margin-bottom bzw. margin-top gestaltet habt. Eine Hintergrundgrafik ist verschoben oder einer der oberen bzw. untere Abstände ist verrutscht.

Ihr habt 2 DIV Boxen und möchtet diese mit margin-bottom bzw. margin-top ausrichten. Unter ganz bestimmten Umständen werden die Angaben der Elemente zusammengefasst.

• Das äußere DIV hat kein oberen und unteren Rahmen
• Das äußere DIV besitzt kein vertikales padding
• Das äußere DIV verfügt ober- und unterhalb über keinen Inhalt

Auch wenn es nervt .. es ist ein Feature von HTML. Es ist dazu gedacht in einfach gegliederten Texten Abstände nicht unkontrollierbar wachsen zu lassen.

Wie kann man das also verhindern?

Es gibt einige Möglichkeiten:

• benutzt padding statt margin
• probiert einen border zu setzen wenn möglich
• erzeugt eine clearance zwischen den Elementen
• Elemente mit overflow, float (left/right), position (absolute/fixed), display (inline-block) kolabieren nicht .. beachtet dabei das ihr einen BFC (block formating content) erzeugt der ggf. noch andere Auswirkungen hat

Es folgt eine Übersicht von Elementen die neu mit HTML 5 eingeführt werden inklusive einer kurzen Erklärung:

Elemente zur Strukturierung

SECTION
definiert einen eigenen Bereich innerhalb des Dokuments. Es sollte aber nicht zu Styling Zwecken verwendet werden (hier tut es das DIV) und ebenfalls nicht wenn ein anderes Element wie ARTICLE, ASIDE oder NAV besser passt. In der überarbeiteten Spec des W3C wird empfohlen viel mehr das ARTICLE Element zu verwenden.

ARTICLE
beschreibt einen unabhängigen Teil eines Dokuments wie einen einzelnen Blogeintrag, einen Beitrag in einem Forum etc.

ASIDE
beschreibt einen Seitenbereich der nicht zum eigentlichen Hauptinhalt der Seite gehört .. also eine klassische Sidebar wie sie in vielen Blogs und Webseiten vorkommt.

HGROUP
beschreibt den Header eines Bereichs .. das W3C sieht vor hierm HEADLINE Elemente zu gruppieren

HEADER
soll die “Kopfelemente” eines Dokuments strukturieren und kann auch Navigationselemente beeinhalten

FOOTER
beschreibt zusätzliche Informationen seines übergeordneten Elements wie z.b. wer es geschrieben hat, Copyright Infos und weiterführende Links.

NAV
beschreibt einen Bereich mit Links die der Navigation dienen. Vornehmlich ist damit die Hauptnavigation gemeint.

FIGURE
beschreibt Bereiche des Dokuments die eingebettet sind. Also z.B. Bilder, Videos, Quelltext und Zitate. Mit FIGCAPTION wird hier auch gleich noch ein Element für den beschreibenden Text neu eingeführt.