Juni & Juli 2013 / HTML 5

HTML 5 ist die neuste Version von HTML und wird von W3C (World Wide Web Consortium) entwickelt bzw. definiert, während die WHATWG (Web Hypertext Application Technology Working Group) an einem "HTML-Standard" arbeiten will, der immer weiter entwickelt wird.
HTML 5 soll das klassische HTML und das XML-basierte XHTML, welches von W3C entwickelt wurde, ersetzten bzw. vereinen.
Die vollständige Spezifikation soll laut W3C 2013 verabschiedet werden. Auch wenn HTML 5 noch nicht vollständig fertiggestellt ist, wir es doch schon von den meisten Browsern unterstützt, wenn auch unvollständig.

Die Wichtigsten Ziele

Kompatibilität
Bestehender Inhalt muss weiterhin unterstützt werden. Neue Elemente der Sprache dürfen den bestehenden Inhalt nicht negativ beeinflussen.

Verwendbarkeit
Neue Funktionen sollen echte Probleme lösen und dies vorrangig für Autoren(Entwickler), dann Browserhersteller und zuletzt der reinen Lehre dienend. Funktionen jedoch, die bereits einen bestimmten Zweck erfüllen, sollen nicht neu erfunden werden.

Sicherheit
Bei der Entwicklung neuer Funktionen müssen Sicherheitsaspekte berücksichtigt werden.

Konsistenz
Teile aus XML, die in XHTML Anwendung finden, sollen auch in HTML erlaubt werden.

Vereinfachung
Durch genau definiertes Verhalten (auch in Fehlersituationen) und geringe Komplexität soll HTML problemlos implementiert werden können

Universalität
HTML soll auf allen Endgeräten und mit Inhalt in allen Weltsprachen verwendbar sein.

Neuheiten

Bereits bei der Definition des Doctypes ist die 1. Änderung, welche die Erstellung für den Autor vereinfacht, zu finden.
Während früher die Definition z.B. so aussah:

Reicht bei HTML 5 ein simples

Weiterhin muss der gesamte Bereich mit einem html-Tag geöffnet und geschlossen werden.
Ebenfalls bleibt die Aufteilung mit Header und Body gleich.
Im Header werden weiterhin die Kopfdaten der HTML-Datei eingegeben. z.B. der Titel, der Link in auf eine css Datei usw.
Dieser wird weiterhin mit dem head-Tag definiert.
Geändert hat das definieren der Zeichenkodierung. Diese sollte übrigens auf jeder Website definiert werden, um sie sicherer zu machen.
Früher musst man folgenden Text eingeben:

Mit HTML 5 reicht ein simples:

Geändert hat aber auch das einbinden einer CSS- oder Javascript-Datei. Das Attribut type muss dabei nicht mehr angegeben werden.
HTML 4:

HTML5:



Weiter geht's mit dem Body also dem effektiven Inhalt der Website.
Auch er wird immernoch mit dem body-Tag definiert.
Eine Website besteht meistens aus einem Header, einer Navigation, einem Hauptbereich und einem Footer. Mit HTML 4 hat man diese Bereiche meist mithilfe von DIVs kreiert.
HTML 5 hingegen soll dass Ganze ja vereinfachen. Anstatt nun so viele Divs und verschiedene Klassen fürs CSS zu kreieren, gibt es neue Strukturbezogene Tags:

 

• Das header-Tag ist für die Einleitung gedacht. Darin werden meistens das Logo sowie Login-/Logout-Funktionen angezeigt.
• Das nav-Tag ist für die Haupt-Navigation der Website gedacht und könnte theoretisch auch direkt im header-Tag platziert werden.
• Neuerdings, und daher auf einigen Informationsseiten zu HTML 5 noch nicht vorhanden, gibt es das main-Tag. Dieses Tag dient zum Markieren das Hauptinhalts.
• Zusätzlich gibt es noch ein aside-Tag das für Zusatzinformationen gedacht ist, welche nicht in direktem Zusammenhang mit dem eigentlichen Inhalt der Website stehen. Dieses könnte man auch in den Main-Teil nehmen. Wie das genau umgesetzt wird, ist dem Entwickler überlassen.
• Das section-Tag ist für einzelne Abschnitte der Inhalte gedacht.
• Das article-Tag ist für unabhängige Inhalte, die für sich alleine stehen könnten. Ein Blogeintrag wie dieser hier wäre dafür ein gutes Beispiel. In den meisten Websites wird wohl aber auch das nicht gebraucht.
• Wie der Name schon sagt, ist das footer-Tag für die Fusszeile gedacht.

Hier sehen Sie nun noch, wie man diese Tags einsetzen könnte um eine Website aufzubauen.
Diese HTML-Datei ist W3C-Validiert und kann daher bedenkenlos benutzt werden.

 

Das ganze Styling der Site wir natürlich im externen css-Dokument erledigt.

Es gibt jedoch auch noch andere Tags, welche nicht zur Struktur der Website benutzt werden.
Z.B. gibt es ein video-Tag zum hinzufügen von Videos, sowie ein audio-Tag zum hinzufügen von Musik.
Ganz im Sinne von HTML 5 sind diese Tags sehr simpel gehalten. Das Video-Tag braucht lediglich eine Grössenangabe, sowie den Link zur Videodatei und den Type, z.B. "video/mp4".