Both sides previous revisionPrevious revisionNext revision | Previous revision |
projekte:dokuwiki:ad-doc-html [2024/10/02 10:09] – [HTML-Elemente] sascha | projekte:dokuwiki:ad-doc-html [2024/10/05 16:08] (current) – [HTML-Elemente] admin |
---|
Aber zum Beispiel auch der Block hier oben rechts ist mittels ''%%<aside>%%''- und ''%%<figure>%%''-Tags ausgezeichnet, was ohne Zugriff auf diese Elemente im besten Fall nicht mehr //semantisch korrekt,// im schlimmsten überhaupt nicht ausführbar wäre. | Aber zum Beispiel auch der Block hier oben rechts ist mittels ''%%<aside>%%''- und ''%%<figure>%%''-Tags ausgezeichnet, was ohne Zugriff auf diese Elemente im besten Fall nicht mehr //semantisch korrekt,// im schlimmsten überhaupt nicht ausführbar wäre. |
| |
| <div help> |
===== Installation ===== | ===== Installation ===== |
| |
Dann zurück zu „Erweiterungn verwalten“: Unter „Manuell installieren“ entweder den Link in das Feld „Von Webadresse (URL) installieren“ einfügen, oder unter „Erweiterung hochladen“ die zuvor heruntergeladene ZIP-Datei auswählen. | Dann zurück zu „Erweiterungn verwalten“: Unter „Manuell installieren“ entweder den Link in das Feld „Von Webadresse (URL) installieren“ einfügen, oder unter „Erweiterung hochladen“ die zuvor heruntergeladene ZIP-Datei auswählen. |
| |
<aside important> | |
**Wichtig:** Falls das Plugin bereits installiert war, unbedingt das Auswahlfeld „Existierende Dateien überschreiben“ aktivieren, da ansonsten das Update nicht funktioniert! | **Wichtig:** Falls das Plugin bereits installiert war, unbedingt das Auswahlfeld „Existierende Dateien überschreiben“ aktivieren, da ansonsten das Update nicht funktioniert! |
</aside> | |
| |
Ein Klick auf „Installieren“ installiert das Plugin. | Ein Klick auf „Installieren“ installiert das Plugin. |
| </div> |
===== Funktionen ===== | ===== Funktionen ===== |
==== Beispiel ==== | ==== Beispiel ==== |
Die folgenden HTML-Elemente werden von diesem Plugin unterstützt: | Die folgenden HTML-Elemente werden von diesem Plugin unterstützt: |
| |
* ''%%<a>%%'' — “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a|Anchor/Link]]” | * ''%%<a>%%'' — “[[mdn>docs/Web/HTML/Element/a|Anchor/Link]]” |
* ''%%<abbr>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr|Abbreviation]]”%%*%% | * ''%%<abbr>%%'' – “[[mdn>docs/Web/HTML/Element/abbr|Abbreviation]]”%%*%% |
* ''%%<address>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address|Address]]” | * ''%%<address>%%'' – “[[mdn>docs/Web/HTML/Element/address|Address]]” |
* ''%%<article>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article|Article]]” | * ''%%<article>%%'' – “[[mdn>docs/Web/HTML/Element/article|Article]]” |
* ''%%<aside>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside|Aside]]”%%*%% | * ''%%<aside>%%'' – “[[mdn>docs/Web/HTML/Element/aside|Aside]]”%%*%% |
* ''%%<b>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b|Bring Attention To]]”%%*%% (“bold”) | * ''%%<b>%%'' – “[[mdn>docs/Web/HTML/Element/b|Bring Attention To]]”%%*%% (“bold”) |
* ''%%<bdi>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi|Bidirectional isolate]]” | * ''%%<bdi>%%'' – “[[mdn>docs/Web/HTML/Element/bdi|Bidirectional isolate]]” |
* ''%%<bdo>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo|Bidirectional override]]” | * ''%%<bdo>%%'' – “[[mdn>docs/Web/HTML/Element/bdo|Bidirectional override]]” |
* ''%%<cite>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite|Citation]]” | * ''%%<cite>%%'' – “[[mdn>docs/Web/HTML/Element/cite|Citation]]” |
* ''%%<details>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details|Details]]” \\ + ''%%<summary>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary|Summary]]” | * ''%%<details>%%'' – “[[mdn>docs/Web/HTML/Element/details|Details]]” \\ + ''%%<summary>%%'' – “[[mdn>docs/Web/HTML/Element/summary|Summary]]” |
* ''%%<dfn>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn|Definition]]” | * ''%%<dfn>%%'' – “[[mdn>docs/Web/HTML/Element/dfn|Definition]]” |
* ''%%<div>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div|Generic block]]” | * ''%%<div>%%'' – “[[mdn>docs/Web/HTML/Element/div|Generic block]]” |
* ''%%<dl>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl|Description list]]” \\ + ''%%<dt>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt|Description term]]” \\ + ''%%<dd>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn|Description details]]” | * ''%%<dl>%%'' – “[[mdn>docs/Web/HTML/Element/dl|Description list]]” \\ + ''%%<dt>%%'' – “[[mdn>docs/Web/HTML/Element/dt|Description term]]” \\ + ''%%<dd>%%'' – “[[mdn>docs/Web/HTML/Element/dfn|Description details]]” |
* ''%%<em>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em|Emphasis]]” | * ''%%<em>%%'' – “[[mdn>docs/Web/HTML/Element/em|Emphasis]]” |
* ''%%<figure>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure|Figure]]”%%*%% \\ + ''%%<figcaption>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption|Figure caption]]”%%*%% | * ''%%<figure>%%'' – “[[mdn>docs/Web/HTML/Element/figure|Figure]]”%%*%% \\ + ''%%<figcaption>%%'' – “[[mdn>docs/Web/HTML/Element/figcaption|Figure caption]]”%%*%% |
* ''%%<header>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header|Header]]” | * ''%%<header>%%'' – “[[mdn>docs/Web/HTML/Element/header|Header]]” |
* ''%%<h1>%%'' … ''%%<h6>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements|Section Headings]]” | * ''%%<h1>%%'' … ''%%<h6>%%'' – “[[mdn>docs/Web/HTML/Element/Heading_Elements|Section Headings]]” |
* ''%%<footer>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer|Footer]]” | * ''%%<footer>%%'' – “[[mdn>docs/Web/HTML/Element/footer|Footer]]” |
* ''%%<i>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i|Idiomatic Text]]”%%*%% (“italic”) | * ''%%<i>%%'' – “[[mdn>docs/Web/HTML/Element/i|Idiomatic Text]]”%%*%% (“italic”) |
* ''%%<kbd>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd|Keyboard Input]]” | * ''%%<kbd>%%'' – “[[mdn>docs/Web/HTML/Element/kbd|Keyboard Input]]” |
* ''%%<mark>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark|Mark Text]]”%%*%% | * ''%%<mark>%%'' – “[[mdn>docs/Web/HTML/Element/mark|Mark Text]]”%%*%% |
* ''%%<pre>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre|Preformatted]]” | * ''%%<pre>%%'' – “[[mdn>docs/Web/HTML/Element/pre|Preformatted]]” |
* ''%%<q>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q|Inline Quotation]]”%%*%% | * ''%%<q>%%'' – “[[mdn>docs/Web/HTML/Element/q|Inline Quotation]]”%%*%% |
* ''%%<s>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s|Strikethrough]]”* | * ''%%<s>%%'' – “[[mdn>docs/Web/HTML/Element/s|Strikethrough]]”* |
* ''%%<samp>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp|Sample Output]]” | * ''%%<samp>%%'' – “[[mdn>docs/Web/HTML/Element/samp|Sample Output]]” |
* ''%%<section>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section|Section]]”%%*%% | * ''%%<section>%%'' – “[[mdn>docs/Web/HTML/Element/section|Section]]”%%*%% |
* ''%%<small>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small|Side content]]” (“smaller”) | * ''%%<small>%%'' – “[[mdn>docs/Web/HTML/Element/small|Side content]]” (“smaller”) |
* ''%%<span>%%'' — “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span|Content Span]]” | * ''%%<span>%%'' — “[[mdn>docs/Web/HTML/Element/span|Content Span]]” |
* ''%%<strong>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong|Strong importance]]” | * ''%%<strong>%%'' – “[[mdn>docs/Web/HTML/Element/strong|Strong importance]]” |
* ''%%<time>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time|Date/Time]]” | * ''%%<time>%%'' – “[[mdn>docs/Web/HTML/Element/time|Date/Time]]” |
* ''%%<u>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u|Unarticulated Annotation]]”%%*%% (“underline”) | * ''%%<u>%%'' – “[[mdn>docs/Web/HTML/Element/u|Unarticulated Annotation]]”%%*%% (“underline”) |
* ''%%<var>%%'' – “[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var|Variable]]” | * ''%%<var>%%'' – “[[mdn>docs/Web/HTML/Element/var|Variable]]” |
| |
Die Links hinter jedem Element gehen zu den entsprechenden <abbr "Mozilla Developer Network">MDN</abbr>-Seiten, wo die jeweiligen Elemente genauer beschrieben werden, einschließlich Anwendungsbeispiele. Leider sind diese nur auf Englisch verfügbar. | Die Links hinter jedem Element gehen zu den entsprechenden <abbr "Mozilla Developer Network">MDN</abbr>-Seiten, wo die jeweiligen Elemente genauer beschrieben werden, einschließlich Anwendungsbeispiele. Leider sind diese nur auf Englisch verfügbar. |
</aside> | </aside> |
| |
===== Attribute ===== | ==== Attribute ==== |
| |
| //Ad-Hoc// HTML benutzt eine eigene Syntax für die Elementattribute, die vor allem darauf ausgelegt ist, einfache Funktionen möglichst schnell und einfach zu machen und gleichzeitig mögliche Sicherheitsprobleme mit anderen Attributen (insbesondere den JavaScript-Attributen) zu vermeiden. |
| |
| Grundsätzlich können Attribute keine Leerzeichen enthalten (für Ausnahmen, siehe unten), da dieses Zeichen als Trennung zwischen Attributen verwendet wird. |
| |
| === Klassennamen === |
| |
| Jeder Bezeichner in einem Element, der einen gültigen Klassennamen darstellt, wird als HTML-Klasse verstanden. |
| |
| Zum Beispiel wird „''<span red>%%<b wichtig>%%</span>''“ wie folgt in HTML umgesetzt: „''<span blue>%%<b class="wichtig">%%</span>''“. |
| |
| Es können beliebig viele Klassennamen verwendet werden. „''<span red>%%<aside outline box float-right>%%</span>''“ wird erwartungsgemäß zu „''<span blue>%%<aside class="outline box float-right">%%</span>''“ |
| |
| <aside info> |
| **Hinweis:** Dieses Plugin enthält keinen CSS-Code, der die //Darstellung// solcher Klassen beschreibt. Diese müssen entweder in den [[doku>devel:css#plugins_styles|Benutzer-Stylesheets]] definiert werden, oder von einem anderen Plugin kommen (z.B. von [[projekte:dokuwiki:ad-doc-wrap|Ad-Hoc Wrap]]). |
| </aside> |
| |
| === IDs === |
| |
| Für ID-Attribute wird die CSS-Syntax verwendet, d.h. der ID-Name wird durch ein vorangestelltes „''#''” gekennzeichnet. |
| |
| Aus „''<span red>%%<div #text-header>%%</span>''“ wird im Seitenquelltext: „''<span blue>%%<div id="text-header">%%</span>''“. |
| |
| Auch hier gilt, dass die ID-Bezeichner gültig sein müssen. Hierfür wird ein (recht einfacher) Check durchgeführt und wenn die ID nicht gültig ist, wird das Attribut nicht erzeugt. |
| |
| <aside info> |
| **Hinweis:** HTML IDs müssen auch auf jeder Seite einmalig sein. Dies kann von Plugin allerdings nicht überprüft werden, sodass es dem Benutzer überlassen bleibt, hierfür zu sorgen. |
| </aside> |
| |
| === Sprache === |
| |
| Das „''%%lang%%''“-Attribut dient dazu, einen Teil der Seite (z.B. ein Wort oder eine Phrase) zu markieren, welche in einer anderen Sprache vorliegt, als der umgebende Text. In der Syntax für dieses Plugin wird der Doppelpunkt („'':''“) gebraucht, um Sprachattribute zu kennzeichnen. |
| |
| Zum Beispiel ist auf dieser Seite der Ausdruck „<i :la>ad hoc</i>“ lateinisch und daher wie folgt ausgezeichnet: „''<span red>%%<i :la>%%</span>ad hoc<span red>%%</i>%%</span>''“. Im Seitenquellcode wird daraus: „''<span blue>%%<i lang="la">%%</span>ad hoc<span blue>%%</i>%%</span>''“ |
| |
| Auch für die Sprachkennzeichner gibt es eine Plausibilitätsprüfung. Diese ist aber flexibel genug, um praktisch alle üblichen (und die meisten unüblichen!) [[https://www.rfc-editor.org/info/bcp47|BCP-47]] Codes abzudecken, einschließlich Regionalsprachen, Dialekte, Transliterationen und vieles weitere. |
| |
| Für Sprachen, die üblicherweise von //links nach rechts// geschrieben werden (z.B. Arabisch oder Hebräisch) wird außerdem das „''dir''“-Attribut mit dem Wert „''ltr''“ (vom Englischen „<i :en>left-to-right</i>“) gesetzt. Dies gilt nicht, wenn die Sprache z.B. in Lateinischer Transkription geschrieben wird (siehe unten), das kann aber nicht alle Fälle abgecken, in denen die Textrichtung anders ist als erwartet (z.B. können bestimmte //kurdische// Dialekte sowohl von rechts nach links, als auch in umgekehrter Richtung geschrieben werden). |
| |
| In diesen Fällen ist es möglich, das //erweiterte Attribut// „''%%[dir="…"]%%''“ (siehe unten) zu benutzen, um die Textrichtung unabhängig vom Sprachattribut festzulegen. Eine solche Festlegung überschreibt immer die Textrichtung der Sprache. |
| |
| Einige Beispiele mit Sprachkennzeichnern für häufig gebrauchte Situationen sind in der folgenden Tabelle aufgeführt: |
| |
| <figure outline> |
| ^ Code ^ Sprache ^ Beispiel ^ Beispiel (Transkription) ^ Schreibrichtung ^ |
| ^ '':fr'' | Französisch | ''<span red>%%<i :fr>%%</span>Le Monde<span red>%%</i>%%</span>'' | | <abbr :en "left to right">LTR</abbr> | |
| ^ '':en'' | Englisch | ''<span red>%%<i :en>%%</span>Fallacies Online<span red>%%</i>%%</span>'' | | <abbr :en "left to right">LTR</abbr> | |
| ^ '':la'' | Lateinisch | ''<span red>%%<i :la>%%</span>Advocatus diaboli<span red>%%</i>%%</span>'' | | <abbr :en "left to right">LTR</abbr> | |
| ^ '':ja'' | Japanisch | ''<span red>%%<span :ja>%%</span>無<span red>%%</span>%%</span>'' | ''<span red>%%<i :ja-Latn>%%</span>Mu<span red>%%</i>%%</span>'' | <abbr :en "left to right">LTR</abbr> | |
| ^ '':grc'' | Altgriechisch | ''<span red>%%<span :grc>%%</span>Μετά<span red>%%</span>%%</span>'' | ''<span red>%%<i :grc-Latn>%%</span>metá<span red>%%</i>%%</span>'' | <abbr :en "left to right">LTR</abbr> | |
| ^ '':he'' | Hebräisch | ''<span red>%%<bdo :he>%%</span><bdo :he [style=font-size:110%]>עברית</bdo><span red>%%</bdo>%%</span>'' | ''<span red>%%<i :he-Latn>%%</span>ʿIvrit<span red>%%</i>%%</span>'' | <abbr :en "right to left">RTL</abbr> | |
| <figcaption>Auswahl an Sprachcodes</figcaption> |
| </figure> |
| |
| <aside info> |
| **Hinweis:** DokuWiki setzt im HTML-Wurzelelement automatisch das „''lang''“-Attribut, das dann für die gesamte Seite gilt. Vom Benutzer müssen nur die Bereiche explizit ausgezeichnet werden, welche eine andere Sprache enthalten als die allgemeine Seitensprache. |
| </aside> |
| <aside info> |
| **Hinweis 2:** Fügt man fremdsprachigen Text im lateinischen Alphabet (z.B. Französisch, Englisch, Latein, u.s.w.) in ein deutschsprachiges Dokument ein, ist es gute Praxis, dies durch //Kursivschrift// hervorzuheben. In den meisten Fällen ist hierbei der „''<span red>%%<i>%%</span>''“-Tag wohl die beste Wahl. \\ Dies gilt jedoch nicht für nicht-Lateinischen Text (z.B. Griechisch, Kyrillisch, Japanisch, u.s.w). Hier ist es besser, bei normalem, nicht-kursivem Text zu bleiben, z.B. mit einem „''<span red>%%<span …>%%</span>''“-Element. |
| </aside> |
| <aside info> |
| **Hinweis 3:** Obwohl DokuWiki //im Prinzip// von rechts nach links geschriebene Sprachen unterstützt, ist die Unterstützung durch Plugins und Templates nicht immer sehr gut. Dazu kommt, dass das Mischen von Sprachrichtungen im selben Text immer wieder zu Problemen führt, die dann schwer zu beheben sein können. Hier nur ein paar Tipps: |
| * Das [[de:projects:dokuwiki:ad-hominem-template|Ad-Hominem Template]] und das [[projekte:dokuwiki:ad-doc-wrap|Ad-Hoc Wrap]] Plugin (und dieses hier natürlich) haben gute <abbr :en "Right-to-Left">RTL</abbr>-Unterstützung implementiert. |
| * Es empfiehlt sich, Phrasen mit geänderter Schriftrichtung durch „''<span red>%%<bdo>%%</span>''“-Tags zu isolieren. Dies muss in den Einstellungen zuerst aktiviert werden. |
| * In vielen Fällen passen die Größenverhältnisse der anderen Schriftsysteme nicht sehr gut zum umgebenden Text. In diesen Fall kann es sinnvoll sein, auch die Textgröße etwas anzupassen. Im Beispiel oben sieht das wie folgt aus: „''<span red>%%<bdi :he [style=font-size:110%]>%%</span>''“. Mehr hierzu unter „erweiterte Attribute“ unten. |
| </aside> |
| |
| === Titel-Text === |
| |
| Das „''<span red>title</span>''“-Attribut erlaubt es, einen Text anzugeben, der als sog. „<i :en>Tool-tipp</i>“ angezeigt wird, wenn der Besucher den Mauszeiger über einem Element für einen Moment still hält. Dieser Text ist auch für Screenreader wichtig, da er zusätzlich oder anstelle des Elementtextes vorgelesen werden kann. |
| |
| Mit Ad-Hoc HTML wird jeder Text, der in doppelten Anführungsstrichen steht, als „''<span red>title</span>''“-Attribut umgesetzt. Zum Beispiel: „''<span red>%%<abbr "Drei-Buchstaben Abkürzung">%%</span>DBA<span red>%%</abbr>%%</span>''“ wird zu „''<span blue>%%<abbr title="Drei-Buchstaben Abkürzung">%%</span>DBA<span blue>%%</abbr>%%</span>''“. |
| |
| Dies ist das einzige Attribut, welches auch //Leerzeichen// unterstützt. Alles was in den Anführungsstrichen steht, wird direkt in den Seiten-Quelltext übernommen. |
| |
| <aside info> |
| **Hinweis:** Die Sprache des „''<span red>title</span>''“-Attributes ist dieselbe, die für den Inhalt des Elementes angegeben wird (siehe oben). Soll der Titel also in einer anderen Sprache sein, müssen zwei verschachtelte Elemente verwendet werden. Zum Beispiel: \\ ''<span red>%%<i "Lat: Anwalt des Teufels">%%</span><span purple>%%<i :la>%%</span>Advocatus diaboli<span purple>%%</i>%%</span><span red>%%</span>%%</span>'' |
| </aside> |
| |
| === Erweiterte Attribute === |
| |
| Alle anderen Attribute müssen mit der „erweiterten“-Syntax eingefügt werden. Diese besteht darin, Attributnamen und -wert, durch ein Gleichheitszeichen getrennt in eckige Klammern zu setzen. Anders als bei HTML-Attributen wird der Wert (auf der rechten Seite) ohne Anführungszeichen angegeben und kann auch keine Leerzeichen enthalten. Zum Beispiel: „''<span red>%%<time [datetime=2024-01-01]>%%</span>Neujahr<span red>%%</time>%%</span>''“ |
| |
| In einigen Fällen sind auch „leere“ Attribute erlaubt, also solche ohne Wert. Zum Beispiel: „''<span red>%%<span [hidden]>%%</span>''…“ |
| |
| Die erlaubten Attribute sind stark eingeschränkt und wo möglich werden die Werte auch einer Plausibilitätsprüfung unterzogen, sodass in vielen Fällen ausdrücklich nur erlaubte (laut Spezifikation) Attributwerte umgesetzt werden. |
| |
| == Allgemeine Attribute == |
| |
| Die folgenden Attribute sind für //alle// Elemente erlaubt: |
| * „''<span red>%%[dir=%%</span>…<span red>%%]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir|Direction]]) – dient dazu, die Textrichtung zu spezifizieren. Dieses Attribut überschreibt eine eventuell vom „'':lang''“-Attribut implizierte Textrichtung. Erlaubte Werte sind: ''rtl'' (right-to-left), ''ltr'' (left-to-right), sowie ''auto''. |
| |
| * „''<span red>%%[hidden]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden|Hidden]]) – Kennzeichnet ein Element als „vorübergehend versteckt“. Ein solches Element wird vom Browser nicht angezeigt. Dieses Attribut kann entweder leer (ohne Wert) benutzt werden, oder die Werte ''hidden'' bzw. ''until-found'' haben. Alle anderen Werte werden verworfen. |
| |
| * „''<span red>%%[tabindex=%%</span>…<span red>%%]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex|Tab Index]]) – Beschreibt das Verhalten des Elementes wenn der Benutzer mittels der Tab-Taste auf der Seite navigiert. Es wird empfohlen, nur die Werte „''0''“ (Standardverhalten) oder „''-1''“ (kein Tab-Ziel) zu verwenden, aber jeder Ganzzahlwert ist zulässig. |
| |
| * „''<span red>%%[is=%%</span>…<span red>%%]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is|Custom element]]) Erlaubt es, eine benutzerdefinierte Elementdefinition zuzuweisen. Mehr zu diesem Thema unter: [[https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements|Using custom elements]]. |
| |
| * „''<span red>%%[style=%%</span>…<span red>%%]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style|Inline Style]]) Erlaubt es <i :en>inline</i>-CSS einzufügen. Dieses Attribut muss zuerst in den Einstellungen aktiviert werden. Es wird vor allem dadurch eingeschränkt, dass keine Leerzeichen erlaubt sind. Das folgende Beispiel funktioniert jedoch: „''<span red>%%[style=color:red;text-decoration:underline]%%</span>''“. |
| |
| * „''<span red>%%[data-%%</span>*<span red>%%=%%</span>…<span red>%%]%%</span>''“ ([[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*|Custom data]]) Jedes Attribut, das mit „''data-''“ anfängt, dient der Datenspeicherung und wird unterstützt. |
| |
| * „''<span red>%%[itemscope]%%</span>''“, „''<span red>%%[itemid=%%</span>…<span red>%%]%%</span>''“, „''<span red>%%[itemprop=%%</span>…<span red>%%]%%</span>''“, „''<span red>%%[itemref=%%</span>…<span red>%%]%%</span>''“ und „''<span red>%%[itemtype=%%</span>…<span red>%%]%%</span>''“ – Mit diesen Attributen können [[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope|Mikroformate]] in den HTML-Code eingefügt werden. |
| |
| Darüber hinaus gibt es Attribute, die nur in bestimmten Elementen erlaubt sind: |
| |
| * „''<span red>%%[open]%%</span>''“ – Leeres Attribut, das nur in ''<span red>%%<details>%%</span>''-Elementen erlaubt ist. Wenn angegeben, wird das Element als geöffnet angezeigt. |
| |
| * „''<span red>%%[datetime=%%</span>…<span red>%%]%%</span>''“ – Nur gültig für ''<span red>%%<details>%%</span>''-Elemente; kann eine beliebige [[wpde>ISO 8601]]-Datums- oder Zeitangabe enhalten. |
| |
| * „''<span red>%%[href=%%</span>…<span red>%%]%%</span>''“, „''<span red>%%[hreflang=%%</span>…<span red>%%]%%</span>''“, „''<span red>%%[target=%%</span>…<span red>%%]%%</span>''“ and „''<span red>%%[rel=%%</span>…<span red>%%]%%</span>''“ sind nur gültig in ''<span red>%%<a>%%</span>''-Elementen (Links). \\ **Hinweis:** ''javascript:''-URLs sind aus sicherheitsgründen nicht erlaubt. Diese können jedoch in den Einstellungen aktiviert werden. |
| |