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, kryptografischer Schlüsselgenerator, der 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

• missbilligt als Attribut von <br>
• Beschreibung: bestimmt in einem nach einem float die Fortsetzungsoption
• bessere Alternative: CSS-Eigenschaft clear

compact

• missbilligt als Attribut von <ul>, <ol>, <li>
• Beschreibung: bestimmt eine kompakte Schreibweise für Listenelemente
• bessere Alternative: CSS-Eigenschaften zur Textformatierung bzw. zum Schriftbild. MDN empfielt line-height: 80%;

height

• missbilligt als Attribut von <td>, <th>
• erlaubt als Attribut von <iframe>, <img>, <object>, <canvas>
• Beschreibung: gibt die Höhe des Elementes an (für <canvas> beachten Sie bitte die Hinweise unter width!)
• 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, nur der Internet Explorer unterstützte einstmals VBScript in Webseiten. Heute gibt es nur noch JavaScript.

link

• Beschreibung: legt am <body>-Element dokumentweit die Farbe von Verweisen fest
• bessere Alternative: im Stylesheet für den Selektor a:link die Schriftfarbe festlegen

name

• missbilligt: als Attribut von <a>, <img>
• erlaubt: als Attribut von Formularelementen sowie <iframe>, <object>, <map>, <meta>
• Beschreibung:
  • In <a> Elementen: Erzeugt einen Sprunganker mit diesem Namen. Benutzen Sie statt dessen das id Attribut für ein beliebiges Element
  • In <img> Elementen: Erzeugt eine Id für das Bild. Verwenden Sie statt dessen das id Attribut.

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

Sprungmarke setzen

<!-- 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 mit <hr> erzeugten horizontalen Linie 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 in <ul> oder <li> Elementen die Art der Aufzählungszeichen einer Liste an
  • die Beschreibung der erlaubten Verwendungen finden Sie bei den jeweiligen Elementen.
• bessere Alternative: Verwenden Sie zur Festlegung des Aussehens von Auflistungszeichen die CSS-Eigenschaften list-style-type oder [[list-style-image|list-style-image

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>, <canvas>
• Beschreibung: gibt die Breite des Elementes an.
• bessere Alternative: CSS-Eigenschaft width

Beachten Sie: Die Attribute width und height legen für das <canvas> Element vor allem die Größe der Malfläche in Pixeln fest. Fehlen sie (oder enthalten sie ungültige Werte), ist die Malfläche 300 Pixel breit und 150 Pixel hoch. width- und height-Angaben im CSS skalieren die Malfläche lediglich.

Content Model (Kategorien)

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

• Seitenstrukturierung
• HTML
  (Übersicht)