Mehr Möglichkeiten für Ihre Website: HTML5

HTML5-Logo von W3C
Andreas Kirchner

Autor: Andreas Kirchner

Kontakt: Profil Xing

Datum: 03.07.2019, 17:20 Uhr

Mit der Programmier- bzw. Auszeichnungsprache HTML – kurz für „Hypertext Markup Language“ – kann man mit Codes Webseiten erstellen und das so einfach und Plug-in-free, wie es nur geht. Kein Wunder, dass HTML5 als weitere Entwicklung die meist verwendete Auszeichnungssprache und Traum aller Coder ist.  Bei HTML5 handelt es sich, wie der Name nahelegt, um die fünfte Fassung der Internet-Auszeichnungssprache (Programmiersprache).

HTML5 dient der Vernetzung sowie Aufzeichnung von Texten auf Websites und bietet im Vergleich zu ihren Vorgängerversionen und Flash viele nützliche und suchmaschinenfreundliche Darstellungsmöglichkeiten, Vernetzungen und Funktionen. Sie ist sortiert, gegliedert, einfach verständlich und ein wahrer SEO-Traum.

Von HTML4 über XHTML zu HTML5

Bereits 1997 wurde die vorletzte Version mit Spezifikationen der HTML-Auszeichnungssprache HTML4 veröffentlicht. Danach passierte relativ nichts mehr viel, außer ein paar Updates in Form des Nachfolgers HTML 4.01, der nur Fehlerkorrekturen enthielt. Das World Wide Web Consortium (W3C) arbeitete Anfang der 2000er Jahre an der Entwicklung eines XML-basierten Arbeitsentwurfs und brachte zunächst die erste Auszeichnungssprache XHTML 1.0 auf den Markt. Bereits der erste Nachfolger dieser neuen Auszeichnungssprache und dessen Spezifikationen hatten nicht mehr viel mit HTML 4.01 gemein. Es begann ein Wettbewerb zwischen den Entwicklern des Nachfolgers von HTML 4.01 und dem der aktuellen XHTML-Version, die die Nachteile hatten, nicht mehr abwärtskompatibel zu sein und zu kompliziert in der Anwendung waren.

 a PNG by Matthew Raymond - http://resources.whatwg.org/logo.svg

Um einen gemeinsamen Konsenz zu finden, gründeten mehrere Browserhersteller, darunter Mozilla, Opera und Apple, 2004 die WHATWG. Die WHATWG – kurz für „Web Hypertext Application Technology Working Group“ machte daraufhin mit dem Arbeitsentwurf der Applications 1.0 den ersten Vorschlag für die Neuerung in Form von HTML5. Das W3C nutzte als Basis ihres Entwurfs eine Abspaltung der Version der WHATWG und 2006 wurden beide Entwicklergruppen umgestaltet und gemeinsame Ziele bei unterschiedlichen Zielgruppen von HTML- und XML-basierten Anwendungssprachen definiert, bevor 2007 eine gemeinsame Zusammenarbeit an einer HTML5-Spezifikation begann und die Arbeit an XHTML 2.0 gestoppt wurde. Nach 14 Arbeitsentwürfen war es Ende 2014 dann soweit und HTML5 wurde veröffentlicht.

Was beeinhaltet HTML5?

Außer der Hauptspezifikation von HTML5, die Grundlagen wie:

  • Vokabular: Es fehlen bekannte Elemente der Sprache wie „center“ oder „font“ und wurden durch andere bestimmende Sprachen-Elemente ersetzt, die die Kompatibilität zu bestehenden Websites sicherstellt
  • HTML-Parser: Erstellt die Dokumentenstruktur, das DOM, welches dann durch den Renderer visuell dargestellt wird
  • HTML: Nachrichtenübermittlung für den Datenaustausch
  • XHTML: XML-basierte Anwendungssprache
  • DOM: Jedes Element und Attribut, das in HTML5 bekannt ist, ist in den Begriffen und den damit verbundenen Schnittstellen des Dokumentobjektmodells (DOM) definiert.
  • Standarddarstellung: „Erwartete Darstellung“, die durch CSS-Eigenschaften definiert wird
  • Browser-Kontext: Dokument wird geladen bzw. weitere Browserkontexte in Frames des Browsers erzeugt

Neben den Eigenschaften der vorherigen HTML-Versionen, enthält HTML5 auch eine Beschreibung der Struktur, wie Elemente verschachtelt werden müssen. HTML5 ermöglicht zudem eine Menge von JavaScript-Objekten, die sich als APIs in HTML5-Dokumente integrieren lassen. Während HTML 4.01 nur grobe Strukturen von div-Elementen innehielt, bietet HTML5 Elemente wie:

  • HTML Microdata zum Einbinden maschinenlesbarer Informationen in HTML-Dokumente
  • HTML+RDFa für die Einbindung von RDF in Dokumente in XHTML
  • HTML-Canvas-2D-Kontext zur Einbindung der Zeichnung von zweidimensionalen Formen

Welche Elemente bzw. welches Vokabular haben welche Aufgaben?

  • <article>: Definiert einen Abschnitt bzw. ein Element als eigenständigen Inhalt innerhalb eines HTML5-Dokuments
  • <aside>: Definiert einen Abschnitt bzw. ein Element als Randbemerkung
  • <footer>: Definiert einen Abschnitt bzw. ein Element als Fußbereich, unten im Dokument bzw. Fenster des Browsers
  • <header>: Definiert einen Abschnitt bzw. ein Element als Kopfbereich, oben im Dokument bzw. Fenster des Browsers
  • <main>: Definiert einen Abschnitt bzw. ein Element als Hauptinhalt einer Webseite
  • <nav>: Definiert einen Abschnitt bzw. ein Element als Navigationsleiste zu Sub-Seiten
  • <section>: Definiert einen Abschnitt bzw. ein Element  innerhalb eines HTML5-Dokuments.
  • <audio> und <video>: Einbindung von Audiofiles und Multimediadateien ohne Plug-ins
  • <canvas>: Definition bestimmter Abschnitte eines Dokuments mit HTML5, um mittels JavaScript dynamische Bitmap-Grafiken (PNG, GIF, JPG oder komplexere Anwendungen) einzubinden.
  • <details>: Ermöglicht das Einbinden von ausklappbaren Elementen
  • <summary>: Definiert die Überschrift, die ständig angezeigt wird
  • <progress>: Bei erweiterten Elemente von Formularen kann hiermit definiert werden, inwieweit eine Aufgabe abgeschlossen ist
  • <datalist>: Hiermit können Vervollständigungsvorschläge bei Formularen gegeben werden

Weitere Elemente: Drag-and-Drop ermöglicht das Verschieben von Objekten innerhalb eines HTML5-Dokuments oder zwischen zwei Webseiten. API-Offline-Applications stehen Webapplikationen auf HTML5 auch Offline zur Verfügung. Mit Geolocation unterstützt HTML5 ein JavaScript-API, das es ermöglicht, den aktuellen Standort eines Webseitenbesuchers auszulesen, dem der Besucher zustimmen oder es ablehnen kann. Kommentarfunktionen, Multimedia-Elemente und Social-Media-Verknüpfungen ergänzen die Neuerungen.

Hanseranking-Screenshot

SVG und MathML in HTML5

HTML5 ermöglicht das Einbinden von SVG und MathML in den HTML-Quelltext, solange die Elemente keine Namensraumpräfixe enthalten und XLink muss als „xlink“ bezeichnet sein.

Wieso ersetzte HTML5 überhaupt Flash?

In den vergangenen Jahren war Flash als Plug-in für alte HTML-Programmiersprachen für den Internetnutzer praktisch unumgänglich. Wer beispielsweise Videos im World Wide Web anschauen wollte, musste in der Regel Adobe Flash nutzen. Jedoch bestand im Bereich der Sicherheit ein erhebliches Problem. Das Ende der Flash-Ära wurde durch Steve Jobs und Apple eingeleitet. Er untersagte die Verwendung von Flash für Mobilgeräte, sodass eine neue Lösung gefunden werden musste, welche durch Funktionalität und Sicherheit gleichzeitig punktet.

Funktionen zur Einbindung von Audio- und Video- und Animations-Inhalten sowie von 2D- und 3D-Grafiken, die in HTML5 erstmals möglich waren, stellten die optimale Alternative dar. Eine Verzahnung mit JavaScript und Programmiersprachen wie SVG (Scalable Vector Graphics) oder Canvas erlaubten diese Einbindungen ohne Plug-ins und in dynamischer Form. Weiterentwicklungen in HTML5 erlaubten zudem die Nutzung von Geoloctation für Geo-Targeting zur Eingrenzung der Zielgruppen und Analyse. Auch die Offline-Nutzung, die Anpassungsmöglichkeiten für mobile Endgeräte und viele Funktionen, die für optimales SEO nötig sind, beherrscht HTML5.

Welche Vorteile bietet HTML5 für Websites und Webshops?

Die größten Vorteile bestehen sicher darin, dass HTML5 mit allen gängigen Browsern, wie Google Chrome, Firefox, Internet Explorer, Safari, Duckduckgo etc.) für Desktop und mobile Endgeräte durch Webapps und den Einsatz von Vektorgrafiken kompatibel ist und die Suchmaschinen sie ebenfalls besser lesen und indizieren können. Das sorgt für bessere Rankings und relevantere Suchergebnisse. Durch den logischen und nicht mehr chaotischen Aufbau der Codes ist er weniger fehleranfällig und kann leichter – auch ohne große Programmierkenntnisse – bearbeitet werden. Plug-ins sind weitestgehend überflüssig und Seiten bauen sich trotz eingebundener interaktiver Inhalte, Dank des schnellen GPU-Prozessors, schneller und fehlerfrei auf. Selbst YouTube, das größte Videoportal, setzt auf HTML5. Zudem ist HTML5 abwärtskompatibel, sodass es auch ältere Browser-Versionen verstehen.

HTML5 ist:

  • Suchmaschinenfreundlicher
  • Unterstützt alle gängigen Browser und Einsatz von Cookies
  • Schneller im Aufbau
  • Dynamisch und dadurch interaktiver
  • Logischer und einfacher im Aufbau
  • Kann alle interaktiven Inhalte ohne Plug-Ins darstellen
  • Ist auf mobilen Endgeräten wie Smartphones und Tablets optimal
  • Bietet den bisher stärksten Schutz vor Hackerangriffen im Vergleich zu allen Vorversionen

Redirect und HTML5

Optimal sind Werbemittel (Banner etc.) in einen iframe eingebunden und entweder TML-Files, CSS, Javascript, Bilder, GiFs, Animationen, Videos sind, die den technischen Spezifikationen der Website und des Formats entsprechen.

Was sind Markups?

Markup ist der englische und gängige Begriff für Auszeichnungen von Texten, die den Inhalt des HTML5-Dokuments strukturieren und dieses durch Formatierungen und Strukturen bzw. Hierachien unterteilen und aufbauen. Um diese Auszeichnung umzusetzen, werden Markup-Elemente eingesetzt die Tags genannt werden.

 

Titelbild: HTML5-Logo von W3C, Fotos: 

 

Quellen: Ionos.deWikipedia.orgWikiSelfHTML.orgMolily.de, WZ.de sowie W3.org

Das könnte Sie auch interessieren

Keyword Research

Was sind Schlüsselwörter in einem Text aus SEO Sicht?

Vom: 31. März, 2017 | Autor: Andreas Kirchner

Die Schlüsselwörter spielen aus SEO Sicht eine entscheidende Rolle. Es handelt sich dabei um die ...

mehr erfahren
Google Shopping Leitfaden - Tipps & Tricks

Google Shopping Kampagnen von A bis Z – Tipps und Tricks in unserem ultimativen Leitfaden

Vom: 9. Dezember, 2016 | Autor: Andreas Kirchner

Liebe Leser und Interessenten, wir erklären das Google Merchant Center, die Datenfeeds sowie das Anlegen und ...

mehr erfahren
Beitragsbild Google Analytics

Google Analytics für KMU einrichten

Vom: 10. Mai, 2017 | Autor: Andreas Kirchner

Dieser Artikel bezieht sich auf: Google Analytics und nicht auf Google Analytics Premium. Google Analytics ...

mehr erfahren
zurück

Unsere Blogthemen

Rückruf anfordern und Vorteile nutzen

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.

Das interessiert unsere Kunden

zum-zugreifen-auf-konto-einladen
Mit AdWords-Konten-Verknüpfungen herstellen meint man in der Regel entweder die Verknüpfung von anderen Diensten mit einem ...
mehr erfahren
E-Mail Marketing Fehler
E-Mail Marketing Fehler vermeiden Damit Sie von den großen Vorteilen, die das E-Mail Marketing bietet, profitieren können, ...
mehr erfahren
Attributionsmodelle in AdWords
Mit den Attributionsmodellen wird festgelegt, welche Wertigkeit ein jeweiliger Verkauf oder eine Conversion erreicht hat und ...
mehr erfahren
Google Web Designer
Der Google Web Designer ist ein Tool, mit dem Sie Grafiken sowie Designs in HTML5 erstellen ...
mehr erfahren

Einfach und direkt anfragen:

Ob kostenlose Beratung oder unverbindlicher AdWords-Konto-Check.
Wir sind für Sie da!

Tel.: +49 40 570 10 75 50

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.