HTML/Tutorials/Neu und obsolet in HTML5
In HTML5 wurden eine Reihe neuer Elemente eingeführt.[1] Andere wurden dagegen aus dem Standard entfernt.
Inhaltsverzeichnis
neue Elemente in HTML5[Bearbeiten]
Formulare[Bearbeiten]
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
- date
- time
- number
- range: Schieberegler
- color: Farbwähler
Gerade bei Formularen gibt es viele neue und nützliche Attribute.[2]
- autofocus
- placeholder
- required: Pflichtangabe
- pattern: Suchmuster, genauer ein regulärer Ausdruck. Es wird geprüft, ob der Inhalt auf dieses Suchmuster zutrifft.
Multimedia[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
Mit dem neuen Universalattribut contenteditable können Sie den Inhalt von HTML-Elementen zur Bearbeitung durch die Benutzer freigeben.
<section contenteditable="true">
<h2>Diese Überschrift kann verändert werden.</h2>
<p>Dieser Absatz kann verändert werden.</p>
</section>
Benutzereingaben könnten dann beispielsweise im localStorage gespeichert werden.
obsolete Elemente[Bearbeiten]
In HTML5 werden veraltete Elemente und Attribute nicht mehr als deprecated, sondern als obsolet bezeichnet.[3]
Präsentationselemente[Bearbeiten]
Dies betrifft hauptsächlich Elemente für Stilangaben, die heute mit CSS festgelegt werden.
Frames[Bearbeiten]
Der Einsatz von Frames ist ebenfalls obsolet.
weitere obsolete Elemente[Bearbeiten]
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[Bearbeiten]
align
[Bearbeiten]
- 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 mitposition
oderfloat
,display: inline-block;
, Angaben zutext-align
alink
[Bearbeiten]
- Beschreibung: bestimmt dokumentweit die Farbe der gerade angeklickten Verweise, nur im
body
erlaubt - bessere Alternative: Verwendung der Pseudoklasse
:active
autosave
[Bearbeiten]
- Beschreibung: automatisches Speichern von Suchbegriffen, dieses Attribut ist ein Vorschlag der WHATWG, wurde aber bis jetzt nicht in den Standard übernommen.
background
[Bearbeiten]
- Beschreibung: bestimmt eine Hintergrundgrafik für die gesamte Seite, nur im
body
erlaubt - bessere Alternative: CSS-Eigenschaften zur Darstellung von Hintergrundbildern
bgcolor
[Bearbeiten]
- Beschreibung: gibt dokumentweit die Hintergrundfarbe an
- bessere Alternative: CSS-Eigenschaften zur Gestaltung des Hintergrunds
border
[Bearbeiten]
- 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
[Bearbeiten]
- missbilligt als Attribut von
<br>
- Beschreibung: bestimmt in einem nach einem
float
die Fortsetzungsoption - bessere Alternative: CSS-Eigenschaft
clear
compact
[Bearbeiten]
- 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
[Bearbeiten]
- 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
[Bearbeiten]
- Beschreibung: bestimmt einen horizontalen Abstand des Elementes, nur bei
<img>
und<object>
erlaubt - bessere Alternative: CSS-Angaben für seitliche Außenabstände
language
[Bearbeiten]
- 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
[Bearbeiten]
- 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
[Bearbeiten]
- 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.
- In
Sprungmarken für seiteninterne Verweise werden nicht mehr mittels eines Links mit name-Attribut, sondern durch die Angabe einer id angegeben.
noshade
[Bearbeiten]
- 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
[Bearbeiten]
- Beschreibung: verhindert den automatischen Zeilenumbruch, nur in
<th>
und<td>
erlaubt - bessere Alternative: Verwenden der CSS-Eigenschaft
white-space
size
[Bearbeiten]
- 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
- gibt die Höhe einer mit
- bessere Alternative: Gestaltung der Linie mit CSS z. B.
border-...
,outline-…
,box-shadow
start
[Bearbeiten]
- Beschreibung: bestimmt den Startwert einer geordneten Liste
- bessere Alternative: automatische Nummerierung auch über mehrere Ebenen mit CSS generieren
summary
[Bearbeiten]
- Beschreibung: Zusammenfassung für eine Tabelle und ihren Inhalt
- bessere Alternative: Verwendung des caption-Elements
text
[Bearbeiten]
- Beschreibung: bestimmt dokumentweit die Schriftfarbe, nur im
<body>
erlaubt - bessere Alternative: Schriftfarbe mit CSS
type
[Bearbeiten]
- 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.
- gibt in
- bessere Alternative: Verwenden Sie zur Festlegung des Aussehens von Auflistungszeichen die CSS-Eigenschaften
list-style-type
oder [[list-style-image|list-style-image
value
[Bearbeiten]
- 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
[Bearbeiten]
- Beschreibung: gibt die verwendete HTML-Version an, nur im
<html>
erlaubt - bessere Alternative: nicht notwendig
vlink
[Bearbeiten]
- Beschreibung: bestimmt dokumentweit die Linkfarbe bereits besuchter Verweise, nur im
body
erlaubt - bessere Alternative: Verwenden der Pseudoklasse
:visited
vspace
[Bearbeiten]
- Beschreibung: setzt einen vertikalen Abstand
- bessere Alternative: Verwenden der CSS-Eigenschaften
margin-top
bzw.margin-bottom
width
[Bearbeiten]
- 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
<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)[Bearbeiten]
HTML5 hat anstelle der Einteilung in inline und Block-Elemente neue Kategorien von Elementen.
Quellen[Bearbeiten]
- ↑ W3C: new-elements
- ↑ W3C: new-attributes
- ↑ W3C: obsolete-elements