Login Pop-up

+ 49(0)6407) 905691 Login
Fehler
  • JUser: :_load: Fehler beim Laden des Benutzers mit der ID: 54
Montag, August 29, 2016

HTML5 – Ist das der Adobe Flash und Microsoft Silverlight Killer?

by / Donnerstag, 30 August 2012 / Schreiben Sie den ersten Kommentar!

google fall in love with html5

HTML5 ist angekommen und alle modernen Browser unterstützen diesen neuen, plattformübergreifenden Standard.  XHTML, als quasi Erweiterung von HTML4, ist damit obsolet. Microsoft und Adobe haben inzwischen auf HTML5 reagiert. Während Microsoft lapidar betont sich mit Silverlight mehr auf das Browser-externe AHA Erlebnis konzentrieren zu wollen, hat Adobe die Weiterentwicklung des Flash Players auf den Prüfstand gestellt. Und tatsächlich, die multimedialen Fähigkeiten von HTML5 bringen den ambitionierten Webdesigner ins Schwärmen, denn HTML5  ist ein vollständiges Framework, dessen Anwendungen auf allen gängigen Systemen laufen. Auch die Safari-gebeutelten Apple  / iPhone User kommen nun in den Genuss von Animationen die Ihnen Apple mit dem Ausschluss von Flash bisher verwehrt. Das Einbinden von Video und Audio in Webseiten wird nun mit einfachen Tags zum Kinderspiel.  HTML5 und CSS3 sind das Gespann der Zukunft wenn es um moderne Webseiten geht.

DIV- und Klassen-Elemente wird es, gerade bei den CMS-Systemen, weiterhin geben. Die Zukunft gehört aber den neuen semantischen Gliederungstags von HTML5.

Die wichtigsten, neu eingeführten Elemente / Tags lassen sich im Prinzip in 4 Kategorien einteilen.

 

1. Die Multimedia Elemente von HTML5

Mit den Multimedia Elementen gehört das von den Suchmaschinen wenig geliebte Adobe Flash, in Webseiten, der Vergangenheit an. Audio und Video einbinden ist so einfach und W3C konform wie noch nie.

 <canvas></canvas>

Mit dem Canvas-Element wird eine rechteckige Zeichenfläche definiert, die statische oder dynamische Grafiken enthalten kann.

<video></video>

Wie der Name schon sagt. Videos einbinden auf einfache Weise.

<audio></audio>

Das Tag um Audiofiles wiederzugeben.

 

2. Die Gruppierungselemente von HTML5

Mit den Gruppierungselementen wird die Webseite in Bereiche gegliedert. Verschachtelte DIV-Strukturen gehören bei konsequenter Anwendung der Vergangenheit an.

<header></header>

Der header-Tag umschließt den Kopfbereich. In den Kopfbereich gehören zum Beispiel das Logo und horizontale Navigation.

<nav></nav>

Die Hauptnavigation wird mit dem nav-Tag gekapselt

<figure></figure>

Das figure-Element vereinfacht die Auszeichnung von Inhalten wie Bildern und Grafiken mit Unterschriften.

<article></article>

Im article-Element werden ganze Artikeltexte gekapselt und hervorgehoben. Die Gliederung geschieht durch das section-Element.

<section></section>

Dieses Tag entspricht prinzipiell dem Absatz (<p></p>) und kann daher auch mehrfach als Gliederungselement auftreten.

<aside></aside>

Mit aside kann man auf einfache Weise eine Sidebar erstellen, die auch unabhängig vom Seiteninhalt sein kann.

<details></details>

Das details-Tag enthält in aller Regel weitere Informationen, die mit Klick ein- und ausgeblendet werden können.

<footer></footer>

Querverweise, Autor- und andere Informationen gehören in den Fußbereich der Webseite.

 

3. Die Formularelemente von HTML5

Das Erstellen von Formularen wird in HTML5 nicht nur einfacher sondern auch Grafisch ansprechender ohne großartig mit Cascading Stylesheets arbeiten zu müssen.

<input></input>

Schlicht und einfach das neue Eingabefeld das mit Telefonnummern, Zahlen, URL- und Email-Adressen, Datums und Zeitangaben umgehen kann.

<datalist></datalist>

Mit dem datalist-Element können Vervollständigungsvorschläge angezeigt werden.

<output></output>

Ergebnisse von Berechnungen werden mit dem output-Tag zurückgegeben.

<progress></progress> und <meter></meter>

Diese beiden Elemente zeigen den Fortschritt und den IST Zustand einer Aktion an. Prozent und Sekunden Angaben bilden dabei die Basis.

<source></source>

Mit source werden die Quellen für Medien angeben.

 

4. Die Textauszeichnungselemente von HTML5

Horvorhebungen werden Suchmaschinenfreundlich mit den Textauszeichnungselementen

<time></time>

Mit dem time-Element werden Zeitangaben in die Seite integriert. Diese sind lokalisiert Formatiert und können bequem ausgelesen werden.

<mark></mark>

Textabschnitte und einzelne Wörter werden mit mark hervorgehoben und für die Suche favorisiert.

 

Die Vorteile von HTML5

HTML5 beinhaltet semantische Elemente, die aus Google Sicht und damit auch aus SEO Sicht das identifizieren wichtigen Contents erleichtert. Auch die Barrierefreiheit wird mit entsprechenden Screenreadern verbessert. Die mobile Webentwicklung wird mit HTML5 plattformübergreifend einfacher. Die leidige Versions Entwicklung bei Apps für Windows, Android oder iOS gehört der Vergangenheit an, wenn auf HTML5 gesetzt wird. CSS3 kann in Verbindung mit HTML5 auf unterschiedliche Plattformbedingungen „intelligent“ reagieren. Alles in allem sind dies Merkmale einer ausgewachsenen Programmiersprache. Es wird spannend für den professionellen Webdesigner.

Die komplette HTML5 Referenz finden Sie hier.

Schreibe einen Kommentar

Achten Sie darauf, die erforderlichen Informationen einzugeben (mit Stern * gekennzeichnet).
HTML-Code ist nicht erlaubt.

Kommentare

Wichtiges zum Schluss

The Internet? We are not interested in it!

Bill Gates, 1993

Zufriedene Kunden kommen wieder. Begeisterte Kunden bringen ihre Freunde mit.

Prof. Dr. Thomas K. Stauffert

640K ought to be enough for anybody.

Bill Gates, 1981

Je planmäßiger ein Mensch googelt, desto wirksamer vermag ihn die Werbung zu treffen.

Unbekannter Author
TWEET | PLUS | LIKE
Anmelden

Anmelden

Benutzername: *
Passwort: *
Angemeldet bleiben
Scroll to top