HTML5

ein neuer Standard

Was verbirgt sich hinter HTML5, wo liegen die Unterschiede zu HTML4 / XHTML, es gibt einige neue Features, es werden aber auch alte Zöpfe endgültig abgeschnitten. Der Übersicht halber eine Aufsplittung in inhaltliche Teilbereiche:

Neue semantische / strukturelle Elemente

Tag Beschreibung
<article> kompletter Artikel
<aside> Zusatzinfos zum Seiteninhalt / Artikel
<bdi> trennt anders ausgerichteten Text von der Standardausrichtung des Seiteninhalts
<command> Befehlsschaltfläche (wird nur vom IE unterstützt)
<details> ein/ausblendbare Details
<summary> sichtbare Überschrift für <details>
<figure> Gruppierungselement: Bereich mit in sich geschlossenen Inhalt wie z.B. Bilder oder Code
<figcaption> Überschriftenelement: Beschriftung für das <figure> Element
<footer> Seitenfuß für die komplette Seite (Dokument) oder auch für einen Artikelbereich (<article>)
<header> Kopf für die komplette Seite (Dokument) oder auch für einen Artikelbereich (<article>)
<hgroup> Überschriftengruppierung innerhalb eines Dokumentes
<mark> markierter Text
<nav> Bereich mit der Navigation oder auch nur (Navigations-Links)
<progress> Bereich mit Fortschrittsanzeige (wird bei den Formularelementen erläutert da es eher dort zur Anwendung kommt)
<ruby> Textauszeichnungselement: Bereich mit Text und Sprachzusatzinformationen (hauptsächlich für Ostasiatische Typografie)
<rt> Bereich mit Sprachzusatzinformationen für <ruby>
<rp> Alternativer Bereich für Browser die kein Ruby unterstützen
<section> Bereich in einem Artikel, mit mindestens einer Überschrift
<time> Datums / Zeitangabe
<wbr> möglicher Zeilenumbruch
<main> (html5.1) zum Kapseln des Hauptteils der Seite z.B. mehrere Artikel <article>
Damit wird es gerade den Suchmaschinen ermöglicht Navigationselemente, Werbung und andere nicht inhaltlich relevante Informationen auszuschließen.

Für alte Browser sollte auf jeden Fall die folgende Passage ins Stylesheet aufgenommen werden, damit werden die neuen Elemente als Block-Level Elemente behandelt.

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block;}
audio, canvas, video {display:inline-block; *display:inline; *zoom:1;}

Artikel Verwendung (article Beispiel):

<body>
  <header>
    <h1>Seite mit mehreren Artikeln</h1>
  </header>
  <article>
    <hgroup>
      <h2>1. Artikel</h2>
      <h3>mit mehreren Überschriften</h3>
    </hgroup>
    <p>Dieser Artikel enthält auch noch mehrere Bereiche</p>
    <section>
      <h4>Globale Ansicht</h4>
      <p>Meistens reicht ein Bereich <mark>es könnte da aber auch andere Ansichten geben</mark></p>
    </section>
    <section>
      <h4>Andere Ansicht</h4>
      <p>Es gibt immer zwei Sichtweisen :) <a id="ref1" href="#ftn1">*<sup>1</sup></a></p>
      <figure>
        <img src="/comic.jpg" alt="Auseinandersetzung" />
        <figcaption>Comic zum Thema</figcaption>
      </figure>
    </section>
    <aside>
      <h5>Fußnoten</h5>
      <ul>
        <li><a id="ftn1" href="#ref1">*<sup>1</sup></a> Das ist ein <span lang="en">Smiley</span></li>
      </ul>
    </aside>
    <details>
      <summary>Details</summary>
      <p>Diese Diskussion wird schon seit ewigen Zeiten geführt.</p>
    </details>
  </article>
  <article>
    <h2>2. Artikel</h2>
    <p>Dieser Artikel enthält nur noch einen Bereich</p>
    <h4>Globale Ansicht</h4>
    <p>Hier reicht ein Bereich.</p>  
  </article>
  <footer>
    <p>ps: mir fällt sonst nichts mehr ein, außer das „header“ und „footer“ auch noch im „article“ eingesetzt werden können!</p>  
  </footer>
</body>

Neue Formularelemente

Tag Beschreibung
<datalist> Erweiterung des <input> Elements um Optionen, wie beim <select> Element also quasi eine Combobox
<input type="text" maxlength="50" list="browsers" name="favBrowser" />
<datalist id="browsers">
  <option value="Mozilla Firefox"> <!-- W3C -->
  <option value="Internet Explorer"/> <!-- XHTML5 -->
  <option value="Google Chrome"></option> <!-- was der Firefox draus macht -->
</datalist>
html5_datalist
W3C Validator Überprüfung fehlerhalt, die Firefox Variante wird als korrekt erkannt
<keygen> kryptografischer Schlüsselgenerator
<keygen name="RSA public key" challenge="123456789" keytype="RSA" />
<input type="submit" name="createcert" value="Generate" />
html5_keygen
<meter> Fortschrittsbalken
<meter value="5" min="1" optimum="9" max="10"></meter>
Die Validatoren meckern wenn das meter-Tag als Self-Closing-Tag im Code steht aber nur so wird es im Firefox angezeigt! html5_meter
<output> Ergebnisfeld für eine Berechnung
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any" />
  + <input name="b" type="number" step="any" />
  = <output name="o"></output>
  </form>
html5_output
+
=
<input type="color"> Farbauswahl
<input type="color" name="favcolor" />
input type color
<input type="date"> Datumseingabe
<input type="date" name="birthday" />
input type date
<input type="datetime"> Datum und Zeit Eingabe (mit Zeitzone)
<input type="datetime" name="termin" />
input type datetime
<input type="datetime-local"> Datum und Zeit Eingabe lokale Zeit (ohne Zeitzone)
<input type="datetime-local" name="termin" />
input type datetime-local
<input type="email"> E-Mail Eingabefeld, inklusive Überprüfung
<input type="email" name="email" />
input type email
<input type="month"> Monat und Jahr Eingabe
<input type="month" name="month" />
input type month
<input type="number"> Nummern Eingabefeld mit Einschränkungsmöglichkeiten
  • max: erlaubte Obergrenze
  • min: erlaubte Untergrenze
  • step: Intervall-Einstellungsmöglichkeit
<input type="number" name="note" min="1" max="6" value="6" />
input type number
<input type="range"> Wertebereich
<input type="range" name="points" min="1" max="10" value="6" />
input type range
<input type="search"> Such Feld
<input type="search" name="googlesearch" />
<input type="tel"> Telefonnummer Eingabe
<input type="tel" name="telefon" />
<input type="time"> Zeit Eingabe Stunden und Minuten
<input type="time" name="time" />
input time
<input type="url"> Web-Adresse (URL) Eingabe, inklusive Überprüfung, beim Opera wird das Protokoll hinzugefügt
<input type="url" name="homepage" />
input url
<input type="week"> Jahr und Wochen Eingabe
<input type="week" name="woche" />
input type week

Neue, noch nicht in den neuen Elementen aufgeführte Attribute

Attribut Beschreibung
autocomplete Autovervollständigung ein (on) oder aus (off) schalten, sowohl für das form-Tag als auch für input-Tags
novalidate form-Tag Attribut, welches festlegt das die Formulardaten vor der Übertragung nicht überprüft werden sollen
autofocus legt das input Element fest das den Fokus erhält wenn die Seite geladen wurde
form legt das oder auch die form-Elemente über die id fest, dem das input-Element zugeordnet ist,
soll ein input-Element mehreren form-Elementen zugeordnet werden ist das in Form einer Space-separierten Liste zu realisieren
formaction
formenctype
formmethod
formnovalidate
formtarget
für input-Elemente des Typ submit und image, überschreibt die jeweiligen form-Attribute.
height
width
für input-Elemente des Typ image, zur Definition der Bildabmessungen
multiple für input-Elemente des Typ email und file, erlaubt mehrfach Zuweisungen
pattern für input-Elemente des Typ text, search, url, tel, email und password, legt eine regular expression fest gegen die die Eingabe überprüft wird
placeholder für input-Elemente des Typ text, search, url, tel, email und password, definiert den erwarteten Wert eines Input-Feldes bis zur Eingabe eines Wertes
required für input-Elemente des Typ text, search, url, tel, email, password, date pickers, number, checkbox, radio und file, das so gekennzeichnete Pflichtfeld muss ausgefüllt werden
data-... Benutzerdefinierte Attribute, zur Nutzung in Javascripts el.getAttribute('data-...') ging vorher schon, war aber nicht valide/gültig (wurde also vom W3C-Validator abgestraft)

Multimediaelemente Video & Audio

Tag Beschreibung
<video>
<video controls preload="none" poster="/media/video/sammy.jpg" width="640" height="360">
  <source src="/media/video/sammy.mp4" type="video/mp4" />
  <source src="/media/video/sammy.webm" type="video/webm" />
  <source src="/media/video/sammy.ogv" type="video/ogg" />
</video>
Beispiel: Video.js - HTML5 Video Player mit Fallback
<audio>
<audio controls>
  <source src="/audio.ogg" type="audio/ogg">
  <source src="/audio.mp3" type="audio/mpeg">
  <span lang="de">Ihr Browser unterstützt keine Audio-Wiedergabe.</span>
  <span lang="en">Your browser does not support the audio tag.</span>
</audio>

2D/3D Graphiken

Tag Beschreibung
<canvas>
<canvas id="canvas_id" style="margin-top: 12px; border: 1px solid #333;" height="150" width="150">
  <p>Ihr Browser unterst&uuml;tzt das canvas-Element leider nicht.</p>
</canvas>
function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if (objCanvas.getContext) {
    // Kontext
    var objContext = objCanvas.getContext('2d');
    objContext.fillRect(20, 20, 100, 100);
    // Falls es kein IE ist
    if (!(/MSIE/.test(navigator.userAgent) && !window.opera))
      objContext.clearRect(30, 30, 30, 30);
    objContext.strokeStyle = "#fc0";
    objContext.strokeRect(50, 50, 40, 40);
  }
}

Ihr Browser unterstützt das canvas-Element leider nicht.

einige Beispiele:

Autor: , veröffentlicht: , letzte Änderung:

Kontakt

Copyright / License of sources

Copyright (c) 2007-2017, Udo Schmal <udo.schmal@t-online.de>

Permission to use, copy, modify, and/or distribute the software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Service Infos

CMS Info
UDOs Webserver

0.3.1.24

All in one Webserver

Udo Schmal

Sa, 21 Okt 2017 00:30:10
Development Info
Lazarus LCL 1.9.0.0

Free Pascal FPC 3.1.1

OS:Win64, CPU:x86_64
Hardware Info
Precision WorkStation T3500

Intel(R) Xeon(R) CPU W3530 @ 2.80GHz

x86_64, 1 physical CPU(s), 4 Core(s), 8 logical CPU(s), 2800 MHz