HTML-Attribute – Kostenloses Online-Tutorial

HTML-Attribute werden im öffnenden Tag verwendet. Sie liefern zusätzliche Informationen über HTML-Elemente. Ein Attribut stellt Metadaten für ein Element bereit oder verändert dessen Verhalten. Das Attribut besteht aus einem Namen, gefolgt vom Gleichheitszeichen (=) und einem Wert in Anführungszeichen ("").

Ein einfaches mentales Modell: Stelle dir ein Element als Substantiv und seine Attribute als Adjektive vor, die es beschreiben. In <a href="https://www.w3docs.com">W3Docs</a> ist das <a>-Element der Link, und das href-Attribut teilt dem Browser mit, wohin der Link zeigt. Ohne das Attribut würde das Element zwar existieren, hätte aber kein Ziel.

Syntax

Syntax von HTML-Attributen

<tag attribute="value">Your Text</tag>

Das Attribut befindet sich immer im öffnenden Tag, niemals im schließenden Tag. Ein Element kann mehrere Attribute gleichzeitig tragen, die jeweils durch ein Leerzeichen getrennt werden.

Das href-Attribut

Der HTML-Tag <a> erstellt einen Link, dessen Adresse im href-Attribut definiert wird. Im folgenden Beispiel haben wir den <a>-Tag mit dem href-Attribut verwendet. Zwischen den Anführungszeichen steht die Adresse der Seite, zu der wir nach dem Klick auf den Link gelangen.

Beispiel des HTML-Tags `<a>` mit dem href-Attribut:

Attribut-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com">Click here and go to the homepage.</a>
  </body>
</html>

Probier es selbst »

Ergebnis

Click and go to the homepage

Das id-Attribut

Das HTML-Attribut id definiert eine eindeutige ID für jedes Element.

Beispiel des HTML-Tags `<div>` mit dem id-Attribut:

Beispiel des div-Tags mit dem „id"-Attribut

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text {
        font-family: sans-serif;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>Example of the div tag with the "id" attribute</h2>
    <div id="text">Here is some text for the div tag with the "id" attribute.</div>
  </body>
</html>

Probier es selbst »

Das style-Attribut

Das style-Attribut definiert die Darstellung eines Elements, z. B. Farbe, Größe, Schriftart usw.

Beispiel des HTML-Tags `<p>` mit dem style-Attribut:

Beispiel des p-Tags mit dem „style"-Attribut:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Example of the p tag with the style attribute</h2>
    <p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
  </body>
</html>

Probier es selbst »

Das start-Attribut

Das start-Attribut legt den Startwert des ersten Listenelements in einer geordneten Liste fest. Das folgende Beispiel zeigt zwei Listen nebeneinander: Die erste hat kein start-Attribut, zählt also standardmäßig ab 1; die zweite verwendet start="30", sodass ihre Elemente mit 30, 31, 32 nummeriert werden.

Beispiel des HTML-Tags `<ol>` mit dem start-Attribut:

Beispiel des ol-Tags mit dem „start"-Attribut

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Default ordered list (starts at 1):</h2>
    <ol>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
    <h2>Ordered list with start="30":</h2>
    <ol start="30">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </body>
</html>

Probier es selbst »

Mehrere Attribute

Du kannst einem HTML-Element mehr als ein Attribut hinzufügen. Achte darauf, zwischen den Attributen jeweils ein Leerzeichen zu setzen.

Die Reihenfolge der Attribute spielt keine Rolle.

HTML-Attribute Beispiel

<tag attribute1="value" attribute2="value">Your text</tag>

Beispiel des HTML-Tags `<img>` mit den Attributen src, width, height und alt:

Beispiel des HTML-img-Tags mit mehreren Attributen

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>A photo with multiple attributes:</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Probier es selbst »

Boolean-Attribute

Einige Attribute sind boolean-Attribute: Ihre bloße Anwesenheit bedeutet „wahr", ihre Abwesenheit bedeutet „falsch". Beispiele hierfür sind disabled, checked, readonly, required, selected und multiple.

Bei einem boolean-Attribut ist der angegebene Wert irrelevant — entscheidend ist, ob das Attribut überhaupt am Element vorhanden ist. Die folgenden drei Schreibweisen sind gleichwertig und deaktivieren allesamt das Eingabefeld:

<input disabled>
<input disabled="">
<input disabled="disabled">

Um ein boolean-Attribut auf „falsch" zu setzen, schreibt man nicht false als Wert — man entfernt das Attribut vollständig. Das Schreiben von disabled="false" deaktiviert das Eingabefeld trotzdem, weil das Attribut vorhanden ist.

Beispiel für boolean-Attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Enabled input: <input value="You can type here"></p>
    <p>Disabled input: <input value="You cannot type here" disabled></p>
    <p>Checked by default: <input type="checkbox" checked> Accept terms</p>
  </body>
</html>

Anführungszeichen bei Attributwerten

Attributwerte können in doppelte Anführungszeichen, einfache Anführungszeichen oder in manchen Fällen auch ganz ohne Anführungszeichen geschrieben werden.

<a href="page.html">Double quotes (recommended)</a>
<a href='page.html'>Single quotes</a>
<a href=page.html>Unquoted</a>

Doppelte Anführungszeichen werden empfohlen. Sie sind der am häufigsten verwendete Stil und ermöglichen es, dass der Wert einfache Anführungszeichen enthält, z. B. title="It's a link".

Einfache Anführungszeichen sind nützlich, wenn der Wert selbst ein doppeltes Anführungszeichen enthält, zum Beispiel title='He said "hello"'.

Werte ohne Anführungszeichen sind riskant. Ein Wert ohne Anführungszeichen darf keine Leerzeichen enthalten – ein Leerzeichen beendet den Wert vorzeitig. So wird class=btn primary als class mit dem Wert btn und einem separaten Attribut primary gelesen – nicht als zwei Klassennamen. Werte ohne Anführungszeichen dürfen zudem kein =, keine Anführungszeichen oder andere Sonderzeichen enthalten. Zur Sicherheit sollten Attributwerte immer in Anführungszeichen gesetzt werden.

Content-Attribute und IDL-Attribute

In HTML hat ein Attribut zwei Seiten: das Content-Attribut (was im Markup geschrieben steht) und das IDL-Attribut (die entsprechende JavaScript-Eigenschaft am DOM-Element, wobei IDL für Interface Definition Language steht).

Das Content-Attribut ist der wörtliche Wert aus dem HTML-Quellcode. Man liest und schreibt ihn mit element.getAttribute() und element.setAttribute(). Bei einem Formularfeld repräsentiert das Content-Attribut in der Regel den Anfangswert.

Das IDL-Attribut ist eine JavaScript-Eigenschaft wie element.value. Es spiegelt das Content-Attribut wider, repräsentiert aber den aktuellen Zustand des Elements, der sich ändern kann, während der Benutzer mit der Seite interagiert.

Der Unterschied zeigt sich am deutlichsten bei einem <input>-Element. Gegeben <input id="name" value="Anna">, wenn ein Benutzer Maria in das Feld eingibt:

const el = document.getElementById("name");

el.getAttribute("value"); // "Anna"  — the content attribute (initial value from HTML)
el.value;                 // "Maria" — the IDL property (current value in the DOM)

Wenn man also den Wert benötigt, den der Benutzer gerade sieht, liest man el.value; wenn man den ursprünglich im HTML geschriebenen Wert benötigt, liest man el.getAttribute("value").

Einige Content-Attribute wie readonly, disabled und required sind boolean-Attribute (siehe den Abschnitt oben): Ihr Wert ist true, wenn sie vorhanden sind, und false, wenn sie fehlen.

Die beiden folgenden Tabellen dienen als Referenz. Die erste listet die am häufigsten verwendeten Attribute auf; die zweite ist der vollständige Katalog mit den Elementen, zu denen jedes Attribut gehört.

Liste der am häufigsten verwendeten HTML-Attribute:

Attribut	Beschreibung	Beispiel
alt	Definiert einen alternativen Text, wenn das ursprüngliche Element nicht angezeigt wird.	alt="HTML Attributes"
height	Definiert die Höhe des Elements.	height="250"
href	Definiert die URL für einen Link.	href="https://www.w3docs.com/"
hreflang	Definiert die Sprache des verlinkten Dokuments.	hreflang="en"
id	Definiert eine eindeutige ID für ein HTML-Element.	id="example"
lang	Definiert die Sprache des Dokuments (wird im `<html>`-Tag verwendet).	`<html lang="en-US">`
rel	Definiert die Beziehung zwischen dem Ziel und den verlinkten Dokumenten.	rel="nofollow"
shape	Definiert die Form des Elements.	shape="circle"
span	Definiert die Anzahl der Spalten, die ein `<col>`- oder `<colgroup>`-Element überspannt.	span="2"
src	Definiert die Quelle des Elements.	`src="https://example.com/image.jpg"`
start	Legt den Startwert einer geordneten Liste fest (wird im `<ol>`-Tag verwendet).	`<ol start="30">`
style	Legt den CSS-Stil eines HTML-Elements fest (Größe, Schriftart, Farbe usw.).	style="color:red;text-align:right"
target	Definiert, wo der Link geöffnet werden soll.	target="_blank"
wrap	Definiert, ob der Text umgebrochen werden soll oder nicht.	wrap="hard"
width	Definiert die Breite des Elements.	width="120"

Siehe auch eine Liste der globalen HTML-Attribute, die mit jedem HTML-Element verwendet werden können.

Vollständige Liste der HTML-Attribute:

Attribut	Gehört zu	Beschreibung
accept	`<input>`	Definiert die Dateitypen, die vom Server akzeptiert werden (nur für type="file").
accept-charset	`<form>`	Definiert die Zeichenkodierungen, die für die Formularübermittlung verwendet werden.
accesskey	Global Attributes	Definiert eine Tastenkombination zum Aktivieren eines Elements.
action	`<form>`	Definiert, wohin die Formulardaten beim Absenden gesendet werden sollen.
align	HTML5 unterstützt dieses Attribut nicht.	Definiert die Ausrichtung relativ zu benachbarten Elementen. CSS kann stattdessen verwendet werden.
alt	`<area>`, `<img>`, `<input>`	Definiert einen alternativen Text, wenn das ursprüngliche Element nicht angezeigt wird.
async	`<script>`	Definiert, dass das Skript asynchron ausgeführt wird. Wird nur für externe Skripte verwendet.
autocomplete	`<form>`, `<input>`	Definiert, ob die automatische Vervollständigung für das `<form>`- oder `<input>`-Element aktiviert sein soll.
autofocus	`<button>`, `<input>`, `<select>`, `<textarea>`	Definiert, dass das Element beim Laden der Seite automatisch den Fokus erhält.
autoplay	`<audio>`, `<video>`	Definiert, dass Audio oder Video automatisch abgespielt wird, sobald es bereit ist.
bgcolor	HTML5 unterstützt dieses Attribut nicht.	Definiert die Hintergrundfarbe eines Elements. CSS kann stattdessen verwendet werden.
border	HTML5 unterstützt dieses Attribut nicht.	Definiert die Rahmenbreite eines Elements. CSS kann stattdessen verwendet werden.
charset	`<meta>`, `<script>`	Definiert die Zeichenkodierung.
checked	`<input>`	Definiert, dass ein `<input>`-Element beim Laden der Seite vorausgewählt sein soll (für type="checkbox" oder type="radio").
cite	`<blockquote>`, `<del>`, `<ins>`, `<q>`	Definiert eine URL, die das Zitat, den gelöschten oder eingefügten Text erklärt.
class	Global Attributes	Definiert einen oder mehrere Klassennamen für ein Element.
color	HTML5 unterstützt dieses Attribut nicht.	Definiert die Textfarbe eines Elements. CSS kann stattdessen verwendet werden.
cols	`<textarea>`	Definiert die sichtbare Breite eines Textbereichs.
colspan	`<td>`, `<th>`	Definiert die Anzahl der Spalten, die eine Tabellenzelle überspannen soll.
content	`<meta>`	Gibt den Wert an, der zum http-equiv- oder name-Attribut gehört.
contenteditable	Global Attributes	Definiert, ob der Inhalt eines Elements bearbeitbar ist oder nicht.
controls	`<audio>`, `<video>`	Definiert, dass Audio- oder Videosteuerelemente angezeigt werden müssen (z. B. Wiedergabe- oder Pause-Schaltfläche usw.).
coords	`<area>`	Definiert die Koordinaten des Bereichs.
data	`<object>`	Definiert die URL der Ressource, die vom Objekt verwendet wird.
data-*	Global Attributes	Speichert benutzerdefinierte Daten, die für die Seite oder Anwendung privat sind.
datetime	`<del>`, `<ins>`, `<time>`	Definiert Datum und Uhrzeit.
default	`<track>`	Definiert, dass die Spur aktiviert wird, wenn die Benutzereinstellungen keine andere Spur als geeigneter ausweisen.
defer	`<script>`	Definiert, dass das Skript ausgeführt wird, wenn die Seite fertig geparst ist. Wird nur für externe Skripte verwendet.
dir	Global Attributes	Definiert die Textrichtung für den Inhalt eines Elements.
dirname	`<textarea>`, `<input>`	Definiert, dass die Textrichtung übermittelt wird.
disabled	`<button>`, `<fieldset>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>`	Definiert, dass das angegebene Element oder die Gruppe von Elementen deaktiviert sein soll.
download	`<a>`, `<area>`	Definiert, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt.
draggable	Global Attributes	Definiert, ob ein Element ziehbar ist oder nicht.
dropzone	Global Attributes	Definiert, ob die gezogenen Daten beim Ablegen kopiert, verschoben oder verknüpft werden.
enctype	`<form>`	Definiert, wie die Formulardaten kodiert werden sollen, wenn sie an den Server gesendet werden. Wird nur für method="post" verwendet.
for	`<label>`, `<output>`	Gibt an, mit welchem Formularelement (oder welchen Formularelementen) ein Label oder eine Berechnung verknüpft ist.
form	`<button>`, `<fieldset>`, `<input>`, `<label>`, `<meter>`, `<object>`, `<output>`, `<select>`, `<textarea>`	Definiert den Namen des Formulars, zu dem das Element gehört.
formaction	`<button>`, `<input>`	Definiert, wohin die Formulardaten beim Absenden gesendet werden sollen. Wird nur für type="submit" verwendet.
headers	`<th>`, `<th>`	Definiert eine oder mehrere Kopfzellen, mit denen eine Zelle verbunden ist.
height	`<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<object>`, `<video>`	Definiert die Höhe des Elements.
hidden	Global Attributes	Definiert, dass ein Element nicht relevant ist.
high	`<meter>`	Definiert die Obergrenze des vom `<meter>`-Element dargestellten Bereichs.
href	`<a>`, `<area>`, `<base>`, `<link>`	Definiert die URL der Seite, zu der der Link führt.
hreflang	`<a>`, `<area>`, `<link>`	Definiert die Sprache des verlinkten Dokuments.
http-equiv	`<meta>`	Gibt dem content-Attribut einen HTTP-Header für die Information oder den Wert.
id	Global Attributes	Definiert eine eindeutige ID für ein Element.
ismap	`<img>`	Definiert ein Bild als serverseitige Image-Map.
kind	`<track>`	Definiert die Art der Textspur.
label	`<track>`, `<option>`, `<optgroup>`	Definiert den Titel der Textspur.
lang	Global Attributes	Definiert die Sprache des Inhalts eines Elements.
list	`<input>`	Verweist auf ein `<datalist>`-Element, das vordefinierte Optionen für ein `<input>`-Element enthält.
loop	`<audio>`, `<video>`	Definiert, dass Audio oder Video jedes Mal von vorne beginnt, wenn es zu Ende ist.
low	`<meter>`	Definiert den Bereich, der als niedriger Wert gilt.
max	`<input>`, `<meter>`, `<progress>`	Definiert den Maximalwert.
maxlength	`<input>`, `<textarea>`	Definiert die maximale Anzahl von Zeichen, die ein Element enthalten kann.
media	`<a>`, `<area>`, `<link>`, `<source>`, `<style>`	Definiert, für welches Medium oder Gerät das verlinkte Dokument optimiert ist.
method	`<form>`	Definiert die HTTP-Methode, die beim Senden von Formulardaten verwendet werden soll.
min	`<input>`, `<meter>`	Definiert einen Mindestwert.
multiple	`<input>`, `<select>`	Definiert, dass der Benutzer mehr als einen Wert eingeben kann.
muted	`<audio>`, `<video>`	Definiert, dass die Audioausgabe des Videos stummgeschaltet sein muss.
name	`<button>`, `<fieldset>`, `<form>`, `<iframe>`, `<input>`, `<map>`, `<meta>`, `<object>`, `<output>`, `<param>`, `<select>`, `<textarea>`	Definiert den Namen des Elements.
novalidate	`<form>`	Definiert, dass das Formular beim Absenden nicht validiert werden soll.
onabort	`<audio>`, `<embed>`, `<img>`, `<object>`, `<video>`	Skript, das beim Abbrechen ausgeführt wird.
onafterprint	`<body>`	Skript, das nach dem Drucken des Dokuments ausgeführt wird.
onbeforeunload	`<body>`	Skript, das ausgeführt wird, wenn das Dokument entladen werden soll.
onblur	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element seinen Fokus verliert.
oncanplay	`<audio>`, `<embed>`, `<object>`, `<video>`	Skript, das ausgeführt wird, wenn eine Datei bereit ist, abgespielt zu werden.
oncanplaythrough	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn eine Datei bis zum Ende ohne Pufferpausen abgespielt werden kann.
onchange	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn der Wert des Elements geändert wird.
onclick	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn auf das Element geklickt wird.
oncontextmenu	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Kontextmenü ausgelöst wird.
oncopy	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn der Inhalt des Elements kopiert wird.
oncuechange	`<track>`	Skript, das ausgeführt wird, wenn sich der Cue in einem `<track>`-Element ändert.
oncut	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn der Inhalt des Elements ausgeschnitten wird.
ondblclick	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn auf das Element doppelgeklickt wird.
ondrag	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element gezogen wird.
ondragend	Alle sichtbaren Elemente.	Skript, das am Ende eines Ziehvorgangs ausgeführt wird.
ondragenter	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Element auf ein gültiges Ablageziel gezogen wurde.
ondragleave	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Element ein gültiges Ablageziel verlässt.
ondragover	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Element über ein gültiges Ablageziel gezogen wird.
ondragstart	Alle sichtbaren Elemente.	Skript, das zu Beginn eines Ziehvorgangs ausgeführt wird.
ondrop	Alle sichtbaren Elemente.	Skript, das zu Beginn eines Ziehvorgangs ausgeführt wird.
ondurationchange	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn sich die Länge des Mediums ändert.
onemptied	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn etwas Unerwartetes passiert und die Datei nicht mehr verfügbar ist.
onended	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Medium das Ende erreicht.
onerror	`<audio>`, `<video>`, `<embed>`, `<object>`, `<script>`, `<style>`, `<body>`	Skript, das ausgeführt wird, wenn ein Fehler auftritt.
onfocus	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element den Fokus erhält.
onhashchange	`<body>`	Skript, das ausgeführt wird, wenn sich der Anker ändert.
oninput	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element Benutzereingaben empfängt.
oninvalid	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element ungültig ist.
onkeydown	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Benutzer eine Taste drückt.
onkeypress	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Benutzer eine Taste drückt.
onkeyup	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Benutzer eine Taste loslässt.
onload	`<body>`, `<iframe>`, `<input>`, `<img>`, `<script>`, `<style>`, `<link>`	Skript, das ausgeführt wird, wenn der Ladevorgang abgeschlossen ist.
onloadeddata	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn Mediendaten geladen werden.
onloadedmetadata	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn Metadaten geladen werden.
onloadstart	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn die Datei zu laden beginnt, bevor tatsächlich etwas geladen wurde.
onmousedown	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn eine Maustaste auf einem Element gedrückt wird.
onmousemove	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, solange der Mauszeiger über einem Element bewegt wird.
onmouseout	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Mauszeiger ein Element verlässt.
onmouseup	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn eine Maustaste über einem Element losgelassen wird.
onmouseover	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Mauszeiger über ein Element bewegt wird.
onmousewheel	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn ein Mausrad über einem Element scrollt.
onoffline	`<body>`	Skript, das ausgeführt wird, wenn der Browser offline zu arbeiten beginnt.
ononline	`<body>`	Skript, das ausgeführt wird, wenn der Browser online zu arbeiten beginnt.
onpagehide	`<body>`	Skript, das ausgeführt wird, wenn ein Benutzer eine Seite verlässt.
onpageshow	`<body>`	Skript, das ausgeführt wird, wenn ein Benutzer zu einer Seite navigiert.
onpaste	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn Inhalte in ein Element eingefügt werden.
onpause	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Medium pausiert wird.
onplay	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Medium zu spielen beginnt.
onplaying	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Medium abgespielt wird.
onpopstate	`<body>`	Skript, das ausgeführt wird, wenn sich der Verlauf des Fensters ändert.
onprogress	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn der Browser dabei ist, die Mediendaten abzurufen.
onratechange	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn sich die Wiedergabegeschwindigkeit ändert.
onreset	`<form>`	Skript, das ausgeführt wird, wenn auf eine Zurücksetzen-Schaltfläche in einem Formular geklickt wird.
onresize	`<body>`	Skript, das ausgeführt wird, wenn die Größe des Browserfensters geändert wird.
onscroll	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn die Scrollleiste eines Elements gescrollt wird.
onsearch	`<input>`	Skript, das ausgeführt wird, wenn der Benutzer etwas in ein Suchfeld eingibt.
onseeked	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das seeking-Attribut auf false gesetzt wird und anzeigt, dass die Suche beendet ist.
onseeking	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das seeking-Attribut auf true gesetzt wird und anzeigt, dass die Suche aktiv ist.
onselect	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Element ausgewählt wird.
onstalled	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn der Browser die Mediendaten aus irgendeinem Grund nicht abrufen kann.
onstorage	`<body>`	Skript, das ausgeführt wird, wenn ein Web-Storage-Bereich aktualisiert wird.
onsubmit	`<form>`	Skript, das ausgeführt wird, wenn ein Formular abgesendet wird.
onsuspend	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Abrufen der Mediendaten gestoppt wird, bevor sie vollständig geladen sind.
ontimeupdate	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn sich die Wiedergabeposition geändert hat.
ontoggle	`<details>`	Skript, das ausgeführt wird, wenn das `<details>`-Element geöffnet oder geschlossen wird.
onunload	`<body>`	Skript, das ausgeführt wird, wenn eine Seite entladen wurde.
onvolumechange	`<audio>`, `<video>`	Skript, das jedes Mal ausgeführt wird, wenn die Lautstärke eines Videos oder Audios geändert wird.
onwaiting	`<audio>`, `<video>`	Skript, das ausgeführt wird, wenn das Medium pausiert, aber gleichzeitig erwartet wird, dass es weiterläuft.
onwheel	Alle sichtbaren Elemente.	Skript, das ausgeführt wird, wenn das Mausrad über einem Element nach oben oder unten scrollt.
open	`<details>`	Definiert, dass die Details sichtbar sein sollen.
optimum	`<meter>`	Definiert den optimalen Wert für die Anzeige.
pattern	`<input>`	Definiert einen regulären Ausdruck, gegen den der Wert eines `<input>`-Elements geprüft wird.
placeholder	`<input>`, `<textarea>`	Definiert einen kurzen Hinweistext, der den erwarteten Wert des Elements beschreibt.
poster	`<video>`	Definiert ein Bild, das angezeigt wird, während das Video heruntergeladen wird oder bis der Benutzer auf die Wiedergabe-Schaltfläche klickt.
preload	`<audio>`, `<video>`	Definiert, ob und wie Audio oder Video beim Laden der Seite vorgeladen werden soll.
readonly	`<input>`, `<textarea>`	Definiert, dass das Element schreibgeschützt ist.
rel	`<a>`, `<area>`, `<link>`	Definiert die Beziehung zwischen dem aktuellen und dem verlinkten Dokument.
required	`<input>`, `<textarea>`, `<select>`	Definiert, dass das Element ausgefüllt werden muss, bevor das Formular abgesendet wird.
reversed	`<ol>`	Definiert, dass die Listenreihenfolge absteigend sein soll, z. B. 5, 4, 3 ...
rows	`<textarea>`	Definiert die sichtbare Anzahl von Zeilen in einem Textbereich.
rowspan	`<td>`, `<th>`	Definiert die Anzahl der Zeilen, die eine Tabellenzelle überspannen soll.
sandbox	`<iframe>`	Aktiviert zusätzliche Einschränkungen für den Inhalt innerhalb eines `<iframe>`-Elements.
scope	`<th>`	Definiert, ob eine Kopfzelle eine Kopfzeile für eine Spalte, eine Zeile oder eine Gruppe von Spalten oder Zeilen ist.
selected	`<option>`	Definiert, dass eine Option beim Laden der Seite vorausgewählt sein soll.
shape	`<area>`	Definiert die Form des Bereichs.
size	`<input>`, `<select>`, `<embed>`, `<iframe>`	Definiert die Breite in Zeichen (für `<input>`) oder die Anzahl sichtbarer Optionen (für `<select>`).
sizes	`<link>`, `<img>`, `<source>`	Definiert die Größe der verlinkten Ressource.
span	`<col>`, `<colgroup>`	Definiert die Anzahl der zu überspannenden Spalten.
spellcheck	Global Attributes	Definiert, ob Grammatik und Rechtschreibung des Elements geprüft werden sollen oder nicht.
src	`<img>`, `<source>`, `<audio>`, `<video>`, `<script>`, `<track>`, `<embed>`, `<iframe>`	Definiert die URL der Mediendatei.
srcdoc	`<iframe>`	Definiert den HTML-Inhalt der Seite, die im `<iframe>`-Element angezeigt werden soll.
srclang	`<track>`	Definiert die Sprache der Spurtext-Daten.
srcset	`<img>`, `<source>`	Definiert die URL des Bildes, das in verschiedenen Situationen verwendet werden kann.
start	`<ol>`	Definiert den Startwert einer geordneten Liste.
step	`<input>`	Definiert die zulässigen Zahlenintervalle für ein Eingabefeld.
style	Global Attributes	Definiert einen inline CSS-Stil für ein Element.
tabindex	Global Attributes	Definiert die Tab-Reihenfolge eines Elements.
target	`<a>`, `<area>`, `<base>`, `<form>`	Definiert das Ziel, wo das verlinkte Dokument geöffnet oder das Formular abgesendet werden soll.
title	Global Attributes	Definiert zusätzliche Informationen über ein Element.
translate	Global Attributes	Definiert, ob der Textinhalt des Elements vom Browser oder von Übersetzungswerkzeugen übersetzt werden soll.
type	`<embed>`, `<input>`, `<object>`, `<a>`, `<button>`, `<link>`, `<menu>`, `<object>`, `<script>`, `<source>`, `<style>`	Definiert den Typ des Elements.
usemap	`<object>`, `<img>`	Definiert ein Bild als clientseitige Image-Map.
value	`<button>`, `<input>`, `<li>`, `<option>`, `<meter>`, `<progress>`, `<param>`	Definiert den Wert des Elements.
width	`<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<object>`, `<video>`	Definiert die Breite des Elements.
wrap	`<textarea>`	Definiert, wie der Text in einem Textbereich beim Absenden innerhalb eines Formulars umgebrochen werden soll.

Siehe auch eine Liste der globalen HTML-Attribute, die mit jedem HTML-Element verwendet werden können.

Übungen

Übung

Welche der folgenden Aussagen über HTML-Attribute sind wahr?

HTML-Attribute kommen immer als Name/Wert-Paar: name="value".HTML-Attribute werden verwendet, um zusätzliche Informationen über HTML-Elemente hinzuzufügen.HTML-Attribute werden immer im öffnenden Tag von HTML-Elementen eingefügt.HTML-Attribute können zu jedem HTML-Element hinzugefügt werden.HTML-Attribute sind für alle HTML-Elemente obligatorisch.

Übung

Wie deaktiviert man ein Eingabefeld mit einem boolean-Attribut?

Das disabled-Attribut hinzufügen; seine bloße Anwesenheit deaktiviert das Eingabefeld.disabled auf false setzen, um das Eingabefeld zu deaktivieren.Boolean-Attribute müssen immer als name=name geschrieben werden, um zu funktionieren.Das disabled-Attribut entfernen, um das Eingabefeld zu deaktivieren.

Syntax

Das href-Attribut

Beispiel des HTML-Tags <a> mit dem href-Attribut:

Ergebnis

Das id-Attribut

Beispiel des HTML-Tags <div> mit dem id-Attribut:

Das style-Attribut

Beispiel des HTML-Tags <p> mit dem style-Attribut:

Das start-Attribut

Beispiel des HTML-Tags <ol> mit dem start-Attribut:

Mehrere Attribute

Beispiel des HTML-Tags <img> mit den Attributen src, width, height und alt:

Boolean-Attribute

Beispiel für boolean-Attribute:

Anführungszeichen bei Attributwerten

Content-Attribute und IDL-Attribute

Liste der am häufigsten verwendeten HTML-Attribute:

Vollständige Liste der HTML-Attribute:

Übungen

Beispiel des HTML-Tags `<a>` mit dem href-Attribut:

Beispiel des HTML-Tags `<div>` mit dem id-Attribut:

Beispiel des HTML-Tags `<p>` mit dem style-Attribut:

Beispiel des HTML-Tags `<ol>` mit dem start-Attribut:

Beispiel des HTML-Tags `<img>` mit den Attributen src, width, height und alt: