php-homepage.com

HTML5

Übersicht html5

Html5 Logo
Offizielles Html5 Logo vom W3C

html5 stellt die nächste Version von html dar. Obwohl sich html5 noch im Entwicklungsstadium befindet, überlegen sich viele Webdesigner/Entwickler schon eine Umstellung bzw. verwenden diese "Arbeitsversion" von html schon heute.
Hatte es seit der Entwicklung von xhtml den Anschein,
dass es auf lange Sicht html "ersetzen" würde, wurde die Entwicklung von xhtml2 eingestellt.

Gründe hierfür waren weniger Schwächen bzw. Nachteile von xhtml gegenüber html, sondern vielmehr "politische" Hintergründe wie die mangelnde Unterstützung der Browser-Entwickler.

Grundsätzlich ging man mit xhtml in die richtige Richtung wie in diesem Artikel beschrieben, doch mit Gründung der whatwg, beschloss diese,
die Entwicklung der Auszeichnungssprache des Internets selbst in die Hand zu nehmen. War bisher das W3C die Institution, die Webstandards definierte, so spielt die whatwg nun eine weitere, nicht unwesentliche Rolle in der Entwicklung von html5.
Somit heißt die nächste Generation der Auszeichnungssprache nun html5.

Auch wenn mittlerweile HTML5 zum neuen Standard geworden ist und CSS Version 3 nun von den gängigsten aktuellen Browsern unterstützt wird, hat sich an der grundlegenden Verwendung nicht viel geändert.
CSS3, einfach gesagt, ist die Erweiterung des Standards aus vorangegangenen Versionen.

Html5 bietet viele tolle neue features wie:

Umstellung bzw. update zu html5:

Wie aktualisiert man bestehende Seiten auf html5?
Prinzipiell ändert sich an den tags von html/xhtml zu html5 nicht sehr viel, html5 soll ja eine Weiterentwicklung werden und bleibt somit abwärtskompatibel.

Natürlich könnte man einfach den Doctype seiner Seite ändern und hätte somit schon auf html5 "umgestellt".
Zwar wird die Seite je nach Browser und Version immer noch gleich dargestellt,
lässt man die Seite danach durch den Validator laufen, merkt man aber schnell,
dass so manches tag/Element oder auch bestimmte Attribute einen Fehler oder zumindest Warnungen produzieren. Details zu sogenannten depricated tags und nicht mehr verwendeten oder geänderten Attributen möchte ich zu einem späteren Zeitpunkt erläutern, da sich Vieles noch ändern kann, solange der html5 standard nicht offiziell verabschiedet ist, was laut aktuellem Stand (Jänner2012) erst 2014 der Fall sein wird.


update 02/2015

Wie geplant empfiehlt das W3C seit 28. Oktober 2014 die Verwendung von HTML5: Seite des W3C
HTML5 ist nun offiziell fertig und als neuer Standard definiert!

Was ist HTML5?

Kurz gesagt: die logische Weiterentwicklung von html4.xx bzw. xhml.
Das Internet entwickelt sich ständig weiter und die neuen Anforderungen können selten vorausgesehen werden. Etwa sämtliche multimedialen Inhalte, die bis einschließlich html4 mit externen Plugins in bestehende Webseiten integriert werden mussten.
Gleichzeitig entwickeln sich die Darstellungswerkzeuge von Internetseiten, die Browser, ständig weiter.
Neue Standards wie auch html5 müssen erst in alle Browser implementiert werden.

Wie ist html5 aufgebaut?

Wie schon in Vorgängerversionen, besteht eine html5 Seite aus:

Soweit die Grundstruktur von html5, wobei da natürlich bekannte und neue Elemte/tags hinzukommen.

Als Beispiel sieht ein html5 Dokument dann so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title/Titel</title>
</head>
<body>
Content/Inhalt
</body>
</html>

Optional hinzu kommen dann noch weitere meta-Angaben, semantische, grafische und multimediale Elemente/Angaben.

Wichtige semantische Elemente in html5:

<header> <footer> <article> <section> <figure> <figcaption>

Diese können zur besseren Auszeichnung verschiedener Bereiche einer Seite verwendet werden.
Dies dient einerseits zur besseren Übersicht für den Entwickler, der damit verschiedene Bereiche einer html5-Seite eindeutiger auszeichnen bzw. formatieren und stylen kann, andererseits erleichtert es den Suchmaschinen eine bessere Erkennung der Inhalte und Struktur der Seite.
Diese Auszeichnungen wiederum werden wahrscheinlich in Zukunft zur besseren oder zumindest attraktiveren Platzierung in den Suchergebnissen beitragen, wie es aktuell schon teilweise bei microdata/Mikrodaten der Fall ist.
Die vollständige Liste der semantischen Elemente beim W3C.

Abschließend möchte ich sagen, dass ich persönlich seit einiger Zeit begeistert html5 und css3 verwende, da viele Limitierungen aus der Vergangenheit von html5 aufgehoben wurden.
update 22.10.2016
Html5 hat sich mittlerweile etabliert und erfährt eine breite Unterstützung seitens der Browserhersteller.

Html5 Video Tag - Videos in Html einbetten

Der Weg von Adobe Flash zu Html5-Videos

Nachdem (wieder mal) der Tod von Flash im Raum steht und Adobe selbst die "Umstellung auf zeitgemäßes Html5" empfiehlt und die Arbeit an einem eigenen Html5-Player für Mobilgeräte ankündigt,
wird es langsam Zeit, auch bei Videos bzw. bewegten Bildern/Animationen mit der Zeit zu gehen. Google macht es ja auf Youtube schon seit geraumer Zeit vor, hier werden Inhalte in den letzten Jahren vermehrt auf Html5 umgestellt. Auch die Unterstützung für Adobe Flash im aktuell verbreitetsten Broser, dem Chrome, nimmt schleichend ab.

Flash ist nur eines der Beispiele, dass sich nicht immer die beste Technologie durchsetzt, aber mitunter jene, die einfach nur zur richtigen Zeit verfügbar ist. Und in den Anfängen des Internets standen eben nicht viele Technologien zu Verfügung, also musste man halt mit dem vorlieb nehmen, was man hatte.

Da sich ja auch html mittlerweile zu Html5 weiterentwickelt, um nicht zu sagen neu erfunden, hat, war es höchste Zeit von der ehemaligen "Notlösung" Flash abzukehren, da eine sinnvolle Weiterentwicklung hier nicht möglich scheint.
Wer mehr zu den Nachteilen von Adobe Flash wissen möchte, braucht nur kurz Google zu den Themen "Flash Sicherheit" und "Flash Performance" bemühen.
Nicht zuletzt die mangelnde Unterstützung bzw. Kompatibilitätsprobleme unter Linux machen mir persönlich den Abschied von Flash (Videos) nicht schwer. Der Boom von Android, das ja bekanntermaßen von Google entwickelt wurde, aber auf Linux basiert, hat nicht zuletzt zu dieser Entwicklung beigetragen.

In diesem Sinne - Good Bye, Flash!

Wilkommen Html5-Video

Aller Anfang ist schwer, so auch hier... Bei Video (-formaten) steht man schon immer vor dem Problem der sogenannten Codecs, von denen manche frei, andere aber lizensiert sind und patentrechtlichen Bestimmungen unterliegen.
So empfiehlt das W3C mit Einführung des <video>-Tags noch ".mp4" und ".ogg" gleichermaßen.

Grundsätzlich wäre ja .mp4 (.h264 Codec) empfehlenswert, aber da hier unter Umständen Lizenzgebühren anfallen können,und mann nicht irgendwann alles umstellen möchte...
(Dies betrifft aufgrund der aktuellen Lage zwar nur "Große Abnehmer" bzw. Hard/Softwarehersteller und weniger den kleinen Seitenbetreiber, aber wer weiß was die Zukunft bringt?)

Open Source Formate

Verbreitet sind hier das .ogg Format und der .webm, aber leider lässt die Unterstützung seitens Apple/Safari zu wünschen übrig.
die Formate funktionen nicht nativ im Browser, sondern nur wenn man zusätzliche Player/Cosdecs installiert. Da mittlerweile schon viele IOS Benutzer Chrome oder Firefox verwenden, wird sich zeigen, wie man damit umgehen soll:-)
Zum aktuellen Zeitpunkt kann ich nur empfehlen, alternative Quellen anzugeben, auch wenn es aufwändiger ist, zwei oder mehrere Videoformate bereitzustellen.

Das <video></video>Tag ermöglicht es, Medienformate bzw. in diesem Fall Videos direkt in html5 einzubinden.
innerhalb des Video-Tags gibt man dann noch verschiedene Quelen an, wie oben erwähnt. Das ist wirklich schade, wünschenswert wäre ein einheitliches Format, das von allen Browsern unterstützt wird.

Html5-Videos einbinden

Nun aber zum eigentlich einbetten von html5 Videos in die Seite:
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Im öffnenden Video Tag gibt man die Größe des Videos und Attribute wie controls, autoplay usw. an.
Die vollständige Liste der möglichen Attribute zum Video Element:av-DOM
Als Quellen werden hier einmal das .mp4 und alternativ das .ogg Format angegeben, natürlich muß das Video dann in besagten Formaten vorliegen.
Zum Schluss noch die Warnung, falls ein Browser doch keines der Formate abspielen will.
Hier könnte man dann auch einen Download-Link zur verfügung stellen...

Will man Videos nicht selbst hosten, bzw mit html5 einbetten, dann gibt es alternativ natürlich noch die Möglichkeit,
Videos auf Videoplattformen /Youtube usw. hochzuladen und dann auf der eigenen Webseite zu verlinken, bzw. einzubetten.
Hier gibt man aber mehr oder weniger alle Rechte am Material frei (Nutzungsbedingungen beim upload!).