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, 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
- 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]
- Beschreibung: bestimmt nach einem
float
die Fortsetzungsoption, nur in<br>
erlaubt - bessere Alternative: CSS-Eigenschaft
clear
compact
[Bearbeiten]
- Beschreibung: bestimmt eine kompakte Schreibweise für Listenelemente
- bessere Alternative: CSS-Eigenschaften zur Textformatierung bzw. zum Schriftbild
height
[Bearbeiten]
- 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
[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
link
[Bearbeiten]
- Beschreibung: legt dokumentweit die Farbe von Verweisen fest
- bessere Alternative: für
a
-Elemente die Schriftfarbe festlegen
name
[Bearbeiten]
- 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.
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 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
[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 die Art der Aufzählungszeichen einer Liste an
- bessere Alternative: Verwenden der CSS-Eigenschaften
list-style-type
oderlist-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
- Beschreibung: gibt die Breite des Elementes an
- bessere Alternative: CSS-Eigenschaft
width
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