HTML5 Info - Die neuen Funktionen von HTML5


HTML5 - Was gibt es neues ?


Nach diesem kurzen Ausflug in die  Geschichte von HTML5 wird es Zeit, sich endlich direkt mit den Elementen und Attributen von HTML5 auseinanderzusetzen. Was liegt näher, als das HTML5 Lernen - Grundlagen und Tutorials-Beispiel? So sieht es in HTML5 aus:


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<p>
	HTML5 Lernen - Grundlagen und Tutorials
</p>
</body>
</html>

Jedes HTML5-Dokument beginnt mit der Dokumenttyp-Deklaration <!DOCTYPE html>, wobei es unerheblich ist, ob diese groß- oder kleingeschrieben wird. Als zweite Neuerung sticht die verkürzte Schreibweise bei der Angabe des Encodings ins Auge – <meta charset="UTF-8">. Der Rest wie html, head, title oder body ist schon von HTML4 hinreichend bekannt, womit sich die Frage stellt: Was ist eigentlich neu in HTML5?


Die neuen Funktionen von Html5


HTML5 ist mehr als lediglich nur ein neuer Standards, der vom World Wide Web Consortium (W3C) und seinen Arbeitsgruppen vorgeschlagen wurden. Für die Technologien, die Sie jeden Tag verwenden, sind die Standards der nächste Schritt und sollen Ihnen dabei helfen, bessere und modernere Webanwendungen zu entwickeln. Bevor wir tief in die Details von HTML5 einsteigen, sprechen wir zunächst über einige Vorteile von HTML5 sowie über einige Herausforderungen, die sich daraus ergeben.


Eine Plattform für die Webentwicklung


Eine Menge neuer Funktionen in HTML drehen sich darum, eine bessere Plattform für webbasierte Anwendungen zu entwickeln. Von aussagekräftigeren Tags, besserer Cross-site- und Cross-window-Kommunikation, bis hin zu Animationen und verbesserter Multimedia-Unterstützung - mit HTML5 stehen Entwicklern eine Menge neuer Tools zur Verfügung, die der Verbesserung der User Experience dienen.


Aussagekräftigeres Markup


In jeder HTML-Version wird neues Markup eingeführt. Aber nie zuvor gab es so viele Erweiterungen, die sich direkt auf die Beschreibung von Inhalten beziehen. Elemente für die Definition von Überschriften, Fußzeilen, Navigationsabschnitten, Seitenleisten und Artikeln, neue strukturelle Tags und Attribute.


Multimedia mit weniger Plugins


Sie brauchen kein Flash und auch kein Silverlight mehr für Video, Audio und Vektorgrafiken. Flash-basierte Videoplayer sind zwar relativ einfach zu verwenden, funktionieren aber nicht auf den mobilen Geräten von Apple. Da diese Geräte einen wichtigen Markt ausmachen, lernen Sie, wie Sie Video ohne Flash verwenden können


Bessere Anwendungen


Entwickler haben alles Mögliche versucht, um umfangreichere, interaktivere Webanwendungen zu erstellen - von ActiveX-Elementen bis hin zu Flash. HTML5 bietet erstaunliche Funktionen, die in einigen Fällen Technologien von Drittanbietern vollkommen überflüssig machen.


Kommunikation mit anderen Dokumenten


Webbrowser verhindern, dass wir Skripten einer Domain dazu nutzen, Skripten auf einer anderen Domain zu verändern oder damit zu kommunizieren. Durch diese Einschränkung werden Endbenutzer vor Cross-Site Scripting geschützt, mit dem nichts ahnenden Besuchern von Webseiten schon allerhand fiese Dinge angetan wurden.

Allerdings führt das dazu, dass überhaupt keine Skripten funktionieren, selbst dann, wenn wir sie selbst schreiben und wissen, dass wir dem Inhalt vertrauen können. HTML5 bietet einen Workaround, der sowohl sicher als auch einfach zu implementieren ist.


Bessere Formulare


HTML5 bietet auch verbesserte Steuerelemente für Benutzeroberflächen. Lange Zeit waren wir gezwungen, JavaScript und CSS zu verwenden, um Slider, Kalender-Datepicker und Farbwähler zu bauen. All das gibt es in HTML5 als eigenständige Elemente, ebenso wie Dropdown-Menüs, Kontrollkästchen und Optionsfelder. Neben der erhöhten Benutzerfreundlichkeit auch ohne JavaScript-Bibliotheken gibt es noch einen weiteren Vorteil: mehr Barrierefreiheit. Screenreader und Browser können diese Steuerelemente so implementieren, dass auch Behinderte sie einfach anwenden können.


Elemente und Attributen im HTML5


Beim W3C finden wir in der von Anne van Kesteren betreuten Spezifikation  HTML5 differences from HTML4 die Antwort. Neben Listen mit neuen und nicht mehr zu verwendenden Elementen oder Attributen entdecken wir dort auch Hinweise auf neue oder geänderte APIs, ausgelagerte Spezifikationsteile und schließlich das HTML5 Changelog, in dem chronologisch festgehalten ist, wann und wie einzelne Features ihren Weg in oder aus der Spezifikation gefunden haben:

Die tabellarischen Übersichten bieten zwar viel Detail, aber wenig Übersicht, weshalb uns vier Wordles in diesem Abschnitt begleiten werden. Erstellt wurden alle mit  Jonathan Feinbergs Wordle Applet, das frei verfügbar ist. Die Häufigkeit der einzelnen Begriffe und damit die Größe der Schrift bestimmt bei neuen Elementen und Attributen die Zahl der Querverweise, die innerhalb der HTML5-Spezifikation auf das jeweilige Feature gesetzt wurden.

Sehen wir uns zuerst die neuen Elemente im Wordle der Abbildung an.

Highlights sind mit Sicherheit die Medien-Typen video, audio und canvas – bei Letzterem handelt es sich vereinfacht gesagt um ein mit JavaScript programmierbares Bild. Viele Neuerungen betreffen strukturgebende Elemente wir article, section, header, hgroup, footer, nav oder aside. Für Abbildungen stehen figure mit figcaption bereit, und einbeziehungsweise ausblendbare Zusatzinformationen lassen sich über details in Kombination mit summary realisieren. Für Fortschrittsanzeigen stehen progress, für Maßangaben aller Art meter und für Zeit- und Datumsangaben time zur Verfügung.

Die Elemente ruby, rt und rp werden uns im deutschen Sprachraum eher weniger begegnen, handelt es sich dabei doch um ein typografisches Annotationssystem, das vor allem im Chinesischen und Japanischen zur Ausspracheanleitung dient. Häufiger anwendbar sind da schon mark zum Hervorheben von Begriffen oder wbr zur Anzeige, dass an dieser Stelle wenn nötig ein Zeilenumbruch erfolgen könnte.

Mehr in Richtung Webapplikationen gehen die Elemente keygen zur Erzeugung von Schlüsselpaaren für Verschlüsselung oder digitale Signaturen, command zum Ausführen von Kommandos oder output als Resultat von Berechnungen in Formularen oder anderen Teilen eines Dokuments. Als Container für option-Elemente stellt datalist nicht sichtbare Auswahllisten für Formularfelder bereit. Zur Auflistung alternativer Ressourcen bei video- und audio-Elementen dient source – der Browser pickt sich dann das erste ihm bekannte Format zum Abspielen aus dieser Liste; und last but not least wurde auch das von Netscape eingeführte und häufig verwendete embed-Element in bereinigter Form mit aufgenommen.


HTML5 Info - Die neuen Funktionen von Html5
HTML5 Info - Die neuen Funktionen von Html5

Viele Neuerungen bringt auch das input-Element mit sich – hier die zusammengefasste Liste neuer Typen in Kurzform: Es gibt mehrere neue input-Typen für Datumsangaben mit datetime, date, month, week, time sowie datetime-local. Dazu kommen Typen für Suchfelder (search) und zur Eingabe von URLs (url), E-Mail-Adressen (email), Telefonnummern (tel), Zahlen (number) oder Zahlenbereichen (range) sowie Farben (color).


HTML5 Info - Die neuen Funktionen von Html5
HTML5 Info - Die neuen Funktionen von Html5

Wie in Abbildung deutlich wird, weisen viele der neuen Attribute einen Bezug zu Formularen auf. So können mithilfe des form-Attributs Eingabeelemente auch außerhalb des jeweiligen Formulars stehen und mit dem gewünschten Formular quasi verknüpft werden. Attribute wie min, max, step, required, pattern, multiple oder autocomplete legen Einschränkungen beziehungsweise Bedingungen für Input-Elemente fest, beeinflussen mit formnovalidate und novalidate die Validierung der Eingaben und stellen mit placeholder oder autofocus praktische Ausfüllhilfen bereit. Das Verhalten beim Abschicken des Formulars darf bei input- und button-Elementen durch formmethod, formenctype, formtarget sowie formaction überschrieben werden. Zur Zuweisung von mit datalist erstellten Auswahllisten zur jeweiligen Eingabekomponente dient das list-Attribut.

Als Sicherheitsfeature für iframes stehen sandbox, srcdoc und seamless zur Verfügung – sie kapseln den eingebetteten Inhalt vom Rest des Dokuments ab. Wer Scripts asynchron laden will, der kann async verwenden, und mit ping wird bei jedem Klick auf einen Hyperlink die im ping-Attribut angegebene Liste an URLs im Hintergrund angesteuert.

Unscheinbar, aber mit weitreichenden Konsequenzen ist das manifest-Attribut des html-Elements, ebnet es doch den Weg für Offline-Webapplikationen, indem es auf jenes Konfigurationsfile verweist, das festlegt, welche Teile der Seite offline verfügbar gemacht werden sollen. Hilfreich können auch style-Elemente mit dem Attribut scoped sein – damit wird die Gültigkeit der angegebenen Stile auf den Bereich des übergeordneten DOM-Knotens mit all seinen Kindelementen eingeschränkt. Bei Menüs des menu-Elements legen type und label schließlich die Art des Menüs (z. B. Kontextmenü oder Toolbar) sowie dessen Titel fest.

Kleine, aber feine Neuerungen sind das charset-Attribut beim meta-Tag zur einfachen Angabe des Encodings sowie die Erlaubnis, li-Elementen über value explizite Aufzählungswerte zuzuweisen, bei ol auch einen Startpunkt mit start zu spezifizieren und endlich Listen über reversed absteigend zu sortieren.

Zum Teil wesentliche Änderungen gibt es bei den globalen, für alle Elemente gültigen Attributen. Das trifft vielleicht nicht so sehr auf class, dir, id, lang, style, tabindex und title zu, die im Gegensatz zu HTML4 jetzt global sind, sondern vor allem auf die neu hinzugekommenen. Über contenteditable dürfen Elemente direkt geändert werden; contextmenu ermöglicht das Zuweisen eigener, als menu definierter Menüs: draggable weist das entsprechende Element als potenziellen Kandidaten für Drag & Drop-Aktionen aus; und spellcheck bereitet die Überprüfung des jeweiligen Bereiches auf korrekte Rechtschreibung vor.

Zum Zeitpunkt der Anzeige nicht oder nicht mehr relevante Inhalte kann man mit hidden verbergen; über das Attribut role beziehungsweise aria-* können Sie zusätzliche Hilfen für assistive Technologien wie zum Beispiel Screenreader zur Verfügung stellen; und über das reservierte Präfix data-* können Sie beliebig viele, eigene Attribute definieren.

Ein weiterer wesentlicher Bestandteil von HTML5 sind neue Programmier-APIs, wie die Zeichen-API des canvas-Elements, eine API zum Abspielen von Audio- und Video-Inhalten sowie eine Schnittstelle zur Programmierung von Offline-Webanwendungen. Weitere APIs widmen sich den Themen Drag & Drop, dem Editieren von Dokumenten oder dem Steuern der Browser-History. Auch auf den ersten Blick exotisch anmutende APIs zur Registrierung und Anwendung eigener Protokolle oder MIME-Typen sind in der Spezifikation zu finden.

Bleibt noch zu erwähnen, dass mit HTML5 alle Eventhandler als globale Attribute ausgewiesen sind und auch einige Änderungen bei den Objekten HTMLDocument und HTMLElement zu verzeichnen sind. Mit getElementsByClassName() werden alle Elemente mit einem bestimmten class-Attribut gefunden; zur Manipulation von class-Attributen steht die classList-API bereit; und die Methode innerHTML funktioniert nun auch bei XML-Dokumenten. Um zu ermitteln, welches Element im Dokument gerade den Fokus besitzt, dienen activeElement und hasFocus – beide als Attribute des HTMLDocument-Objekts, genauso wie die Methode getSelection(), über die man auf den aktuell vom Benutzer selektierten Text zugreifen kann.


Kontakt

Email: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Tel : 038305 / 529 799
Erstellt mit HTML5 und CSS3 - © 2021  HTML Lernen