HTML5

ha te em el fünf

HTML5 ist genau die fünfte Version des HTML Standards, welcher das World Wide Web Consortium W3C am 28. Oktober 2014 als die finale Fassung veröffentlichte. Sie ersetzt damit alle Vorgänger wie HTML4 und bringt viele neue Funktionen mit sich.  Neben der Vereinfachung der Auszeichnungssprache gibt es in HTML5 eine Vielzahl neuer Elemente (Tags).  Neben den funktionalen Elementen gibt es strukturelle Elemente, welche die Semantik der Seite wesentlich festlegen. Zum Beispiel den <header>, <footer> , <aside> und <main> Tag um die Bereiche der Website klar festzulegen. Seiten, welche nur noch aus DIV-Elementen bestehen gehören damit der Vergangenheit an. Suchmaschinen können durch die neuen Elemente auch viel genauer die Struktur und somit den Inhalt extrahieren.

Anbei eine Liste der neusten Funktionen-Tags

Canvas

Dieser Tag erstellt ein Canvas (Leinwand),  welcher es in 2D erlaubt Formen und Grafiken zu zeichnen. Auch komplexe Animationen, Pixel-Manipulationen und Filter können zum Einsatz kommen. Dadurch ist es möglich animierte Werbebanner zu erstellen, als auch komplette Games zu entwickeln. ThunderAds verwendet die Canvas 2D-Technik um Werbebanner anzufertigen. Diese sind sehr performant und können mehr Grafikoperationen leisten, als Banner, die mit anderen HTML5 Tags erstellt wurden.

Video

Der <video> Tag ermöglicht es endlich, Videos in Webseiten einzubinden. Dadurch wird kein Flash mehr für die Anzeige von Videos benötigt. Auch Youtube hat Flash komplett mit dem neuen HTML5 Standard ersetzt. Die gängigsten Browser unterstützen dabei das mp4 Format durchgängig. Was momentan fehlt, ist die Auswahl eines bestimmten Audiotracks, falls das Video über mehrere Tonspuren verfügt.

Audio

Der <audio> Tag erlaubt die Wiedergabe von MP3, als auch von OGG Sound-Dateien.

Hier eine kurze Liste der semantischen Tags, die eine bessere Struktur vorgeben

  • header – für z. B. den Kopf der Website
  • nav – für eine Navigation
  • main – für den zentralen Seiteninhalt
  • article – für genau eine News / einen Post
  • section – für ein bestimmten Bereich
  • aside – für eine Seitenleiste
  • footer – für den Footer der Website

Zur Übersicht

Kreis mit Buchstabe H H