HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele

Vorwort

Wie wir alle wissen, gehört HTML5 dem World Wide Web Consortium (W3C), einer Organisation, die Standards für die gesamte Internet-Community bereitstellt, und die auf diese Weise gebildeten Protokolle können weltweit verwendet werden. Im November 2016 aktualisierte das W3C den langjährigen HTML 5-Standard, das erste kleinere Update seit zwei Jahren. Viele der ursprünglich für HTML 5.1 vorgeschlagenen Funktionen wurden aufgrund von Designfehlern und mangelnder Unterstützung durch die Browseranbieter verworfen.

Obwohl in HTML 5.1 einige Elemente und Funktionsverbesserungen eingeführt wurden, handelt es sich dennoch um ein kleines Update. Zu den neuen Elementen gehören unter anderem zusammengesetzte Tags wie beispielsweise <dialog>, <details>, <summary> und <picture>, die Entwicklern mehr Raum für Kreativität und Inhalt bieten.

Das W3C hat außerdem mit der Arbeit an einem Entwurf für HTML 5.2 begonnen, der voraussichtlich Ende 2017 veröffentlicht wird. Was wir hier vorstellen, sind die neuen Funktionen und Funktionsverbesserungen, die in Version 5.1 eingeführt wurden. Sie müssen kein JavaScript verwenden, um diese Funktionen zu nutzen. Da diese Funktionen nicht von allen Browsern unterstützt werden, sollten Sie vor der Verwendung in einer Produktionsumgebung die Browserunterstützung überprüfen.

14. Phishing-Angriffe verhindern

Die meisten Leute, die target='_blank' verwenden, kennen eine interessante Tatsache nicht: Ein neu geöffneter Tab kann window.opener.location in eine Phishing-Seite ändern. Es führt in Ihrem Namen schädlichen JavaScript-Code auf der geöffneten Seite aus. Da die Benutzer darauf vertrauen, dass die von ihnen geöffnete Seite sicher ist, werden sie nicht misstrauisch.

Um dieses Problem vollständig zu beseitigen, hat HTML 5.1 die Verwendung des Attributs rel="noopener" durch Isolierung des Browserkontexts standardisiert. rel="noopener" kann in <a>- und <area>-Tags verwendet werden.

 <a href="#" target="_blank" rel="noopener">
  Der Link macht keine Probleme mehr
</a>

13. Flexibler Umgang mit Bildtiteln

Das Tag <figcaption> stellt eine Beschriftung oder Legende dar, die mit einem <figure>-Element verknüpft ist und normalerweise als Container für visuelle Elemente wie Bilder, Diagramme und Illustrationen dient. In früheren HTML-Versionen konnte <figcaption> nur als erstes oder letztes untergeordnetes Tag einer <figure> verwendet werden. HTML5.1 hat diese Einschränkung gelockert und Sie können jetzt überall innerhalb eines <figure>-Containers eine <figcaption> verwenden.

 <Artikel>
  <h1>Die Schlagzeile der heutigen Nachrichten </h1>
  <Abbildung>
    <img src="petrolimage.jpeg" alt="Benzinpreis sinkt">
    <figcaption>Ein Mann tankt sein Auto an einer Tankstelle</figcaption>
  </figure>
  <p>Dies ist die vierte Erhöhung der Benzinpreise in zwei Monaten und die dritte für Diesel in zwei Wochen.</p>
</Artikel>

12. Rechtschreibprüfung

Die Rechtschreibprüfung ist ein Aufzählungsattribut, dessen Werte eine leere Zeichenfolge, „true“ oder „false“ sein können. Wenn „true“ angegeben ist, wird das Element auf Rechtschreibung und Grammatik überprüft.

element.forceSpellCheck() zwingt den Benutzeragenten, in einem Textelement gefundene Rechtschreib- und Grammatikfehler zu melden, selbst wenn der Benutzer sich nie auf dieses Element konzentriert.

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

11. Leere Optionen

Neuere HTML-Versionen ermöglichen die Erstellung eines leeren <option>-Elements. Es kann ein untergeordnetes Element eines <optgroup>-, <datalist>- oder <select>-Elements sein. Diese Funktion ist beim Entwerfen benutzerfreundlicher Formulare hilfreich.

10. Unterstützt den Vollbildmodus des Frames

Mit der für Frame entwickelten booleschen Eigenschaft allowfullscreen können Sie mithilfe der Methode requestFullscreen() steuern, ob Inhalte im Vollbildmodus angezeigt werden können. Verwenden wir beispielsweise ein in den YouTube-Player eingebettetes Iframe. Die Eigenschaft „allowfullscreen“ muss festgelegt werden, damit der Player das Video im Vollbildmodus anzeigen kann.

 <Artikel>
  <Kopfzeile>
  <p><img src="/usericons/16235"> <b>Fred Feuerstein</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Privater Beitrag</a></p>
  </header>
  <Haupt>
  <p>Schauen Sie sich mein neues Video an!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</Artikel>

9. Kopf- und Fußzeile einbetten

HTML5.1 ermöglicht es Ihnen, Kopf- und Fußzeilen in eine andere Kopfzeile einzubetten. Sie können dem Kopfelement eine Kopf- oder Fußzeile hinzufügen, wenn diese innerhalb des Absatzinhalts liegen. Diese Funktion ist sehr nützlich, wenn Sie semantischen Absatzelementen Ausschmückungen wie <section>- und <article>-Tags hinzufügen möchten.

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

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

8. Bilder mit Nullbreite

Neue HTML-Versionen ermöglichen das Hinzufügen von Bildern mit der Breite Null. Diese Funktion kann verwendet werden, wenn das Bild dem Benutzer nicht angezeigt werden muss. Wenn ein img-Element für andere Zwecke als die einfache Anzeige eines Bildes verwendet wird, beispielsweise als Teil eines Dienstes, der Seitenaufrufe zählt, verwenden Sie Nullwerte für die Breite- und Höhe-Attribute. Für Bilder mit der Breite Null wird empfohlen, ein leeres Attribut zu verwenden.

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

7. Bestätigen Sie das Formular

Mit der neuen Methode reportValidity() können Sie ein Formular validieren und die Ergebnisse zurücksetzen. Dabei werden dem Benutzer Fehler an der entsprechenden Stelle im Browser gemeldet. Benutzeragenten melden möglicherweise mehr als eine Einschränkung, wenn bei einem einzelnen Element mehrere Probleme gleichzeitig auftreten. Wenn in diesem Fall die Eingabe des „Passworts“ erforderlich ist, aber nicht ausgefüllt wird, wird dies als Fehler markiert.

 <h2>Formularvalidierung</h2>
<p>Details eingeben</p>
<form>
  <Bezeichnung>
    Obligatorische Eingabe <input type="password" name="password" required />
  </Bezeichnung>
  <button type="submit">Senden</button>
</form>
<Skript>
  document.querySelector('form').reportValidity()
</Skript>

6. Kontextmenü des Browsers

In HTML 5.1 können Sie mit dem Tag <menu> ein Menü definieren, das ein oder mehrere Elemente vom Typ <menuitem> enthält, und es dann mit dem Attribut contextmenu an ein beliebiges Element binden. Der ID-Wert des <menu>-Elements sollte mit dem Wert des Contextmenu-Attributs des Elements übereinstimmen, dem wir das Kontextmenü hinzufügen möchten.

Jedes <menuitem> kann eine der folgenden drei Formen haben:

1. Radio – ruft Optionen von einer Gruppe ab;
   
2. Kontrollkästchen – wählt eine Option aus oder ab;
   
3. Befehl – ​​führt eine Aktion aus, wenn darauf geklickt wird.
   

 <h2 Kontextmenü="Popup-Menü">
  Klicken Sie mit der rechten Maustaste, um die Kontextmenü-Demo zu erhalten.
</h2>
 
<Menütyp="Kontext" ID="Popup-Menü">
  <menuitem type="checkbox" checked="true">Kontrollkästchen 1 </menuitem>
  <menuitem type="command" label="Befehl" onclick="alert('WARNING')">Kontrollkästchen 2</menuitem> 
  <menuitem type="radio" name="group1">Optionsfeld a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Optionsfeld b</menuitem>
  <menuitem type="checkbox" disabled>Deaktiviertes Menüelement</menuitem>
</Menü>

5. Verwenden Sie kryptografische Zufallszahlen in Skripten und Stilen

Ein kryptografischer Nonce ist eine zufällig generierte Zahl, die nur einmal verwendet werden kann und für jede Seitenanforderung neu generiert werden muss. Das Nonce-Attribut kann in <script>- und <style>-Elementen verwendet werden.

Es wird häufig in der Inhaltssicherheitsrichtlinie einer Website verwendet, um zu bestimmen, ob ein bestimmtes Stylesheet oder Skript auf einer Seite implementiert werden soll. Im unten angegebenen Code ist dieser Wert fest codiert, in tatsächlichen Verwendungsszenarien wird dieser Wert jedoch zufällig generiert.

 <Skript nonce='d3ne7uWP43Bhr0e'>
  Der JavaScript-Code 
</Skript>

4. Reverse-Link-Beziehung

Das rev-Attribut wurde in HTML4 definiert, erscheint aber nicht in HTML5. Das W3C hat beschlossen, das rev-Attribut wieder in die Elemente <a> und <link> aufzunehmen. Das rev-Attribut identifiziert die Beziehung zwischen dem aktuellen und dem rückwärts verknüpften Dokument. Es wurde aufgenommen, um das weit verbreitete Datenstruktur-Markup-Format RDFa zu unterstützen.

Nehmen wir als Beispiel zwei Dokumente, die jeweils einen Kurs enthalten. Die Verknüpfung zwischen ihnen kann mit den Attributen „rel“ und „rev“ wie folgt definiert werden.

 //Dokument mit der URL „chapter1.html“
 
<link href="Lektion2.html" rel="nächste" rev="vorherige">
 
 
//Dokument mit der URL „chapter2.html“
 
<link href="Lektion1.html" rel="vorherige" rev="nächste">
<link href="Lektion3.html" rel="nächste" rev="vorherige">

3. Informationen ein-/ausblenden

Mit den neuen Elementen <details> und <summary> können Sie einem Inhalt erweiterte Informationen hinzufügen. Durch einen Klick auf das Element können Sie einen Zusatzinformationsblock ein- oder ausblenden. Standardmäßig sind zusätzliche Informationen ausgeblendet.

Im Code sollten Sie das Tag <summary> innerhalb des Tags <details> platzieren, wie unten gezeigt. Nach dem <summary>-Tag können Sie weiteren Inhalt hinzufügen, den Sie ausblenden möchten.

 <Abschnitt>
  <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>
</Abschnitt>

2. Weitere Eingabetypen

Das HTML-Eingabeelement wird um drei Eingabetypen erweitert – Woche, Monat und Datum/Uhrzeit-Lokal.

Wie die Namen schon vermuten lassen, ermöglichen die ersten beiden Elemente dem Benutzer, einen Wochentagwert und einen Monatswert auszuwählen. Je nach Browserunterstützung werden beide als Dropdown-Kalender dargestellt, in dem Sie eine bestimmte Woche oder einen bestimmten Monat des Jahres auswählen können.

datatime-local stellt ein Datums- und Uhrzeit-Eingabefeld dar, jedoch ohne Zeitzoneneinstellung. Die Auswahl der Daten erfolgt analog zur Monats- bzw. Wocheneingabe, die Uhrzeit kann separat eingegeben werden.

 <Abschnitt>
  <h2> 
    Woche, Monat und Datum/Uhrzeit-Lokal 
  </h2>
  <form action="Aktionsseite.php">
    Wählen Sie eine Woche:
    <input type="Woche" name="Jahr_Woche">
    <Eingabetyp="Senden">
  </form>
  <form action="Aktionsseite.php">
    Geburtstag (Monat und Jahr):
    <input type="Monat" name="Geburtstagsmonat">
    <Eingabetyp="Senden">
  </form>
  <form action="Aktionsseite.php">
    Beitritt (Datum und Uhrzeit):
    <input type="datetime-local" name="Geburtstagszeit">
    <input type="submit" value="Senden">
  </form>
</Abschnitt>

1. Responsive Bilder

W3C hat einige Funktionen eingeführt, um reaktionsfähige Bilder ohne Verwendung von CSS zu erstellen. Sie sind…

srcset-Bildattribut

Mit dem srcset-Attribut können Sie eine oder mehrere alternative Bildquellen angeben, die unterschiedlichen Pixelauflösungen entsprechen. Dadurch kann der Browser je nach Gerät des Benutzers die geeignete Qualitätsimplementierung für die Anzeige auswählen. Beispielsweise kann es besser sein, einem Benutzer auf einem Mobilgerät mit langsamer Verbindung ein Bild mit niedriger Auflösung anzuzeigen.

Sie können das srcset-Attribut mit seinem eigenen x-Modifikator verwenden, um das Pixelverhältnis jedes Bildes zu beschreiben. Wenn das Pixelverhältnis des Benutzers 3 beträgt, wird das hochauflösende Bild angezeigt.

 <img src="Klicks/niedrige Auflösung.jpg" srcset="
  Klicks/niedrige Auflösung.jpg 1x, 
  Klicks/mittlere Auflösung.jpg 2x, 
  Klicks/hochauflösend.jpg 3x"
>

Zusätzlich zu den Pixelverhältnissen können Sie auch den Modifikator „w“ verwenden, um eine andere Größe für das Bild festzulegen. Im folgenden Beispiel wird das hochauflösende Bild so definiert, dass es mit einer Breite von 1600 Pixeln angezeigt wird.

 <img src="Klicks/niedrige Auflösung.jpg" srcset="
  Klicks/niedrige Auflösung.jpg 500w, 
  Klicks/mittlere Auflösung.jpg 1000w, 
  Klicks/High-Res.jpg 1600w"
>

Größenbildattribut

Meistens möchten die Ersteller unterschiedliche Bilder für unterschiedliche Bildschirmgrößen anzeigen. Dies kann mithilfe des Größenattributs erfolgen. Sie können damit die Breite basierend auf dem für die Anzeige des Bildes zugewiesenen Platz anpassen und dann mit dem srcset-Attribut das entsprechende anzuzeigende Bild auswählen. Zum Beispiel…

 <img src="clicks/low-res.jpg" Größen="(max-width: 25em) 60vw, 100vw" 
  srcset="Klicks/niedrige Auflösung.jpg 500w, 
  Klicks/mittlere Auflösung.jpg 1000w, 
  Klicks/High-Res.jpg 1600w"
>

Hier definiert das Größenattribut, dass die Bildbreite 100 % der Ansichtsfensterbreite beträgt, wenn das Ansichtsfenster größer als 25 em ist, oder 60 % der Ansichtsfensterbreite, wenn es 25 em oder kleiner ist.

Das Bildelement

Mit dem Bildelement können Sie Bilder für unterschiedliche Bildschirmgrößen deklarieren. Dies lässt sich erreichen, indem das <img>-Element mit einem <picture>-Element umschlossen und mehrere untergeordnete <source>-Elemente beschrieben werden.

Das <picture>-Tag allein zeigt nichts an. Es wurde angenommen, dass Sie die Standardbildquelle als Wert des src-Attributs und die optionalen Bildquellen im scrset-Attribut deklarieren, wie unten gezeigt:

 <Bild>
  <Quellenmedien="(maximale Breite: 25em)" srcset="
    Klicks/klein/niedrige Auflösung.jpg 1x,
    Klicks/kleine/mittlere Auflösung.jpg 2x, 
    Klicks/klein/hochauflösend.jpg 3x
  ">
  <Quellenmedien="(maximale Breite: 60em)" srcset="
    Klicks/groß/niedrige Auflösung.jpg 1x,
    Klicks/groß/mittlere Auflösung.jpg 2x, 
    Klicks/groß/hochauflösend.jpg 3x
  ">
 
  <img src="Klicks/Standard/mittlere Auflösung.jpg">
</Bild>

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit hilfreich sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.