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.

Sie haben Fragen zum Thema HTML5? Sprechen Sie uns an!

Jetzt Kontakt aufnehmen

Von HTML4 über XHTML zu HTML5

Bereits 1997 wurde die vorletzte Version mit Spezifikationen der HTML-Auszeichnungssprache HTML4 veröffentlicht. Danach passierte nicht 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.

Sie haben Fragen zum Thema HTML5? Sprechen Sie uns an!

Jetzt Kontakt aufnehmen

Titelbild: HTML5-Logo von W3C, Fotos: 

 

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

Das könnte Sie auch interessieren

Email

Die 10 größten E-Mail-Marketing Mythen

Vom: 21. September, 2018 | Autor: Andreas Kirchner

Was Sie beim E-Mail-Marketing beachten sollten und welche Email Marketing Mythen es gibt Newsletter-Marketing ist eine ...

mehr erfahren
Fotolia / Die 3 Arten der Suchanfragen

Die 3 Arten der Suchanfragen

Vom: 6. April, 2017 | Autor: Andreas Kirchner

Es gibt 3 verschiedene Arten von Suchanfragen, und zwar die Navigations-Suchanfragen, die Transaktions-Suchanfragen und die ...

mehr erfahren
Google Adwords Optimierung

Der Google AdWords Qualitätsfaktor

Vom: 27. Oktober, 2016 | Autor: Andreas Kirchner

Mit dem Google AdWords Qualitätsfaktor wird die Qualität Ihrer AdWords-Anzeige angegeben, und zwar bemessen am ...

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

Was versteht man unter der semantischen Suche?
Im Mittelpunkt steht bei der semantischen Suche die Bedeutung der jeweiligen Suchanfrage. Diesbezüglich nutzt die semantische ...
mehr erfahren
Zahlungsoptionen Google Adwords
Welche Google AdWords Zahlungsoptionen gibt es? Die Google AdWords Zahlungsoptionen. Zur Begleichung der Rechnung für die Nutzung ...
mehr erfahren
Fotolia / Empfehlungsmarketing
Empfehlungsmarketing ist eine sehr erfolgreiche und gute Strategie, um mehr Kunden zu generieren und den Umsatz ...
mehr erfahren
Storytelling
Storytelling ist eine der effektivsten Methoden, neue Kunden zu gewinnen und diese „bei Laune“ zu halten. Hierbei ...
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.