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 3 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):

<html>
  <head>
    <title>Beispiel</title>
  </head>
  <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>
</html>

Des weiteren bekommt der Doctype Tag unter HTML5 eine neues Attribut "manifest" in dem die URL zur Manifest-Datei für den offline Modus-Modus übergeben werden kann.

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" />
  <option value="Internet Explorer" />
  <option value="Google Chrome" />
</datalist>
html5_datalist
html5_datalist
<keygen> kryptografischer Schlüsselgenerator
<keygen name="RSA public key" challenge="123456789" keytype="RSA" />
<input type="submit" name="createcert" value="Generate" />
html5_keygen
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
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">0</output></form>
html5_output
html5_output
+
= 0
<input type="color"> Farbauswahl
<input type="color" name="favcolor" />
input type color
input type color
<input type="date"> Datumseingabe
<input type="date" name="birthday" />
input type date
input type date
<input type="datetime" /> Datum und Zeit Eingabe (mit Zeitzone)
<input type="datetime" name="termin" />
input type datetime
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 datetime-local
<input type="email" /> E-Mail Eingabefeld, inklusive Überprüfung
<input type="email" name="email" />
input type email
input type email
<input type="month" /> Monat und Jahr Eingabe
<input type="month" name="month" />
input type 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 number
<input type="range" /> Wertebereich
<input type="range" name="points" min="1" max="10" value="6" />
input type range
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 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 url
<input type="week" /> Jahr und Wochen Eingabe
<input type="week" name="woche" />
input type week
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" height="150" width="150">
  <p>Ihr Browser unterstützt das canvas-Element leider nicht.</p>
</canvas>
canvas_draw_it.js JavaScript (679 Bytes) 20.12.2020 17:12
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function drawIt(){
    var objCanvas = document.getElementById('canvas_id');
    // Falls das Objekt unterst&uuml;tzt wird
    if (objCanvas.getContext) {
      // Kontext
      var objContext = objCanvas.getContext('2d');
      objContext.fillRect(20, 20, 100, 100);
      // Falls es kein IE ist
      objContext.clearRect(30, 30, 30, 30);
      objContext.strokeStyle = '#fc0';
      objContext.strokeRect(50, 50, 40, 40);
    }
  }
  var btn = document.getElementById('drawIt');
  if (drawIt) {
    btn.addEventListener('click', drawIt);
  }
})();

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

ein Beispiel: 40 Best HTML5 and CSS3 3D Demo Examples

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.200
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Wed, 25. Sep 2024 20:55:53

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz