HTML-Attributreferenz
Elemente in HTML haben Attribute; das sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die gewünschten Kriterien der Nutzer 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 setzen. | |
action
|
<form> |
Die URI eines Programms, das die über das Formular übermittelten 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 ` | |
alpha
|
<input> |
Erlaubt dem Nutzer, die Opazität einer Farbe in einem `` zu wä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 Eingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben werden. | |
autocomplete
|
<form>, <input>,
<select>,
<textarea>
|
Gibt an, ob die Steuerungen in diesem Formular standardmäßig automatisch vom Browser ausgefüllt 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 Legacy-Attribut. Bitte verwenden Sie stattdessen die CSS-Eigenschaft |
|
border |
<img>, <object>,
<table>
|
Die Breite des Rahmens.
Hinweis: Dies ist ein Legacy-Attribut. Bitte verwenden Sie stattdessen die CSS-Eigenschaft |
|
capture
|
<input> |
Entsprechend der Media Capture Spezifikation, gibt an, dass eine neue Datei erfasst werden kann. | |
charset
|
<meta>
|
Gibt die Zeichenkodierung der Seite oder des Skripts an. | |
checked
|
<input>
|
Gibt an, ob das Element beim Laden der Seite aktiviert sein soll. | |
cite
|
<blockquote>,
<del>, <ins>,
<q>
|
Enthält eine URI, die auf die Quelle des Zitats oder der Änderung verweist. | |
class
|
Globales Attribut | Wird häufig mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften stilistisch zu gestalten. | |
color |
<font>, <hr>
|
Dieses Attribut setzt die Textfarbe mithilfe entweder eines benannten Farbnamen oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.
Hinweis: Dies ist ein Legacy-Attribut. Bitte verwenden Sie stattdessen die CSS-Eigenschaft |
|
colorspace
|
<input> |
Definiert den Farbraum, der von einem `` verwendet wird. | |
cols
|
<textarea> |
Definiert die Anzahl der Spalten in einem ` | |
colspan
|
<td>, <th>
|
Das `colspan`-Attribut definiert, über wie viele Spalten sich eine Zelle erstrecken soll. | |
content
|
<meta> |
Ein Wert, der je nach Kontext mit `http-equiv` oder `name` assoziiert ist. | |
contenteditable
|
Globales Attribut | Gibt an, ob der Inhalt des Elements bearbeitbar ist. | |
controls
|
<audio>,
<video>
|
Gibt an, ob dem Benutzer Wiedergabesteuerungen angezeigt werden sollen. | |
coords
|
<area> |
Ein Satz von Werten, die die Koordinaten des Hotspot-Bereichs angeben. | |
crossorigin
|
<audio>, <img>,
<link>, <script>,
<video>
|
Wie das Element mit Cross-Origin-Anfragen umgehen soll. | |
csp
Experimentell
|
<iframe> |
Gibt die Content-Security-Policy an, die ein eingebettetes Dokument für sich selbst durchsetzen muss. | |
data
|
<object> |
Gibt die URL der Ressource an. | |
data-*
|
Globales Attribut | Ermöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen. | |
datetime
|
<del>, <ins>,
<time>
|
Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind. | |
decoding
|
<img> |
Gibt die bevorzugte Methode zum Dekodieren des Bildes an. | |
default
|
<track> |
Gibt an, dass die Spur aktiviert werden sollte, es sei denn, die Benutzereinstellungen geben etwas anderes an. | |
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 (Links-nach-Rechts) oder rtl (Rechts-nach-Links). | |
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 auf POST gesetzt ist.
|
|
enterkeyhint
|
<textarea>,
contenteditable
|
Das enterkeyhint Attribut spezifiziert, welches Aktionslabel (oder Icon) für die Enter-Taste auf virtuellen Tastaturen angezeigt werden soll. Das Attribut kann mit Formularelementen (wie dem Wert von ` |
|
elementtiming
|
<img>,
<image> Elemente innerhalb eines <svg>,
Posterbilder von <video>-Elementen,
Elemente, die ein background-image haben,
und Elemente, die Textknoten enthalten, wie ein <p>
|
Gibt an, dass ein Element für das Tracking durch [`PerformanceObserver`](/de/docs/Web/API/PerformanceObserver)-Objekte mit dem `element`-Typ markiert ist. Für weitere Informationen siehe die [`PerformanceElementTiming`](/de/docs/Web/API/PerformanceElementTiming) Schnittstelle. | |
fetchpriority
|
<img>,
<link>,
<script>
|
Signalisiert, dass das Laden eines bestimmten Bildes früh im Ladeprozess mehr oder weniger Einfluss auf die Benutzererfahrung hat, als ein Browser unter Berücksichtigung des internen Prioritätsmanagements vernünftigerweise folgern kann. | |
for
|
<label>,
<output>
|
Beschreibt die Elemente, die zu diesem gehören. | |
form
|
<button>,
<fieldset>,
<input>,
<object>,
<output>,
<select>,
<textarea>
|
Gibt das Formular an, das der Besitzer 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 Eingabefeld ein Submit-Button ist (z. B. type="submit"),
setzt dieses Attribut den Kodierungstyp, der während der Formularübermittlung verwendet wird. Wenn dieses Attribut angegeben ist, überschreibt es das
`enctype`-Attribut des Formularbesitzers des Buttons.
|
|
formmethod
|
<button>,
<input>
|
Wenn der Button/das Eingabefeld ein Submit-Button ist (z. B. type="submit"),
setzt dieses Attribut die Übermittlungsmethode, die während der Formularübermittlung verwendet wird
(GET, POST etc.). Wenn dieses Attribut angegeben ist, überschreibt es das `method`-Attribut des
Formularbesitzers des Buttons.
|
|
formnovalidate
|
<button>,
<input>
|
Wenn der Button/das Eingabefeld ein Submit-Button ist (z. B. type="submit"),
gibt dieses boolesche Attribut an, dass das Formular nicht validiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es das
`novalidate`-Attribut des Formularbesitzers des Buttons.
|
|
formtarget
|
<button>,
<input>
|
Wenn der Button/das Eingabefeld ein Submit-Button ist (z. B. type="submit"),
gibt dieses Attribut den Browsing-Kontext an (zum Beispiel Tab, Fenster oder Inline-Frame), in dem die nach dem Absenden des Formulars empfangene Antwort angezeigt werden soll. Wenn dieses Attribut angegeben ist, überschreibt es das `target`-Attribut des
Formularbesitzers des Buttons.
|
|
headers
|
<td>, <th>
|
IDs der <th> Elemente, die auf dieses Element angewendet werden.
|
|
height |
<canvas>,
<embed>,
<iframe>, <img>,
<input>,
<object>,
<video>
|
Gibt die Höhe der hier gelisteten 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 untere Grenze des oberen Bereichs an. | |
href
|
<a>, <area>,
<base>, <link>
|
Die URL einer verlinkten Ressource. | |
hreflang
|
<a>, <link>
|
Gibt die Sprache der verlinkten Ressource an. | |
http-equiv
|
<meta> |
Definiert eine Pragmadirektive. | |
id
|
Globales Attribut | Wird oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein. | |
integrity
|
<link>, <script>
|
Gibt einen Subresource-Integritätswert an, der es Browsern ermöglicht, das Abgerufene zu verifizieren. |
|
inputmode
|
<textarea>,
contenteditable
|
Ermöglicht einen Hinweis darauf, welche Art von Daten beim Bearbeiten des Elements oder seines Inhalts vom Benutzer eingegeben werden könnte. Das Attribut kann mit Formularelementen (wie dem Wert von ` | |
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 Nutzer lesbaren Titel des Elements an. | |
lang
|
Globales Attribut | Definiert die in dem Element verwendete Sprache. | |
language
Veraltet
|
<script> |
Definiert die im Element verwendete Skriptsprache. | |
loading |
<img>, <iframe>
|
Gibt an, ob das Element verzögert geladen werden soll
(loading="lazy") oder sofort geladen werden soll
(loading="eager").
|
|
list
|
<input> |
Gibt eine Liste von vordefinierten Optionen an, die dem Benutzer vorgeschlagen werden sollen. | |
loop
|
<audio>,
<marquee>,
<video>
|
Gibt an, ob die Medienwiedergabe von Anfang an beginnen soll, wenn sie beendet ist. | |
low
|
<meter> |
Gibt die obere Grenze des unteren Bereichs an. | |
max
|
<input>,
<meter>,
<progress>
|
Gibt den maximal zulässigen Wert an. | |
maxlength
|
<input>,
<textarea>
|
Definiert die maximale Anzahl an Zeichen, die im Element erlaubt sind. | |
minlength
|
<input>,
<textarea>
|
Definiert die minimale Anzahl an Zeichen, die im Element erlaubt sind. | |
media
|
<a>, <area>,
<link>, <source>,
<style>
|
Gibt einen Hint für die Medien an, für die die verlinkte Ressource entworfen wurde. | |
method
|
<form> |
Definiert, welche HTTP-Methode beim Senden des Formulars verwendet wird. Kann entweder GET (Standard) oder POST sein.
|
|
min
|
<input>,
<meter>
|
Gibt den minimal zulässigen Wert an. | |
multiple
|
<input>,
<select>
|
Gibt an, ob mehrere Werte in ein Eingabefeld des Typs email oder file eingegeben werden können.
|
|
muted
|
<audio>,
<video>
|
Gibt an, ob das Audio beim Laden der Seite initial stumm geschaltet ist. | |
name
|
<button>, <form>,
<fieldset>,
<iframe>,
<input>,
<object>,
<output>,
<select>,
<textarea>,
<map>, <meta>,
<param>
|
Der Name des Elements. Wird zum Beispiel vom Server verwendet, um die Felder bei der Formularübermittlung zu identifizieren. | |
novalidate
|
<form> |
Dieses Attribut gibt an, dass das Formular beim Einreichen nicht validiert werden soll. | |
open
|
<details>,
<dialog>
|
Gibt an, ob die Inhalte derzeit sichtbar sind (im Fall eines ` `-Elements) oder ob der Dialog aktiv ist und interagiert werden kann (im Fall eines
` |
|
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 gibt eine durch Leerzeichen getrennte Liste von URLs an, die benachrichtigt werden, wenn ein Benutzer dem Hyperlink folgt. | |
placeholder
|
<input>,
<textarea>
|
Bietet einen Hinweis darauf, was in das Feld eingegeben werden kann. | |
playsinline
|
<video>
|
Ein boolesches Attribut, das angibt, dass das Video "inline" abgespielt werden soll, also innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributs nicht impliziert, dass das Video immer im Vollbildmodus abgespielt wird. | |
poster
|
<video> |
Eine URL, die einen Poster-Frame angibt, der angezeigt wird, bis der Benutzer abspielt oder vorspult. | |
preload
|
<audio>,
<video>
|
Gibt an, ob die gesamte Ressource, Teile davon oder gar 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 beim Abrufen der Ressource gesendet wird. | |
rel
|
<a>, <area>,
<link>
|
Definiert 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 statt in aufsteigender Reihenfolge angezeigt werden soll. | |
role
|
Globales Attribut | Definiert eine explizite Rolle für ein Element zur Verwendung durch assistive Technologien. | |
rows
|
<textarea> |
Definiert die Anzahl der Zeilen in einem Textbereich. | |
rowspan
|
<td>, <th>
|
Definiert die Anzahl der Zeilen, über die sich eine Tabellenzelle erstrecken soll. | |
sandbox
|
<iframe> |
Verhindert, dass ein Dokument, das in einem ` | |
scope
|
<th> |
Definiert die Zellen, auf die sich der Kopftext (definiert im ` | `-Element) bezieht. |
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 der `type`-Attributwert des Elements 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 Schatten-DOM-Schattenbaum zu. | |
span
|
<col>,
<colgroup>
|
||
spellcheck
|
Globales Attribut | Gibt an, ob Rechtschreibprüfung für das Element zulässig 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 Nummer, falls sie nicht 1 ist. | |
step
|
<input> |
||
style
|
Globales Attribut | Definiert CSS-Stile, die zuvor festgelegte Stile überschreiben. | |
summary
Veraltet
|
<table> |
||
tabindex
|
Globales Attribut | Überschreibt die standardmäßige Tab-Reihenfolge des Browsers und folgt stattdessen der angegebenen. | |
target
|
<a>, <area>,
<base>, <form>
|
Gibt an, wo das verlinkte Dokument geöffnet werden soll (im Fall eines <a>-Elements) oder wo die erhaltene Antwort angezeigt werden soll (im Fall eines <form>-Elements).
|
|
title
|
Globales Attribut | Text, der in einem Tooltip angezeigt wird, wenn man über das Element fährt. | |
translate
|
Globales Attribut |
Gibt an, ob Attributwerte eines Elements und die Werte seiner Text-Knoten-Kinder bei der Lokalisierung der Seite übersetzt oder unverändert bleiben 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 aufgeführten 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 Gesichter: das Inhaltsattribut und das IDL (Interface Definition Language)-Attribut.
Das Inhaltsattribut ist das Attribut, das Sie aus dem Inhalt (dem HTML-Code) festlegen, 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 ein Integer sein sollte. Zum Beispiel, um ein <input>-Element maxlength auf 42 mit dem Inhaltsattribut zu setzen, müssen Sie setAttribute("maxlength", "42") an diesem Element aufrufen.
Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut wird immer (kann aber umgewandelt werden) das vorhandene Inhaltsattribut verwenden, um einen Wert zurückzugeben, wenn Sie es abrufen, und wird etwas im Inhaltsattribut speichern, wenn Sie es setzen. Mit anderen Worten, die IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.
Meistens geben IDL-Attribute ihre Werte so zurück, wie sie tatsächlich verwendet werden. Zum Beispiel ist der Standard-type für <input>-Elemente "text", sodass, wenn Sie input.type="foobar" setzen, das Eingabefeld vom Typ Text sein wird (in der Darstellung und im Verhalten), aber der Wert des "type"-Inhaltsattributs wird "foobar" sein. Das type-IDL-Attribut wird jedoch die Zeichenkette "text" zurückgeben.
IDL-Attribute sind nicht immer Zeichenketten; zum Beispiel ist input.maxlength eine Zahl (ein signiertes langes). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie immer Werte des gewünschten Typs, sodass input.maxlength immer eine Zahl zurückgibt und wenn Sie input.maxlength setzen, möchte es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird dieser automatisch in eine Zahl umgewandelt, wie in den Standard-JavaScript-Regeln für Typumwandlung angegeben.
IDL-Attribute können andere Typen reflektieren wie unsinged long, URLs, Booleans, etc. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL-Attribute zusammen mit ihren entsprechenden Inhaltsattributen funktionieren, hängt vom Attribut ab. Meistens wird es den in der Spezifikation angegebenen Regeln folgen, aber manchmal tut es das nicht. HTML-Spezifikationen versuchen, dies für Entwickler möglichst freundlich zu gestalten, aber aus verschiedenen Gründen (meist historisch) verhalten sich einige Attribute merkwürdig (select.size, zum Beispiel) und Sie sollten die Spezifikationen lesen, um zu verstehen, wie sie genau funktionieren.
Boolesche Attribute
Einige Inhaltsattribute (z. B. required, readonly, disabled) werden als boolesche Attribute bezeichnet. Wenn ein boolesches Attribut vorhanden ist, ist sein Wert wahr, und wenn es fehlt, ist sein Wert falsch.
HTML definiert Einschränkungen für die zulässigen Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (äquivalent dazu, dass dem Attribut kein Wert zugeordnet ist) oder ein Wert, der ASCII-fallunempfindlich mit dem kanonischen Namen des Attributs übereinstimmt, ohne führende oder nachfolgende Leerzeichen. Die folgenden Beispiele sind gültige Möglichkeiten, ein boolesches Attribut zu markieren:
<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 zulässig. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Einschränkung räumt einige häufige Missverständnisse aus: Bei checked="false" würde beispielsweise das checked-Attribut des Elements als wahr interpretiert, da das Attribut vorhanden ist.
Ereignishandler-Attribute
Die Verwendung von Ereignishandler-Inhaltsattributen wird nicht empfohlen. Die Mischung aus HTML und JavaScript führt oft zu nicht wartbarem Code, und die Ausführung von Ereignishandler-Attributen kann auch durch Content-Sicherheitsrichtlinien blockiert werden.
Zusätzlich zu den in der obigen Tabelle aufgeführten Attributen können globale Ereignishandler — wie onclick — auch als Inhaltsattribute für alle Elemente angegeben werden.
Alle Ereignishandler-Attribute akzeptieren einen String. Der String 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-Ereignishandler-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 Variable event 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>