HTML/Tutorials/Neu und obsolet in HTML5

In HTML5 wurden eine Reihe neuer Elemente eingeführt. Andere wurden dagegen aus dem Standard entfernt.

neue Elemente in HTML5

Formulare

Für Formulare gibt es neue Elemente:

• datalist: unterstützt Eingabe durch Vorschläge aus einer Liste
• keygen, das aber schon wieder obsolet wurde
• meter: visualisiert einen Wert einer Größe in Abhängigkeit einer Skala in bis zu drei (Ampel-)Farben, beispielsweise die Anzahl der Kommentare zu einer Frage.
• output: dient zur Ausgabe des Ergebnisses einer Berechnung oder von eingegebenen Werten
• progress: Fortschrittsanzeige

Das input-Element erlaubt eine Vielzahl neuer Werte:

• tel
• search
• url
• email
• date
• time
• number
• range: Schieberegler
• color: Farbwähler

Gerade bei Formularen gibt es viele neue und nützliche Attribute.

• autofocus
• placeholder
• required: Pflichtangabe
• pattern: Suchmuster, genauer ein regulärer Ausdruck. Es wird geprüft, ob der Inhalt auf dieses Suchmuster zutrifft.

Hauptartikel: HTML/Tutorials/Formulare/Beschriftungen

Hauptartikel: HTML/Tutorials/Formulare/browsereigene Validierung

Multimedia

In HTML4 wurden Multimedia-Dateien nur indirekt eingebunden und konnten nur mit Plug-ins wie z. B. dem Flash-Player abgespielt werden. Mit den audio- und video-Elementen können Sie Lieder und Filme nun direkt im Browser abspielen.

Mit dem canvas-Element können Sie in JavaScript erzeugte Animationen und Grafiken in Webseiten integrieren.

Textauszeichnung

Zur Textauszeichnung wurden folgende Elemente neu eingeführt:

time

dient dazu, Daten, Zeitangaben oder -dauern durch Mikroformate auch für Computer und Suchmaschinen lesbar zu machen.

mark

dient dazu, Textstellen aufgrund einer Nutzeraktion oder vermuteter Absicht des Nutzers zu markieren

ruby, rp und rt

Aussprachehinweise, hauptsächlich für asiatische Schriften

contenteditable-Attribut

Mit dem neuen Universalattribut contenteditable können Sie den Inhalt von HTML-Elementen zur Bearbeitung durch die Benutzer freigeben.

Beispiel ansehen …

<section contenteditable="true">
   <h2>Diese Überschrift kann verändert werden.</h2>
   <p>Dieser Absatz kann verändert werden.</p>
</section>

ansehen …

Benutzereingaben könnten dann beispielsweise im localStorage gespeichert werden.

obsolete Elemente

In HTML5 werden veraltete Elemente und Attribute nicht mehr als deprecated, sondern als obsolet bezeichnet.

Präsentationselemente

Dies betrifft hauptsächlich Elemente für Stilangaben, die heute mit CSS festgelegt werden.

• basefont
• big
• center
• font
• strike
• tt

Frames

Der Einsatz von Frames ist ebenfalls obsolet.

• frame
• frameset
• noframes

weitere obsolete Elemente

Folgende Elemente wurden aufgegeben, da sie nur selten verwendet wurden, oder ihr Gebrauch zu Missverständnissen führte.

• acronym: Verwenden Sie abbr für Abkürzungen.
• applet: Verwenden Sie object.
• isindex
• dir: Verwenden Sie ul.

obsolete Attribute

align

• missbilligt als Attribut von caption, iframe, img, input, object, legend, table, hr, div, h[1..6]
• erlaubt als Attribut von col, colgroup, tbody, td, tfoot, th, thead, tr
• Beschreibung: erlaubt Angaben über die horizontale Ausrichtung
• bessere Alternativen: Zentrieren mit margin, Positionierung mit position oder float, display: inline-block;, Angaben zu text-align

alink

• Beschreibung: bestimmt dokumentweit die Farbe der gerade angeklickten Verweise, nur im body erlaubt
• bessere Alternative: Verwendung der Pseudoklasse :active

autosave

• Beschreibung: automatisches Speichern von Suchbegriffen, dieses Attribut ist ein Vorschlag der WHATWG, wurde aber bis jetzt nicht in den Standard übernommen.

background

• Beschreibung: bestimmt eine Hintergrundgrafik für die gesamte Seite, nur im body erlaubt
• bessere Alternative: CSS-Eigenschaften zur Darstellung von Hintergrundbildern

bgcolor

• Beschreibung: gibt dokumentweit die Hintergrundfarbe an
• bessere Alternative: CSS-Eigenschaften zur Gestaltung des Hintergrunds

border

• missbilligt als Attribut von img, object
• erlaubt als Attribut von table
• Beschreibung: bestimmt, dass ein Rahmen um das Element gezeichnet werden soll
• bessere Alternative: CSS-Eigenschaften border-...

clear

• Beschreibung: bestimmt nach einem float die Fortsetzungsoption, nur in <br> erlaubt
• bessere Alternative: CSS-Eigenschaft clear

compact

• Beschreibung: bestimmt eine kompakte Schreibweise für Listenelemente
• bessere Alternative: CSS-Eigenschaften zur Textformatierung bzw. zum Schriftbild

height

• missbilligt als Attribut von td, th
• erlaubt als Attribut von iframe, img, object
• Beschreibung: gibt die Höhe des Elementes an
• bessere Alternative: CSS-Eigenschaft height

hspace

• Beschreibung: bestimmt einen horizontalen Abstand des Elementes, nur bei <img> und <object> erlaubt
• bessere Alternative: CSS-Angaben für seitliche Außenabstände

language

• Beschreibung: gibt die verwendete Scriptsprache an, nur in <script> erlaubt
• bessere Alternative: Angabe nicht notwendig

link

• Beschreibung: legt dokumentweit die Farbe von Verweisen fest
• bessere Alternative: für a-Elemente die Schriftfarbe festlegen

name

• missbilligt: als Attribut von a, img
• erlaubt: als Attribut von Formularelementen sowie keygen, iframe, object, map, meta, param
• Beschreibung: gibt den Namen eines Elementes an
• bessere Alternative: Angabe nicht notwendig; Um einen Anker zu erzeugen, [[HTML/Tutorials/Links/Seiteninterne_Verweise]|geben Sie dem gewünschten Element eine ID]].

Sprungmarken für seiteninterne Verweise werden nicht mehr mittels eines Links mit name-Attribut, sondern durch die Angabe einer id angegeben.

Zeichencodierung

<!-- veraltet --> <h1><a name="Allgemein">Allgemein</a></h1> <!-- HTML5 --> <h1 id="Allgemein">Allgemein</h1>

noshade

• Beschreibung: bestimmt, dass eine horizontale Linie (<hr>) ohne Schatten dargestellt wird
• bessere Alternative: Gestaltung der Linie mit CSS z. B. border-..., outline-…, box-shadow

nowrap

• Beschreibung: verhindert den automatischen Zeilenumbruch, nur in <th> und <td> erlaubt
• bessere Alternative: Verwenden der CSS-Eigenschaft white-space

size

• missbilligt als Attribut von hr
• erlaubt als Attribut von input, select
• Beschreibung: gibt die Höhe einer horizontalen Linie <hr> an, bedeutet im Zusammenhang mit <input> oder <select> etwas völlig anderes
• bessere Alternative: Gestaltung der Linie mit CSS z. B. border-..., outline-…, box-shadow

start

• Beschreibung: bestimmt den Startwert einer geordneten Liste
• bessere Alternative: automatische Nummerierung auch über mehrere Ebenen mit CSS generieren

summary

• Beschreibung: Zusammenfassung für eine Tabelle und ihren Inhalt
• bessere Alternative: Verwendung des caption-Elements

text

• Beschreibung: bestimmt dokumentweit die Schriftfarbe, nur im <body> erlaubt
• bessere Alternative: Schriftfarbe mit CSS

type

• missbilligt als Attribut von li, ul
• erlaubt als Attribut von a, object, param, input, button, script, style
• Beschreibung: gibt die Art der Aufzählungszeichen einer Liste an
• bessere Alternative: Verwenden der CSS-Eigenschaften list-style-type oder list-style-image

Beachten Sie: Die Typangabe bei link und script-Elementen kann weggelassen werden, falls Sie die Sprachen CSS bzw. JavaScript verwenden:

Angabe einer Dokumenttyp-Deklaration

<!-- bisher --> <link rel="stylesheet" href="stylesheet.css" type="text/css"> <script type="text/javascript" src="script.js"></script> <!-- HTML5 --> <link rel="stylesheet" href="stylesheet.css"> <script src="script.js"></script>

value

• missbilligt als Attribut von li
• erlaubt als Attribut von input, option, param, button
• Beschreibung: startet die Nummerierung einer geordneten Liste neu
• bessere Alternative: automatische Nummerierung auch über mehrere Ebenen mit CSS generieren

version

• Beschreibung: gibt die verwendete HTML-Version an, nur im <html> erlaubt
• bessere Alternative: nicht notwendig

vlink

• Beschreibung: bestimmt dokumentweit die Linkfarbe bereits besuchter Verweise, nur im body erlaubt
• bessere Alternative: Verwenden der Pseudoklasse :visited

vspace

• Beschreibung: setzt einen vertikalen Abstand
• bessere Alternative: Verwenden der CSS-Eigenschaften margin-top bzw. margin-bottom

width

• missbilligt als Attribut von hr, td, th, applet, pre
• erlaubt als Attribut von iframe, img, object, table, col, colgroup
• Beschreibung: gibt die Breite des Elementes an
• bessere Alternative: CSS-Eigenschaft width

Content Model (Kategorien)

HTML5 hat anstelle der Einteilung in inline und Block-Elemente neue Kategorien von Elementen.

• Seitenstrukturierung
• HTML
  (Übersicht)