Referenz der HTML-Attribute
Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die gewünschten Kriterien der Benutzer zu erfüllen.
Attributliste
| Attributname | Elemente | Beschreibung |
|---|---|---|
accept
|
<form>, <input>
|
Liste von Typen, die der Server akzeptiert, typischerweise ein Dateityp. |
accept-charset
|
<form> |
Der Zeichensatz, der, falls angegeben, "UTF-8" sein muss. |
accesskey
|
Globales Attribut | Tastenkombination, um das Element zu aktivieren oder den Fokus darauf zu legen. |
action
|
<form> |
Die URI eines Programms, das die über das Formular eingereichten Informationen verarbeitet. |
align
Veraltet
|
<caption>, <col>,
<colgroup>,
<hr>, <iframe>,
<img>, <table>,
<tbody>, <td>,
<tfoot>, <th>,
<thead>, <tr>
|
Gibt die horizontale Ausrichtung des Elements an. |
allow
|
<iframe> |
Definiert eine Feature-Policy für das Iframe. |
alpha
|
<input> |
Ermöglicht es dem Benutzer, die Opazität einer Farbe in einem type="color" Eingabefeld auszuwählen. |
alt
|
<area>,
<img>, <input>
|
Alternativer Text, falls ein Bild nicht angezeigt werden kann. |
as
|
<link>
|
Gibt den Typ des Inhalts an, der durch den Link geladen wird. |
async
|
<script> |
Führt das Skript asynchron aus. |
autocapitalize
|
Globales Attribut | Legt fest, ob die Eingabe des Benutzers automatisch großgeschrieben wird |
autocomplete
|
<form>, <input>,
<select>,
<textarea>
|
Gibt an, ob die Werte der Steuerelemente in diesem Formular standardmäßig vom Browser automatisch vervollständigt werden können. |
autoplay
|
<audio>,
<video>
|
Das Audio oder Video sollte so schnell wie möglich abgespielt werden. |
background |
<body>, <table>,
<td>, <th>
|
Gibt die URL einer Bilddatei an.
Hinweis: Obwohl Browser und E-Mail-Clients dieses Attribut möglicherweise noch
unterstützen, ist es veraltet. Verwenden Sie stattdessen CSS
|
bgcolor |
<body>, <col>,
<colgroup>,
<marquee>,
<table>,
<tbody>,
<tfoot>, <td>,
<th>, <tr>
|
Hintergrundfarbe des Elements.
Hinweis: Dies ist ein veraltetes Attribut. Bitte verwenden Sie stattdessen die
CSS-Eigenschaft |
border |
<img>, <object>,
<table>
|
Die Rahmenbreite.
Hinweis: Dies ist ein veraltetes Attribut. Bitte verwenden Sie stattdessen die
CSS-Eigenschaft |
capture
|
<input> |
Aus der Media Capture Spezifikation, gibt an, dass eine neue Datei erfasst werden kann. |
charset
|
<meta>
|
Deklariert die Zeichenkodierung der Seite oder des Skripts. |
checked
|
<input>
|
Gibt an, ob das Element beim Laden der Seite markiert sein sollte. |
cite
|
<blockquote>,
<del>, <ins>,
<q>
|
Beinhaltet eine URI, die auf die Quelle des Zitats oder der Änderung verweist. |
class
|
Globales Attribut | Häufig verwendet in CSS, um Elemente mit gemeinsamen Eigenschaften zu stylen. |
color |
<font>, <hr>
|
Dieses Attribut setzt die Textfarbe entweder mit einem benannten Farbwert oder in der hexadezimalen #RRGGBB-Form.
Hinweis: Dies ist ein veraltetes Attribut. Bitte verwenden Sie stattdessen die
CSS-Eigenschaft |
colorspace
|
<input> |
Definiert den Farbraum, der von einem type="color" Eingabefeld verwendet wird. |
cols
|
<textarea> |
Definiert die Anzahl der Spalten in einem Textbereich. |
colspan
|
<td>, <th>
|
Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll. |
content
|
<meta> |
Ein Wert, der mit http-equiv oder name je nach Kontext verbunden ist.
|
contenteditable
|
Globales Attribut | Gibt an, ob der Inhalt des Elements bearbeitbar ist. |
controls
|
<audio>,
<video>
|
Gibt an, ob der Browser dem Benutzer Steuerungen zur Wiedergabe anzeigen soll. |
coords
|
<area> |
Eine Menge von Werten, die die Koordinaten des Hotspot-Bereichs angeben. |
crossorigin
|
<audio>, <img>,
<link>, <script>,
<video>
|
Wie das Element Cross-Origin-Anfragen behandelt |
csp
Experimentell
|
<iframe> |
Gibt die Content Security Policy an, die ein eingebettetes Dokument auf sich selbst anwenden muss. |
data
|
<object> |
Gibt die URL der Ressource an. |
data-*
|
Globales Attribut | Ermöglicht Ihnen das Anhängen benutzerdefinierter Attribute an ein HTML-Element. |
datetime
|
<del>, <ins>,
<time>
|
Gibt das Datum und die Uhrzeit an, die mit dem Element verbunden sind. |
decoding
|
<img> |
Gibt die bevorzugte Methode zur Dekodierung des Bildes an. |
default
|
<track> |
Gibt an, dass die Spur aktiviert sein sollte, es sei denn, die Einstellungen des Benutzers weisen auf etwas anderes hin. |
defer
|
<script> |
Gibt an, dass das Skript nach dem Parsen der Seite ausgeführt werden soll. |
dir
|
Globales Attribut | Definiert die Textrichtung. Erlaubte Werte sind ltr (Left-To-Right) oder rtl (Right-To-Left) |
dirname
|
<input>,
<textarea>
|
|
disabled
|
<button>,
<fieldset>,
<input>,
<optgroup>,
<option>,
<select>,
<textarea>
|
Gibt an, ob der Benutzer mit dem Element interagieren kann. |
download
|
<a>, <area> |
Gibt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll. |
draggable
|
Globales Attribut | Definiert, ob das Element gezogen werden kann. |
enctype
|
<form> |
Definiert den Inhaltstyp der Formulardaten, wenn die
method POST ist.
|
enterkeyhint
|
<textarea>,
contenteditable
|
Der enterkeyhint
gibt an, welche Aktionsbeschriftung (oder Symbol) für die Enter-Taste auf
virtuellen Tastaturen angezeigt werden soll. Das Attribut kann mit
Formularelementen verwendet werden (wie z.B. dem Wert von
textarea-Elementen) oder mit Elementen in einem
Bearbeitungshost (z.B. mit dem Attribut contenteditable).
|
elementtiming
|
<img>,
<image> Elemente innerhalb eines <svg>,
Posterbilder von <video> Elementen,
Elemente, die ein background-image haben,
und Elemente, die Textknoten enthalten, wie z.B. ein <p>
|
Gibt an, dass ein Element für die Verfolgung durch [`PerformanceObserver`](/de/docs/Web/API/PerformanceObserver) Objekte mit dem "element" Typ markiert ist. Weitere Details finden Sie in der [`PerformanceElementTiming`](/de/docs/Web/API/PerformanceElementTiming) Schnittstelle.
|
for
|
<label>,
<output>
|
Beschreibt, welche Elemente zu diesem gehören. |
form
|
<button>,
<fieldset>,
<input>,
<object>,
<output>,
<select>,
<textarea>
|
Gibt das Formular an, das der Eigentümer des Elements ist. |
formaction
|
<input>,
<button>
|
Gibt die Aktion des Elements an und überschreibt die im
<form> definierte Aktion.
|
formenctype
|
<button>,
<input>
|
Wenn der Button/das Input ein Submit-Button ist (z.B. type="submit"),
legt dieses Attribut den Kodierungstyp fest, der beim Absenden des Formulars verwendet werden soll. Falls
dieses Attribut spezifiziert ist, überschreibt es das
enctype Attribut des Eigentümer-Formulars des Buttons.
|
formmethod
|
<button>,
<input>
|
Wenn der Button/das Input ein Submit-Button ist (z.B. type="submit"),
legt dieses Attribut die Methode zum Absenden des Formulars fest
(GET, POST usw.). Falls dieses Attribut
spezifiziert ist, überschreibt es das method Attribut des
Eigentümer-Formulars des Buttons.
|
formnovalidate
|
<button>,
<input>
|
Wenn der Button/das Input ein Submit-Button ist (z.B. type="submit"),
gibt dieses boolesche Attribut an, dass das Formular nicht validiert
werden soll, wenn es übermittelt wird. Falls dieses Attribut spezifiziert ist, überschreibt es das
novalidate Attribut des Eigentümer-Formulars des Buttons.
|
formtarget
|
<button>,
<input>
|
Wenn der Button/das Input ein Submit-Button ist (z.B. type="submit"),
gibt dieses Attribut den Browsing-Kontext an (z.B. Tab, Fenster,
oder Inline-Frame), in dem die nach dem Absenden des Formulars erhaltene Antwort angezeigt werden soll. Falls dieses Attribut spezifiziert ist, überschreibt es das
target Attribut des Eigentümer-Formulars des Buttons.
|
headers
|
<td>, <th>
|
IDs der <th>-Elemente, die auf dieses
Element zutreffen.
|
height |
<canvas>,
<embed>,
<iframe>, <img>,
<input>,
<object>,
<video>
|
Gibt die Höhe der aufgelisteten Elemente an. Für alle anderen Elemente
verwenden Sie die CSS-Eigenschaft |
hidden
|
Globales Attribut | Verhindert die Darstellung des angegebenen Elements, während untergeordnete Elemente, z.B. Skriptelemente, aktiv bleiben. |
high
|
<meter> |
Gibt die Untergrenze des oberen Bereichs an. |
href
|
<a>, <area>,
<base>, <link>
|
Die URL einer verknüpften Ressource. |
hreflang
|
<a>, <link>
|
Gibt die Sprache der verknüpften Ressource an. |
http-equiv
|
<meta> |
Definiert eine Pragma-Direktive. |
id
|
Globales Attribut | Häufig verwendet in CSS, um ein spezifisches Element zu stylen. Der Wert dieses Attributs muss eindeutig sein. |
integrity
|
<link>, <script>
|
Gibt einen Subresource Integrity Wert an, der es dem Browser ermöglicht zu überprüfen, was er abruft. |
inputmode
|
<textarea>,
contenteditable
|
Bietet einen Hinweis auf den Datentyp, den der Benutzer möglicherweise während der Bearbeitung des Elements oder dessen Inhalts eingibt. Das Attribut kann mit
Formularelementen verwendet werden (wie z.B. dem Wert von
textarea-Elementen) oder mit Elementen in einem Bearbeitungshost
(z.B. mit dem contenteditable Attribut).
|
ismap
|
<img> |
Gibt an, dass das Bild Teil einer serverseitigen Image-Map ist. |
itemprop
|
Globales Attribut | |
kind
|
<track> |
Gibt die Art der Textspur an. |
label
|
<optgroup>,
<option>,
<track>
|
Gibt einen für den Benutzer lesbaren Titel des Elements an. |
lang
|
Globales Attribut | Bestimmt die im Element verwendete Sprache. |
language
Veraltet
|
<script> |
Definiert die Skriptsprache, die im Element verwendet wird. |
loading |
<img>, <iframe>
|
Gibt an, ob das Element verzögert geladen werden soll
(loading="lazy") oder sofort
(loading="eager").
|
list
|
<input> |
Identifiziert eine Liste von vordefinierten Optionen, die dem Benutzer vorgeschlagen werden sollen. |
loop
|
<audio>,
<marquee>,
<video>
|
Gibt an, ob das Medium am Ende wieder von vorne beginnen soll. |
low
|
<meter> |
Gibt die Obergrenze des unteren Bereichs an. |
max
|
<input>,
<meter>,
<progress>
|
Gibt den maximal erlaubten Wert an. |
maxlength
|
<input>,
<textarea>
|
Definiert die maximale Anzahl von Zeichen, die in das Element eingegeben werden dürfen. |
minlength
|
<input>,
<textarea>
|
Definiert die minimale Anzahl von Zeichen, die in das Element eingegeben werden müssen. |
media
|
<a>, <area>,
<link>, <source>,
<style>
|
Gibt einen Hinweis auf das Medium an, für das die verlinkte Ressource entwickelt wurde. |
method
|
<form> |
Definiert, welche HTTP-Methode beim
Absenden des Formulars verwendet werden soll. Kann GET (Standard) oder
POST sein.
|
min
|
<input>,
<meter>
|
Gibt den minimal erlaubten Wert an. |
multiple
|
<input>,
<select>
|
Gibt an, ob mehrere Werte in einem Input vom Typ
email oder file eingegeben werden können.
|
muted
|
<audio>,
<video>
|
Gibt an, ob der Ton beim Laden der Seite initial stummgeschaltet sein wird. |
name
|
<button>, <form>,
<fieldset>,
<iframe>,
<input>,
<object>,
<output>,
<select>,
<textarea>,
<map>, <meta>,
<param>
|
Name des Elements. Zum Beispiel wird er vom Server verwendet, um die Felder in Formulardaten zu identifizieren. |
novalidate
|
<form> |
Dieses Attribut gibt an, dass das Formular beim Absenden nicht validiert werden soll. |
open
|
<details>,
<dialog>
|
Gibt an, ob die Inhalte derzeit sichtbar sind (im Fall eines
<details> Elements) oder ob der Dialog aktiv
ist und interagiert werden kann (im Fall eines
<dialog> Elements).
|
optimum
|
<meter> |
Gibt den optimalen numerischen Wert an. |
pattern
|
<input> |
Definiert einen regulären Ausdruck, gegen den der Wert des Elements validiert wird. |
ping
|
<a>, <area> |
Das ping-Attribut spezifiziert eine durch Leerzeichen getrennte Liste von URLs,
die benachrichtigt werden, wenn ein Benutzer dem Hyperlink folgt.
|
placeholder
|
<input>,
<textarea>
|
Bietet dem Benutzer einen Hinweis darauf, was in das Feld eingegeben werden kann. |
playsinline
|
<video>
|
Ein boolesches Attribut, das anzeigt, dass das Video "inline" abgespielt werden soll, d.h. innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributs nicht bedeutet, dass das Video immer im Vollbildmodus abgespielt wird. |
poster
|
<video> |
Eine URL, die einen Poster-Frame angibt, der angezeigt werden soll, bis der Benutzer das Video abspielt oder vorwärts springt. |
preload
|
<audio>,
<video>
|
Gibt an, ob die gesamte Ressource, Teile davon oder nichts vorgeladen werden soll. |
readonly
|
<input>,
<textarea>
|
Gibt an, ob das Element bearbeitet werden kann. |
referrerpolicy
|
<a>, <area>,
<iframe>, <img>,
<link>, <script>
|
Gibt an, welcher Referrer gesendet wird, wenn die Ressource abgerufen wird. |
rel
|
<a>, <area>,
<link>
|
Bestimmt die Beziehung des Zielobjekts zum Linkobjekt. |
required
|
<input>,
<select>,
<textarea>
|
Gibt an, ob dieses Element ausgefüllt werden muss oder nicht. |
reversed
|
<ol> |
Gibt an, ob die Liste in absteigender Reihenfolge anstelle einer aufsteigenden Reihenfolge angezeigt werden soll. |
role
|
Globales Attribut | Bestimmt eine explizite Rolle für ein Element für assistierende Technologien. |
rows
|
<textarea> |
Definiert die Anzahl der Zeilen in einem Textbereich. |
rowspan
|
<td>, <th>
|
Definiert die Anzahl der Zeilen, die eine Tabellenzelle überspannen soll. |
sandbox
|
<iframe> |
Verhindert, dass ein in einem iframe geladenes Dokument bestimmte Funktionen nutzt (z.B. das Senden von Formularen oder das Öffnen neuer Fenster). |
scope
|
<th> |
Definiert die Zellen, mit denen der Kopftext (im
th Element definiert) in Beziehung steht.
|
selected
|
<option> |
Definiert einen Wert, der beim Laden der Seite ausgewählt wird. |
shape
|
<a>, <area> |
|
size
|
<input>,
<select>
|
Definiert die Breite des Elements (in Pixel). Wenn das Element
type text oder password
ist, dann ist es die Anzahl der Zeichen.
|
sizes
|
<link>, <img>,
<source>
|
|
slot
|
Globales Attribut | Weist einem Element einen Slot in einem Schattenbaum des Schatten-DOM zu. |
span
|
<col>,
<colgroup>
|
|
spellcheck
|
Globales Attribut | Gibt an, ob eine Rechtschreibprüfung für das Element erlaubt ist. |
src
|
<audio>,
<embed>,
<iframe>, <img>,
<input>,
<script>,
<source>,
<track>,
<video>
|
Die URL des einbettbaren Inhalts. |
srcdoc
|
<iframe> |
|
srclang
|
<track> |
|
srcset
|
<img>, <source>
|
Ein oder mehrere responsive Bildkandidaten. |
start
|
<ol> |
Definiert die erste Zahl, wenn diese von 1 abweicht. |
step
|
<input> |
|
style
|
Globales Attribut | Definiert CSS-Stile, die zuvor gesetzte Stile überschreiben. |
summary
Veraltet
|
<table> |
|
tabindex
|
Globales Attribut | Überschreibt die Standard-Tastenreihenfolge des Browsers und folgt stattdessen der spezifizierten Reihenfolge. |
target
|
<a>, <area>,
<base>, <form>
|
Gibt an, wo das verlinkte Dokument (im Fall eines
<a> Elements) geöffnet oder wo die erhaltene Antwort angezeigt werden soll
(im Fall eines <form> Elements)
|
title
|
Globales Attribut | Text, der in einem Tooltip angezeigt wird, wenn über das Element gehoben wird. |
translate
|
Globales Attribut |
Gibt an, ob die Attributwerte eines Elements und die Werte seiner
Text-Knoten
beim Lokalisieren der Seite übersetzt oder unverändert gelassen werden sollen.
|
type
|
<button>,
<input>,
<embed>,
<object>,
<ol>,
<script>,
<source>,
<style>, <menu>,
<link>
|
Definiert den Typ des Elements. |
usemap
|
<img>, <input>,
<object>
|
|
value
|
<button>, <data>,
<input>, <li>,
<meter>,
<option>,
<progress>,
<param>
|
Definiert einen Standardwert, der beim Laden der Seite im Element angezeigt wird. |
width
|
<canvas>,
<embed>,
<iframe>, <img>,
<input>,
<object>,
<video>
|
Für die hier gelisteten Elemente wird die Breite des Elements festgelegt. |
wrap
|
<textarea> |
Gibt an, ob der Text umbrochen werden soll. |
Inhalts- versus IDL-Attribute
In HTML haben die meisten Attribute zwei Seiten: das Inhaltsattribut und das IDL (Interface Definition Language) Attribut.
Das Inhaltsattribut ist das Attribut, wie Sie es im Inhalt (dem HTML-Code) setzen können und Sie können es über element.setAttribute() oder element.getAttribute() setzen oder abrufen. Das Inhaltsattribut ist immer ein String, auch wenn der erwartete Wert eine ganze Zahl sein sollte. Zum Beispiel, um das maxlength eines <input> Elements mit dem Inhaltsattribut auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element aufrufen.
Das IDL-Attribut ist auch als eine JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder festlegen können. Das IDL-Attribut wird immer (kann aber transformieren) das unterliegende Inhaltsattribut verwenden, um einen Wert zurückzugeben, wenn Sie es abrufen, und es wird etwas im Inhaltsattribut speichern, wenn Sie es festlegen. Mit anderen Worten, die IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.
In der Regel geben IDL-Attribute ihre Werte zurück, wie sie wirklich verwendet werden. Zum Beispiel ist der Standardtyp type für <input> Elemente "text", sodass, wenn Sie input.type="foobar" setzen, das <input> Element vom Typ Text sein wird (im Aussehen und Verhalten), aber der Wert des Inhaltsattributs "type" "foobar" sein wird. Das type IDL-Attribut wird jedoch den String "text" zurückgeben.
IDL Attribute sind nicht immer Strings; zum Beispiel ist input.maxlength eine Zahl (ein signed long). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, sodass input.maxlength immer eine Zahl zurückgeben wird und wenn Sie input.maxlength setzen, dann erwartet es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird er automatisch in eine Zahl nach den standardmäßigen JavaScript-Regeln für Typkonvertierung umgewandelt.
IDL Attribute können andere Typen widerspiegeln, wie unsigned long, URLs, Booleans, usw. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL Attribute sich in Verbindung mit ihren entsprechenden Inhaltsattributen verhalten, hängt vom Attribut ab. Meistens wird es den Regeln der Spezifikation folgen, aber manchmal tut es das nicht. Die HTML-Spezifikationen versuchen, dies so benutzerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historische) verhalten sich einige Attribute eigenartig (select.size, zum Beispiel) und Sie sollten die Spezifikationen lesen, um genau zu verstehen, wie sie sich verhalten.
Boolesche Attribute
Einige Inhaltsattribute (z.B. required, readonly, disabled) werden boolesche Attribute genannt. Wenn ein boolesches Attribut vorhanden ist, ist sein Wert true, und wenn es fehlt, ist sein Wert false.
HTML definiert Beschränkungen für die zulässigen Werte boolescher Attribute: Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenfolge sein (äquivalent dazu kann das Attribut keinen zugewiesenen Wert haben) oder ein Wert, der eine ASCII-fallunempfindliche Übereinstimmung mit dem kanonischen Namen des Attributs ist, ohne führende oder nachfolgende Leerzeichen. Die folgenden Beispiele sind gültige Möglichkeiten zur Auszeichnung eines booleschen Attributs:
<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
This is also valid HTML and XML, but perhaps a bit verbose.
</div>
Zur Klarstellung: Die Werte "true" und "false" sind bei booleschen Attributen nicht erlaubt. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Beschränkung klärt einige häufige Missverständnisse auf: Mit checked="false" zum Beispiel würde das checked-Attribut des Elements als true interpretiert, da das Attribut vorhanden ist.
Event-Handler-Attribute
Warnung: Die Verwendung von Event-Handler-Inhaltsattributen wird nicht empfohlen. Die Mischung von HTML und JavaScript führt häufig zu nicht wartbarem Code, und die Ausführung von Event-Handler-Attributen kann auch durch Content-Security-Policies blockiert werden.
Zusätzlich zu den oben in der Tabelle aufgeführten Attributen können globale Event-Handler — wie onclick — auch als Inhaltsattribute auf allen Elementen angegeben werden.
Alle Event-Handler-Attribute akzeptieren eine Zeichenfolge. Die Zeichenfolge wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu synthetisieren, wobei name der Name des Attributs und body der Wert des Attributs ist. Der Handler erhält dieselben Parameter wie sein JavaScript-Event-Handler-Gegenstück — die meisten Handler erhalten nur einen event-Parameter, während onerror fünf erhält: event, source, lineno, colno, error. Das bedeutet, dass Sie im Allgemeinen die event-Variable innerhalb des Attributs verwenden können.
<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>