HTML 5.1 enthüllt: 14 neue Features erklärt & praktische Anwendung

HTML5 gehört dem World Wide Web Consortium (W3C), das Standards im Web bereitstellt, damit Protokolle weltweit interoperabel sind. Im November 2016 aktualisierte das W3C das lang laufende HTML 5 – das erste Minor-Update seit 2 Jahren. Viele initiale HTML 5.1 Features wurden wegen fehlerhaftem Design und mangelnder Browserhersteller-Unterstützung fallengelassen.

Obwohl einige Elemente und Verbesserungen in HTML 5.1 übernommen wurden, ist es immer noch ein Minor-Update. Einige neue Elemente enthalten Kombi-Tags, die nun <dialog>, <details>, <summary> und <picture> umfassen und Entwicklern mehr Ausdrucksspielraum geben.

Das W3C hat bereits an einem Entwurf von HTML 5.2 gearbeitet, der Ende 2017 erwartet wird. Wir präsentieren derweil interessante neue Features und Verbesserungen in Version 5.1. Sie können diese Features ohne JavaScript nutzen. Nicht alle Browser unterstützen diese Features, prüfen Sie daher Browser-Support vor Produktionseinsatz.

14. Phishing-Angriffe verhindern

Die meisten Nutzer von target=’_blank’ kennen einen kuriosen Fakt nicht: Der neu geöffnete Tab kann window.opener.location auf eine Phishing-Seite ändern. Er führt bösartigen JavaScript-Code auf der Opener-Seite in Ihrem Namen aus. Da Nutzer der bereits offenen Seite vertrauen, werden sie nicht misstrauisch.

Um dieses Problem vollständig zu beseitigen, hat HTML 5.1 die Verwendung des rel=”noopener”-Attributs standardisiert, das Browser-Kontexte trennt. rel=”noopener” kann in <a> und <area> Tags verwendet werden.

<a href="#" target="_blank" rel="noopener"> Der Link macht keinen Ärger mehr </a>

Lesen Sie auch: 24 CSS3 und HTML5 Animationstools für Designer

13. Figure Caption flexibel handhaben

Der <figcaption> Tag repräsentiert eine Bildunterschrift oder Legende, die mit dem <figure> Element assoziiert ist, das als Container für visuelle Inhalte wie Bilder, Diagramme, Illustrationen dient. In frühen HTML-Versionen konnte <figcaption> nur als erstes oder letztes Kind-Tag des <figure> Elements verwendet werden. HTML 5.1 lockert diese Einschränkung: Jetzt können Sie <figcaption> überall innerhalb seines <figure> Containers platzieren.

<article> <h1>Die Schlagzeile der heutigen Nachrichten </h1> <figure> <img src="petrolimage.jpeg" alt="Benzinpreis fällt"> <figcaption>Ein Mann tankt sein Auto an der Tankstelle</figcaption> </figure> <p>Dies ist die vierte Benzinpreiserhöhung in zwei Monaten und die dritte bei Diesel in einer Fortnight.</p> </article>

12. Rechtschreibprüfung

Das spellcheck-Attribut ist ein aufzählbares Attribut, dessen Schlüsselwörter leerer String, true und false sind. Der true-Zustand zeigt an, dass das Element auf Rechtschreibung und Grammatik geprüft werden soll. Die Methode element.forceSpellCheck() zwingt den User Agent, Rechtschreib- und Grammatikfehler im Textelement zu melden, auch wenn der Nutzer das Element nie fokussiert hat.

<p spellcheck="true"> <label>Name: <input spellcheck="false" id="textbox"></label> </p>

11. Leere Option

Die neue HTML-Version erlaubt die Erstellung eines leeren <option> Elements. Es kann Kind-Element von <optgroup>, <datalist> oder <select> sein. Dieses Feature ist hilfreich beim Design benutzerfreundlicher Formulare.

10. Vollbild für Frames erlauben

Das boolesche allowfullscreen-Attribut, entwickelt für Frames, lässt Sie steuern, ob der Inhalt sich im Vollbildmodus präsentieren kann via requestFullscreen() Methode. Beispiel: Ein iframe, der einen YouTube-Player einbettet. Das allowfullscreen-Attribut ist erforderlich, damit der Player sein Video im Vollbild zeigen kann.

<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Schau dir mein neues Video an!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>

9. Verschachtelte Header und Footer

HTML 5.1 erlaubt das Verschachteln von Header und Footer innerhalb eines anderen Headers. Sie können einem Header-Element einen Header oder Footer hinzufügen, wenn diese selbst in sectioning content enthalten sind. Das Feature ist nützlich, wenn Sie elaborate Headers zu semantischen Sectioning-Elementen wie <section> und <article> hinzufügen wollen.

Im untenstehenden Code enthält das <article> ein <header>, das ein <aside> Tag hat, welches selbst ein <header> Tag enthält.

<article> <header> <h2>Lektion: Wie man Hähnchen kocht</h2> <aside> <header> <h2>Über den Autor: Tom Hank</h2> <p><a href="./tomhank/">Kontaktieren Sie ihn!</a></p> </header> <p>Experte in nichts außer Kochen. Die Kochbuch-Show.</p> </aside> </header> <p><ins>Gießen Sie die Marinade in den Zip-Beutel mit dem Hähnchen und versiegeln Sie ihn. Entfernen Sie so viel Luft wie möglich aus dem Beutel und versiegeln Sie ihn. </ins></p> </article>

8. Null-Breite-Bilder

Die neue HTML-Version erlaubt Bilder mit Null-Größe. Dieses Feature wird genutzt, wenn das Bild nicht für den Nutzer bestimmt ist. Wenn ein img-Element für Zwecke verwendet wird, die nicht der Anzeige eines Bildes dienen, z. B. als Teil eines Dienstes zur Zählung von Seitenaufrufen, nutzen Sie width und height Attribute mit Wert 0. Für Null-Breite-Bilder wird empfohlen, leere Attribute zu verwenden.

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. Formularvalidierung

Die neue reportValidity()-Methode erlaubt, ein Formular zu validieren und die Ergebnisse abzurufen, und meldet Fehler direkt im Browser dem Nutzer. User Agents können mehr als einen Constraint-Verstoß melden, wenn das Element gleichzeitig unter mehreren Problemen leidet. In diesem Fall sollte das „password“-Input als Fehler markiert werden, da es Pflichtfeld aber leer ist.

<h2>Formularvalidierung</h2> <p>Details eingeben</p> <form> <label> Pflichtfeld <input type="password" name="password" required /> </label> <button type="submit">Absenden</button> </form> <script> document.querySelector('form').reportValidity() </script>

6. Browser-Kontextmenü

In HTML 5.1 können Sie das <menu> Tag nutzen, um ein Menü aus einem oder mehreren <menuitem> Elementen zu definieren, und es dann per contextmenu-Attribut an ein beliebiges Element binden. Die ID des <menu> Elements muss denselben Wert haben wie das contextmenu-Attribut des Elements, dem wir das Kontextmenü hinzufügen wollen.

Jedes <menuitem> kann eine von drei Formen haben:

• radio – Option aus Gruppe wählen
• checkbox – Option an- oder abwählen
• command – Aktion bei Klick ausführen

<h2 contextmenu="popup-menu"> Rechtsklick für Kontextmenü-Demo. </h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem> <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> <menuitem type="radio" name="group1">Radio button a</menuitem> <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem> <menuitem type="checkbox" disabled>Deaktivierter Menüpunkt</menuitem> </menu>

5. Kryptografische Nonces mit Scripts und Styles

Ein kryptografischer Nonce ist eine zufällig generierte Zahl, die nur einmal verwendet werden kann und bei jedem Seitenaufruf neu generiert werden muss. Dieses nonce-Attribut kann in <script> und <style> Elementen genutzt werden.

Es wird allgemein von der Content Security Policy einer Website verwendet, um zu entscheiden, ob ein bestimmtes Style oder Script auf der Seite implementiert werden soll. Im gezeigten Code ist der Wert hardcoded, in der Realität wird er zufällig generiert.

<script nonce='d3ne7uWP43Bhr0e'> Der JavaScript Code </script>

4. Reverse Link Relationship

Das rev-Attribut war in HTML 4 definiert, wurde aber in HTML5 nicht aufgenommen. Das W3C entschied, rev-Attribut wieder für <a> und <link> Elemente aufzunehmen. Das rev-Attribut spezifiziert die Beziehung des aktuellen und des verlinkten Dokuments in umgekehrter Richtung. Es wurde aufgenommen, um das weit verbreitete strukturierte Daten-Markup-Format RDFa zu unterstützen.

Nehmen wir ein Beispiel zweier Dokumente, die jeweils eine Lektion enthalten. Der Link zwischen ihnen kann mit rel und rev Attributen definiert werden wie gezeigt…

// Dokument mit URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> // Dokument mit URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">

3. Informationen Ein-/Ausblenden

Die neuen <details> und <summary> Elemente erlauben, erweiterte Informationen zu einem Inhalt hinzuzufügen. Sie können einen Block zusätzlicher Informationen durch Klick auf das Element ein- oder ausblenden. Die Zusatzinformationen sind standardmäßig ausgeblendet.

In Ihrem Code sollen Sie das <summary> Tag innerhalb von <details> platzieren wie gezeigt. Nach <summary> können Sie den Rest des Inhalts hinzufügen, den Sie ausblenden wollen.

<section> <h3>Fehlermeldung</h3> <details> <summary>Diese Datei wurde aufgrund eines Netzwerkfehlers nicht heruntergeladen.</summary> <dl> <dt>Dateiname:</dt><dd>Passcode.txt</dd> <dt>Dateigröße:</dt><dd>8 KB</dd> <dt>Fehlercode:</dt><dd>342a</dd> </dl> </details> </section>

2. Weitere Input Types

Die HTML Input-Elemente wurden um drei weitere Input-Typen erweitert – week, month und datetime-local. Wie der Name andeutet, erlauben die ersten beiden dem Nutzer, eine Woche oder einen Monat auszuwählen. Je nach Browser-Support werden beide als Dropdown-Kalender gerendert, der die Auswahl einer bestimmten Woche oder eines Monats eines Jahres ermöglicht.

Der datetime-local Typ spezifiziert ein Datums- und Uhrzeit-Eingabefeld ohne Zeitzone. Die Daten können ähnlich wie bei month oder week ausgewählt werden, die Zeit kann separat eingegeben werden.

<section> <h2> Week, Month and Datetime-local </h2> <form action="action_page.php"> Wählen Sie eine Woche: <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> Geburtstag (Monat und Jahr): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> Eintritt (Datum und Uhrzeit): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Senden"> </form> </section>

1. Responsible Images

Das W3C hat neue Features für die Implementierung responsiver Bilder ohne CSS eingeführt. Diese sind…

Das srcset Bild-Attribut

Das srcset-Attribut erlaubt die Definition mehrerer alternativer Bildquellen, die in Pixeldichte variieren. Der Browser kann so ein Bild passender Qualität gemäß Nutzergerät auswählen. Beispiel: Für Nutzer mit Mobilgeräten auf langsamerem Netzwerk wäre ein niedriger aufgelöstes Bild sinnvoll.

Sie können srcset mit eigenem x-Modifikator nutzen, der das Pixelverhältnis für jedes Bild beschreibt. Wie im Beispiel: Wenn die Pixelratio des Nutzers 3 beträgt, wird das High-Res-Bild angezeigt.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >

Statt unterschiedlicher Pixelratio können Sie Bilder verschiedener Größe über den w-Modifikator anzeigen. Hier ist High-Res als 1600px definiert.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

Das sizes Bild-Attribut

Oft möchten Autoren unterschiedliche Bilder für unterschiedliche Bildschirmgrößen anzeigen. Dies kann über das sizes-Attribut erfolgen. Es transformiert die Bildschirmbreite in den für ein Bild zugewiesenen Raum und wählt dann das passende Bild via srcset. Beispiel…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

Hier definiert sizes die Bildbreite als 100 % der Viewport-Breite, wenn diese größer als 25em ist, sonst 60 % der Viewport-Breite.

Das picture Element

Das picture-Element erlaubt die Deklaration von Bildern mit mehreren Quellen für verschiedene Bildschirmgrößen. Dies geschieht, indem <img> mit <picture> umschlossen und mehrere Kind-<source> Elemente beschrieben werden.

Lesen Sie auch: 35+ nützliche HTML und CSS Frameworks für Webdesigner

Das <picture> Tag allein zeigt nichts an. Sie sollen die Standardbildquelle als Wert des src-Attributs deklarieren, und die alternativen Bildquellen gehen in das srcset-Attribut wie gezeigt…

<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"> </picture>