Attribute Flashcards
accesskey
eine Tastenkombination zum schnellen Zugriff auf ein Element.
Beispiel:<button accesskey="S">Speichern</button>
autocomplete
Gibt an, ob ein Formular automatisch ausgefüllt werden soll.
Beispiel: <input type="text" name="name" autocomplete="on">
autofocus
Legt fest, ob ein Element automatisch den Fokus erhält, wenn die Seite geladen wird.
Beispiel: <input type="text" name="name" autofocus>
charset
Definiert den Zeichensatz der Seite.
Beispiel: <meta charset="UTF-8">
class
Fügt dem Element eine oder mehrere Klassen hinzu, die zur Formatierung oder zur Selektion in JavaScript verwendet werden können.
Beispiel: <div class="container">...</div>
contenteditable
Legt fest, ob ein Element bearbeitet werden kann.
Beispiel: <div contenteditable>...</div>
data-*
Ermöglicht die Speicherung von benutzerdefinierten Daten im Element.
Beispiel: <div data-info="some info">...</div>
draggable
Legt fest, ob ein Element gezogen und abgelegt werden kann.
Beispiel: <img src="image.png" draggable="true">
hidden
Verbirgt ein Element.
Beispiel: <div hidden>...</div>
hreflang
Definiert die Sprache des verlinkten Dokuments.
Beispiel: <a href="https://www.example.com" hreflang="en">Example</a>
id
Identifiziert das Element eindeutig.
Beispiel: <div id="container">...</div>
lang
Definiert die Sprache des Elements.
Beispiel: <p lang="de">...</p>
role
Definiert die Rolle des Elements, z.B. als Navigationselement oder als Schaltfläche.
Beispiel: <div role="navigation">...</div>
srcset
Definiert eine Liste von Bildern für unterschiedliche Anzeigegeräte.
Beispiel: <img srcset="image-1x.png 1x, image-2x.png 2x">
style
Definiert Inline-Styles für das Element.
Beispiel: <div style="background-color: #f2f2f2;">...</div>
tabindex
Definiert die Reihenfolge der Fokussierung von Elementen.
Beispiel:<input type="text" name="name" tabindex="1">
title
Definiert den Titel des Elements.
Beispiel: <img src="image.png" title="some title">
translate
Legt fest, ob der Inhalt des Elements übersetzt werden soll.
Beispiel: <div translate="no">...</div>
alt
Beschreibt ein Bild für Screenreader und für den Fall, dass das Bild nicht angezeigt werden kann.
Beispiel:<img src="image.png" alt="Beschreibung des Bildes">
aria-*
Definiert ARIA-Eigenschaften (Accessible Rich Internet Applications) für barrierefreie Anwendungen.
Beispiel: <button aria-label="Schließen">X</button>
async
Lädt ein Skript asynchron, ohne den Seitenaufbau zu blockieren.
Beispiel:<script src="script.js" async></script>async
crossorigin
Legt fest, wie Skripte von anderen Domains geladen werden sollen.
Beispiel: <script src="https://example.com/script.js" crossorigin="anonymous"></script>
defer
Lädt ein Skript verzögert, ohne den Seitenaufbau zu blockieren.
Beispiel: <script src="script.js" defer></script>
download
Gibt an, dass der Link zum Herunterladen eines Dokuments oder Bildes dient.
Beispiel: <a href="file.pdf" download>PDF herunterladen</a>
loading
Definiert, wann ein Bild oder ein Skript geladen werden soll.
Beispiel: <img src="image.png" loading="lazy">
media
Definiert Bedingungen für das Anwenden von CSS-Regeln.
Beispiel:<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">
rel
Definiert die Beziehung zwischen der aktuellen Seite und der verlinkten Seite.
Beispiel: <a href="https://example.com" rel="noopener">Example</a>
target
Gibt an, wo das verlinkte Dokument geöffnet werden soll.
Beispiel: <a href="https://example.com" target="_blank">Example</a>
type
Definiert den Typ des Eingabefelds.
Beispiel: <input type="text">
value
Definiert den Wert des Eingabefelds.
Beispiel: <input type="text" value="Standardwert">
spellcheck
Legt fest, ob ein Eingabefeld automatisch auf Rechtschreib- und Grammatikfehler überprüft werden soll.
Beispiel: <input type="text" spellcheck="true">
autocomplete
Gibt an, ob ein Eingabefeld automatisch Vorschläge für vorherige Eingaben anzeigt.
Beispiel:<input type="text" autocomplete="on">
placeholder
Zeigt einen Platzhaltertext im Eingabefeld an.
Beispiel: <input type="text" placeholder="Geben Sie hier Ihren Text ein">
contenteditable
Erlaubt das Bearbeiten des Inhalts eines Elements durch den Benutzer.
Beispiel: <div contenteditable="true">Bearbeitbarer Text</div>
tabindex
Legt die Reihenfolge fest, in der ein Element mit der Tab-Taste durchlaufen werden kann.
Beispiel: <input type="text" tabindex="1">
datetime
Gibt ein Datum und eine Uhrzeit an.
Beispiel: <time datetime="2023-05-14T12:30">14. Mai 2023 um 12:30 Uhr</time>
sizes
Definiert die Breite des Elements für unterschiedliche Bildschirmauflösungen.
Beispiel: <img src="image.jpg" sizes="(min-width: 768px) 50vw, 100vw">
controls
Fügt Steuerelemente zu einem Audio- oder Video-Element hinzu.
Beispiel: <video src="video.mp4" controls></video>
loop
Wiederholt ein Audio- oder Video-Element endlos.
Beispiel: <video src="video.mp4" loop></video>
muted
Stummschaltung eines Audio- oder Video-Elements.
Beispiel: <video src="video.mp4" muted></video>
poster
Gibt das Bild an, das vor dem Laden des Videos angezeigt werden soll.
Beispiel:<video src="video.mp4" poster="poster.jpg"></video>
required
Legt fest, dass ein Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet werden kann.
Beispiel: <input type="text" required>
form
Legt das Formular fest, zu dem das Element gehört.
Beispiel: <input type="text" form="form1">
min/max
Legt den minimalen und maximalen Wert für ein Eingabefeld fest.
Beispiel: <input type="number" min="1" max="100">
step
Legt den Schritt für ein Eingabefeld mit numerischem Wert fest.
Beispiel:<input type="number" step="0.5">
disabled
Deaktiviert ein Eingabefeld oder ein Button-Element.
Beispiel: <input type="text" disabled>
http-equiv
Gibt an, dass der Server bestimmte HTTP-Header an den Browser senden soll.
Beispiel: <meta http-equiv="refresh" content="5;url=https://example.com">
itemprop
Definiert die Eigenschaft eines Elements in der Microdata-Syntax.
Beispiel: <div itemscope itemtype="http://schema.org/Person"><span itemprop="name">Max Mustermann</span></div>
autocapitalize
Definiert, ob der Text im Eingabefeld automatisch groß- oder kleingeschrieben wird.
Beispiel: <input type="text" autocapitalize="sentences">
autocorrect
Legt fest, ob die Autokorrektur für das Eingabefeld aktiviert ist.
Beispiel:<input type="text" autocorrect="on">
dir
Legt die Schreibrichtung des Texts fest.
Beispiel: <p dir="rtl">Rechts-nach-links-Text</p>
manifest
Verweist auf eine Datei, die die Offline-Funktionalität der Seite definiert.
Beispiel: <html manifest="offline.appcache">
list
Definiert eine Optionenliste, die mit einem Eingabefeld verknüpft ist.
Beispiel: <input type="text" list="options"><datalist id="options"><option value="Option 1"><option value="Option 2"><option value="Option 3"></datalist>
pattern
Definiert ein reguläres Ausdrucksmuster, das für die Validierung von Eingabefeldern verwendet wird.
Beispiel: <input type="text" pattern="[A-Za-z]{3}" title="Drei Buchstaben" required>
href
wird verwendet um Links zu anderen Webseiten oder Dokumenten zu erstellen.
Beispiel:<a href="https://www.example.com">Besuchen Sie Example.com</a>
