HTML-Attribut-Referenz
Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Anforderungen der Benutzer zu erfüllen.
Attributliste
Attributname | Elemente | Beschreibung |
---|---|---|
accept
|
<form> , <input>
|
Liste von Dateitypen, die der Server akzeptiert, typischerweise ein Dateityp. |
accept-charset
|
<form> |
Liste der unterstützten Zeichensätze. |
accesskey
|
Globales Attribut | Tastenkürzel, um das Element zu aktivieren oder den Fokus darauf zu setzen. |
action
|
<form> |
Die URI eines Programms, das die über das Formular gesendeten 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> |
Gibt eine Feature-Policy für das ` |
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 automatisch großgeschrieben wird, wenn sie vom Benutzer eingegeben wird. |
autocomplete
|
<form> , <input> ,
<select> ,
<textarea>
|
Gibt an, ob die Steuerelemente in diesem Formular standardmäßig automatisch durch den Browser 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 Breite des Rahmens.
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 soll. |
cite
|
<blockquote> ,
<del> , <ins> ,
<q>
|
Enthält eine URI, die auf die Quelle des Zitats oder der Änderung verweist. |
class
|
Globales Attribut | Oft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu stylen. |
color |
<font> , <hr>
|
Dieses Attribut legt die Textfarbe fest, entweder durch einen benannten Farbwert oder im hexadezimalen Format #RRGGBB.
Hinweis: Dies ist ein veraltetes Attribut. Bitte verwenden Sie stattdessen die CSS-Eigenschaft |
cols
|
<textarea> |
Definiert die Anzahl der Spalten in einem Textbereich. |
colspan
|
<td> , <th>
|
Das colspan-Attribut definiert, wie viele Spalten eine Zelle umfassen soll. |
content
|
<meta> |
Ein Wert, der mit http-equiv oder
name abhängig vom 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 Wiedergabesteuerelemente anzeigen soll. |
coords
|
<area> |
Eine Reihe von Werten, die die Koordinaten des Hotspot-Bereichs angeben. |
crossorigin
|
<audio> , <img> ,
<link> , <script> ,
<video>
|
Wie das Element Anforderungen von Fremddomänen behandelt |
csp
Experimentell
|
<iframe> |
Gibt die Content-Sicherheitsrichtlinie an, die ein eingebettetes Dokument einhalten muss. |
data
|
<object> |
Gibt die URL der Ressource an. |
data-*
|
Globales Attribut | Ermöglicht das Hinzufügen benutzerdefinierter Attribute zu einem 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 zum Dekodieren des Bildes an. |
default
|
<track> |
Gibt an, dass die Spur aktiviert sein sollte, es sei denn, die Benutzerpräferenzen zeigen etwas anderes an. |
defer
|
<script> |
Gibt an, dass das Skript ausgeführt werden soll, nachdem die Seite analysiert wurde. |
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 POST ist.
|
enterkeyhint
|
<textarea> ,
contenteditable
|
Das enterkeyhint
Attribut gibt an, welches Aktionslabel (oder Symbol) für die Eingabetaste auf virtuellen Tastaturen angezeigt werden soll. Das Attribut kann mit Formularelementen (wie dem Wert von textarea -Elementen) oder in Elementen in einem Bearbeitungshost (z. B. unter Verwendung des contenteditable -Attributs) verwendet werden.
|
for
|
<label> ,
<output>
|
Beschreibt Elemente, die zu diesem gehören. |
form
|
<button> ,
<fieldset> ,
<input> ,
<label> ,
<meter> ,
<object> ,
<output> ,
<progress> ,
<select> ,
<textarea>
|
Gibt das Formular an, das der Eigentümer des Elements ist. |
formaction
|
<input> ,
<button>
|
Gibt die Aktion des Elements an, die die im <form> definierte Aktion überschreibt.
|
formenctype
|
<button> ,
<input>
|
Wenn der Button/eingabe ein Submit-Button ist (z. B. type="submit" ),
legt dieses Attribut den zu verwendenden Codierungstyp während der Formularübermittlung fest. Wenn dieses Attribut angegeben ist, überschreibt es das
enctype -Attribut des Formularbesitzers des Buttons.
|
formmethod
|
<button> ,
<input>
|
Wenn der Button/eingabe ein Submit-Button ist (z. B. type="submit" ),
legt dieses Attribut die Übermittlungsmethode während der Formularübermittlung fest
(GET , POST , etc.). Wenn dieses Attribut
angegeben ist, überschreibt es das method -Attribut des
Formularbesitzers des Buttons.
|
formnovalidate
|
<button> ,
<input>
|
Wenn der Button/eingabe ein Submit-Button ist (z. B. type="submit" ),
gibt dieses boolesche Attribut an, dass das Formular bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut angegeben ist, überschreibt es das
novalidate -Attribut des Formularbesitzers des Buttons.
|
formtarget
|
<button> ,
<input>
|
Wenn der Button/eingabe ein Submit-Button ist (z. B. type="submit" ),
gibt dieses Attribut den Browsing-Kontext (z. B. Tab, Fenster oder Inline-Frame) an, in dem die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird. 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 zutreffen.
|
height |
<canvas> ,
<embed> ,
<iframe> , <img> ,
<input> ,
<object> ,
<video>
|
Gibt die Höhe der hier aufgelisteten Elemente an. Für alle anderen Elemente verwenden Sie die CSS-Eigenschaft |
hidden
|
Globales Attribut | Verhindert die Darstellung des angegebenen Elements, während Kind-Elemente, z.B. Skriptelemente, aktiv bleiben. |
high
|
<meter> |
Gibt die untere Schranke 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 Pragmadirektive. |
id
|
Globales Attribut | Oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss einzigartig sein. |
integrity
|
<link> , <script>
|
Gibt einen Subresource Integrity-Wert an, der es Browsern ermöglicht, zu überprüfen, was sie abrufen. |
intrinsicsize
Veraltet
|
<img> |
Dieses Attribut teilt dem Browser mit, die tatsächliche intrinsische Größe des Bildes zu ignorieren und stattdessen die im Attribut angegebene Größe anzunehmen. |
inputmode
|
<textarea> ,
contenteditable
|
Gibt einen Hinweis auf den Datentyp, der vom Benutzer beim Bearbeiten des Elements oder seines Inhalts eingegeben werden könnte. Das Attribut kann mit Formularelementen (wie dem Wert von
textarea -Elementen) oder in Elementen in einem Bearbeitungshost (z. B. durch das Attribut contenteditable ) verwendet werden.
|
ismap
|
<img> |
Gibt an, dass das Bild Teil einer serverseitigen Bildkarte 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 | Definiert die im Element verwendete Sprache. |
language
Veraltet
|
<script> |
Definiert die im Element verwendete Skriptsprache. |
loading |
<img> , <iframe>
|
Gibt an, ob das Element lazy-loaded (loading="lazy" ) oder sofort geladen (loading="eager" ) werden soll.
|
list
|
<input> |
Identifiziert eine Liste vordefinierter Optionen, die dem Benutzer vorgeschlagen werden sollen. |
loop
|
<audio> ,
<marquee> ,
<video>
|
Gibt an, ob das Medium nach dem Ende von vorne beginnen soll. |
low
|
<meter> |
Gibt die obere Schranke des unteren Bereichs an. |
max
|
<input> ,
<meter> ,
<progress>
|
Gibt den maximal zulässigen Wert an. |
maxlength
|
<input> ,
<textarea>
|
Definiert die maximale Anzahl von Zeichen, die im Element erlaubt sind. |
minlength
|
<input> ,
<textarea>
|
Definiert die minimale Anzahl von Zeichen, die im Element erlaubt sind. |
media
|
<a> , <area> ,
<link> , <source> ,
<style>
|
Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource ausgelegt ist. |
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 zulässigen Wert an. |
multiple
|
<input> ,
<select>
|
Gibt an, ob mehrere Werte in einer Eingabe des Typs email oder file eingegeben werden können.
|
muted
|
<audio> ,
<video>
|
Gibt an, ob das Audio beim Laden der Seite anfänglich stummgeschaltet wird. |
name
|
<button> , <form> ,
<fieldset> ,
<iframe> ,
<input> ,
<object> ,
<output> ,
<select> ,
<textarea> ,
<map> , <meta> ,
<param>
|
Name des Elements. Beispielsweise vom Server zur Identifizierung der Felder bei Formulareinsendungen verwendet. |
novalidate
|
<form> |
Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. |
open
|
<details> ,
<dialog>
|
Gibt an, ob die Inhalte momentan sichtbar sind (im Falle eines <details> -Elements) oder ob das Dialogfeld aktiv ist und interagiert werden kann (im Falle 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>
|
Gibt dem Benutzer 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 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 abspielt oder sucht. |
preload
|
<audio> ,
<video>
|
Gibt an, ob die gesamte Ressource, Teile davon oder nichts davon vorab geladen werden soll. |
readonly
|
<input> ,
<textarea>
|
Gibt an, ob das Element bearbeitet werden kann. |
referrerpolicy
|
<a> , <area> ,
<iframe> , <img> ,
<link> , <script>
|
Gibt an, welcher Referer gesendet wird, wenn die Ressource abgerufen wird. |
rel
|
<a> , <area> ,
<link>
|
Gibt die Beziehung des Zielobjekts zum Linkobjekt an. |
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 und nicht 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, wie viele Zeilen eine Tabellenzelle überspannen soll. |
sandbox
|
<iframe> |
Verhindert, dass ein in einem ` |
scope
|
<th> |
Definiert die Zellen, auf die der Header-Test (definiert im
th -Element) bezogen ist.
|
scoped
Nicht standardisiert
Veraltet
|
<style> |
|
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 Pixeln). Wenn das type -Attribut des Elements text oder password ist, ist es die Anzahl der Zeichen.
|
sizes
|
<link> , <img> ,
<source>
|
|
slot
|
Globales Attribut | Weist einem Element einen Slot in einem Schatten-DOM-Schattendom zu. |
span
|
<col> ,
<colgroup>
|
|
spellcheck
|
Globales Attribut | Gibt an, ob die 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 sie von 1 abweicht. |
step
|
<input> |
|
style
|
Globales Attribut | Definiert CSS-Stile, die zuvor festgelegte Stile überschreiben. |
summary
Veraltet
|
<table> |
|
tabindex
|
Globales Attribut | Überschreitet die Standardreihenfolge der Tabs im Browser und folgt stattdessen der angegebenen Reihenfolge. |
target
|
<a> , <area> ,
<base> , <form>
|
Gibt an, wo das verknüpfte Dokument angezeigt werden soll (im Fall eines <a> -Elements) oder wo die empfangene Antwort angezeigt werden soll (im Fall eines <form> -Elements)
|
title
|
Globales Attribut | Text, der in einem Tooltip angezeigt wird, wenn über das Element gehovert wird. |
translate
|
Globales Attribut |
Gibt an, ob die Attributwerte eines Elements und die Werte seiner Text -Knoten-Kinder 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 aufgelisteten Elemente bestimmt dies die Breite des Elements. |
wrap
|
<textarea> |
Gibt an, ob der Text umbrochen werden soll. |
Inhalts- versus IDL-Attribute
In HTML haben die meisten Attribute zwei Erscheinungsformen: das Inhaltsattribut und das IDL-Attribut (Interface Definition Language).
Das Inhaltsattribut ist das Attribut, das Sie vom Inhalt aus festlegen (dem HTML-Code), und Sie können es setzen oder abfragen über element.setAttribute()
oder element.getAttribute()
. Das Inhaltsattribut ist immer ein String, auch wenn der erwartete Wert eine ganze Zahl sein soll. Um beispielsweise einem <input>
-Element ein maxlength
von 42 mit dem Inhaltsattribut zuzuweisen, müssen Sie setAttribute("maxlength", "42")
für dieses 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 verwendet immer (kann aber transformieren) das zugrunde liegende Inhaltsattribut, um einen Wert zurückzugeben, wenn Sie es abrufen, und speichert etwas im Inhaltsattribut, wenn Sie es setzen. Anders ausgedrückt, spiegeln die IDL-Attribute im Wesentlichen die Inhaltsattribute wider.
Meistens geben IDL-Attribute ihre Werte so zurück, wie sie wirklich genutzt werden. Zum Beispiel ist der Standard-type
für <input>
-Elemente "text", also wenn Sie input.type="foobar"
, dann wird das <input>
-Element vom Typ Text sein (in der Erscheinung 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 input.maxlength
ist eine Zahl (eine signiert lange Zahl). Beim Verwenden von IDL-Attributen lesen oder setzen Sie Werte des gewünschten Typs, also wird input.maxlength
immer eine Nummer zurückgeben und wenn Sie input.maxlength
setzen, will es eine Nummer. Wenn Sie einen anderen Typ übergeben, wird er automatisch in eine Nummer konvertiert nach den Standardregeln der JavaScript-Typkonvertierung.
IDL-Attribute können andere Typen widerspiegeln wie unsignierte lange Zahlen, URLs, Booleans usw. Leider gibt es keine klaren Regeln, und das Verhalten der IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen hängt vom Attribut ab. Meistens wird es den in der Spezifikation festgelegten Regeln folgen, aber manchmal nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historische) verhalten sich einige Attribute merkwürdig (z. B. select.size
) 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 Einschränkungen für die erlaubten Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenkette sein (Äquivalenz, das Attribut kann einen nicht zugewiesenen Wert haben), oder ein Wert, der eine ASCII-Insensitivsee-Match für den kanonischen Namen des Attributs ist, 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>
Um klar zu sein, die Werte "true"
und "false"
sind nicht auf booleschen Attributen erlaubt. Um einen falschen Wert anzugeben, muss das Attribut insgesamt weggelassen werden. Diese Einschränkung klärt einige häufige Missverständnisse auf: Bei checked="false"
zum Beispiel würde das Attribut checked
des Elements als true interpretiert, weil das Attribut vorhanden ist.
Event-Handler-Attribute
Die Verwendung von Content-Event-Handler-Attributen wird nicht empfohlen. Die Mischung aus HTML und JavaScript führt oft zu unwartbarem Code, und die Ausführung von Event-Handler-Attributen kann auch durch Content-Sicherheitsrichtlinien blockiert werden.
Zusätzlich zu den in der Tabelle oben aufgeführten Attributen können globale Event-Handler — wie onclick
— auch als Content-Attribute auf allen Elementen angegeben werden.
Alle Event-Handler-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 ist, und body
der Wert des Attributs ist. Der Handler erhält die gleichen Parameter wie das entsprechende 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>