Sind benutzerdefinierte Elemente in HTML5 gültig?

Ich konnte keine endgültige Antwort darauf finden, ob benutzerdefinierte Tags in HTML5 gültig sind, wie folgt:

<greeting>Hello!</greeting>

Ich habe auf die eine oder andere Weise nichts in der Spezifikation gefunden:

http://dev.w3.org/html5/spec/single-page.html

Und benutzerdefinierte Tags scheinen nicht mit dem W3C-Validator zu validieren.

Die Spezifikation für benutzerdefinierte Elemente ist in Chrome und Opera verfügbar und wird in anderen Browsern verfügbar . Es bietet die Möglichkeit, benutzerdefinierte Elemente auf formale Weise zu registrieren.

Benutzerdefinierte Elemente sind neue Arten von DOM-Elementen, die von Autoren definiert werden können. Im Gegensatz zu Dekoratoren , die zustandslos und kurzlebig sind, können benutzerdefinierte Elemente den Status kapseln und Skriptschnittstellen bereitstellen.

Benutzerdefinierte Elemente sind ein Teil einer größeren W3 - Spezifikation namens Web Components , zusammen mit Vorlagen, HTML Importen und Schatten DOM.

Mithilfe von Webkomponenten können Autoren von Webanwendungen Widgets mit einem Grad an visuellem Reichtum und Interaktivität definieren, der mit CSS allein nicht möglich ist, und eine einfache Komposition und Wiederverwendung ist mit Skriptbibliotheken heutzutage nicht möglich.

Aus diesem hervorragenden Artikel über Google-Entwickler zu benutzerdefinierten Elementen v1 geht jedoch Folgendes hervor:

Der Name eines benutzerdefinierten Elements muss einen Bindestrich ( -) enthalten. Also <x-tags>, <my-element>und <my-awesome-app>sind alle gültigen Namen, während <tabs>und <foo_bar>nicht. Diese Anforderung dient dazu, dass der HTML-Parser benutzerdefinierte Elemente von regulären Elementen unterscheiden kann. Es stellt auch die Vorwärtskompatibilität sicher, wenn neue Tags zu HTML hinzugefügt werden.

Einige Ressourcen

• Beispiel-Webkomponenten finden Sie unter https://WebComponents.org
• WebComponents.js dient als Polyfüllung für Webkomponenten, bis sie überall unterstützt werden. Siehe auch die Github-Seite von WebComponents.js und die Support-Tabelle für Webbrowser .

Es ist möglich und erlaubt:

Benutzeragenten müssen Elemente und Attribute behandeln, die sie nicht als semantisch neutral verstehen. Belassen Sie sie im DOM (für DOM-Prozessoren) und gestalten Sie sie gemäß CSS (für CSS-Prozessoren), ohne daraus eine Bedeutung abzuleiten.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Wenn Sie jedoch Interaktivität hinzufügen möchten, müssen Sie Ihr Dokument ungültig (aber immer noch voll funktionsfähig) machen, um die IE 7 und 8 aufzunehmen.

Siehe http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mein Blog)

NB Die folgende Antwort war richtig, als sie 2012 geschrieben wurde. Seitdem haben sich die Dinge ein wenig weiterentwickelt. Die HTML-Spezifikation definiert jetzt zwei Arten von benutzerdefinierten Elementen - "autonome benutzerdefinierte Elemente" und "benutzerdefinierte integrierte Elemente". Ersteres kann überall dort eingesetzt werden, wo Phrasierungsinhalte erwartet werden. Dies sind die meisten Stellen innerhalb des Körpers, jedoch nicht z. B. Kinder von ul- oder ol-Elementen oder in anderen Tabellenelementen als td-, th- oder caption-Elementen. Letztere können überall hingehen, wo das Element, das sie erweitern, hingehen kann.

Dies ist tatsächlich eine Folge der Akkumulation des Inhaltsmodells der Elemente.

Beispielsweise muss das Stammelement ein htmlElement sein.

Das htmlElement darf nur ein Kopfelement gefolgt von einem Körperelement enthalten.

Das bodyElement darf nur Flow-Inhalte enthalten , bei denen Flow-Inhalte als Elemente definiert sind: a, abbr, Adresse, Bereich (wenn es ein Nachkomme eines Kartenelements ist), Artikel, beiseite, Audio, b, bdi, bdo, blockquote, br, Schaltfläche, Leinwand, Zitieren, Code, Befehl, Datenliste, del, Details , dfn, div dl, em, einbetten, Feldmenge, Figur, Fußzeile, Form, h1, h2, h3, h4, h5, h6, Kopfzeile, hgruppe, hr, i, iframe, img, Eingabe, ins, kbd, keygen, beschriftung, karte, markierung, mathematik, menü, meter, nav, noscript, objekt, ol, ausgabe, p, vor, fortschritt, q, rubin, s, samp, skript, abschnitt, auswahl, klein, span, stark, stil ( wenn das Gültigkeitsbereichsattribut vorhanden ist), sub, sup, svg, table, textarea, time,u, ul, var, video, wbr und Text

und so weiter.

Das Inhaltsmodell sagt zu keinem Zeitpunkt "Sie können beliebige Elemente in dieses einfügen", was für benutzerdefinierte Elemente / Tags erforderlich wäre.

Grundlegende benutzerdefinierte Elemente und Attribute

Benutzerdefinierte Elemente und Attribute sind in HTML gültig, sofern:

• Elementnamen sind Kleinbuchstaben und beginnen mit x-
• Attributnamen sind Kleinbuchstaben und beginnen mit data-

Zum Beispiel <x-foo data-bar="gaz"/>oder <br data-bar="gaz"/>.

Eine übliche Konvention für Elemente ist x-foo; x-vendor-featureist empfohlen.

Dies behandelt die meisten Fälle, da es wohl selten vorkommt, dass ein Entwickler die gesamte Leistung benötigt, die mit der Registrierung seiner Elemente verbunden ist. Die Syntax ist auch ausreichend gültig und stabil. Eine detailliertere Erklärung finden Sie unten.

Erweiterte benutzerdefinierte Elemente und Attribute

Ab 2014 gibt es eine neue, stark verbesserte Möglichkeit, benutzerdefinierte Elemente und Attribute zu registrieren. In älteren Browsern wie IE 9 oder Chrome / Firefox 20 funktioniert dies nicht. Sie können jedoch den Standard verwendenHTMLElement verwenden, Kollisionen verhindern, Nicht- x-*und Nichtnamen data-*verwenden und benutzerdefiniertes Verhalten und Syntax definieren, die der Browser berücksichtigen soll . Es erfordert ein bisschen ausgefallenes JavaScript, wie in den folgenden Links beschrieben.

HTML5 Rocks - Definieren neuer Elemente in HTML
WebComponents.org - Einführung in benutzerdefinierte Elemente W3C - Webkomponenten
: Benutzerdefinierte Elemente

In Bezug auf die Gültigkeit der Basissyntax

Die Verwendung data-*für benutzerdefinierte Attributnamen ist seit einiger Zeit vollkommen gültig und funktioniert sogar mit älteren HTML-Versionen.

W3C - HTML5: Erweiterbarkeit

Benutzerdefinierte (nicht registrierte) Elementnamen werden vom W3C dringend empfohlen und als nicht konform eingestuft. Browser müssen sie jedoch unterstützen, und x-*Bezeichner stehen nicht in Konflikt mit zukünftigen HTML-Spezifikationen undx-vendor-feature Bezeichner stehen nicht in Konflikt mit anderen Entwicklern. Eine benutzerdefinierte DTD kann verwendet werden, um alle wählerischen Browser zu umgehen.

Hier sind einige relevante Auszüge aus den offiziellen Dokumenten:

"Anwendbare Spezifikationen KÖNNEN neuen Dokumentinhalt definieren (z. B. ein Foobar-Element) [...]. Wenn die Syntax und Semantik eines bestimmten konformen HTML5-Dokuments durch die Verwendung anwendbarer Spezifikationen unverändert bleibt, bleibt dieses Dokument ein konformes HTML5 Dokument."

"Benutzeragenten müssen Elemente und Attribute, die sie nicht als semantisch neutral verstehen, behandeln. Sie müssen sie im DOM belassen (für DOM-Prozessoren) und sie gemäß CSS (für CSS-Prozessoren) formatieren, aber keine Bedeutung daraus ableiten."

"Benutzeragenten können nicht konforme Dokumente nicht nach Belieben behandeln. Das in dieser Spezifikation beschriebene Verarbeitungsmodell gilt für Implementierungen unabhängig von der Konformität der Eingabedokumente."

"Die HTMLUnknownElement-Schnittstelle muss für HTML-Elemente verwendet werden, die in dieser Spezifikation nicht definiert sind."

W3C - HTML5: Anpassen von Dokumenten
WhatWG - HTML Standard: DOM-Elemente

Ich möchte darauf hinweisen, dass das Wort "gültig" in diesem Zusammenhang zwei verschiedene Bedeutungen haben kann, von denen jede möglicherweise gültig ist.

1. Sollte ein HTML-Dokument mit benutzerdefinierten Tags als gültiges HTML5 betrachtet werden? Die Antwort darauf lautet eindeutig "Nein". Die Spezifikation listet genau auf, welche Tags in welchen Kontexten gültig sind. Aus diesem Grund akzeptiert ein HTML-Validator kein Dokument mit benutzerdefinierten Tags oder mit Standard-Tags an den falschen Stellen (wie ein "img" -Tag in der Kopfzeile).

2. Wird ein HTML-Dokument mit benutzerdefinierten Tags analysiert und in allen Browsern auf standardmäßige, klar definierte Weise gerendert? Hier lautet die Antwort vielleicht überraschend "Ja". Auch wenn das Dokument technisch nicht als gültiges HTML5 angesehen wird, gibt die HTML5- Spezifikation genau an, was Browser tun sollen, wenn sie ein benutzerdefiniertes Tag sehen: Kurz gesagt, das benutzerdefinierte Tag <span>verhält sich wie ein - es bedeutet nichts und tut nichts durch Standard, aber es kann von HTML gestylt und von Javascript zugegriffen werden.

Benutzerdefinierte HTML-Elemente sind ein neuer W3-Standard, zu dem ich beigetragen habe und der es Ihnen ermöglicht, benutzerdefinierte Elemente zu deklarieren und beim Parser zu registrieren. Sie können die Spezifikation hier lesen: Spezifikation für benutzerdefinierte W3-Webkomponenten . Darüber hinaus unterstützt Microsoft eine Bibliothek (geschrieben von ehemaligen Mozilla-Entwicklern) namens X-Tag , die die Arbeit mit Webkomponenten noch einfacher macht.

Um eine aktualisierte Antwort zu geben, die moderne Seiten widerspiegelt.

Benutzerdefinierte Tags sind gültig, wenn entweder

1) Sie enthalten einen Bindestrich

<my-element>

2) Sie sind eingebettetes XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Dies setzt voraus, dass Sie den HTML5-Doctype verwenden <!doctype html>

In Anbetracht dieser einfachen Einschränkungen ist es jetzt sinnvoll, Ihr Bestes zu geben, um Ihr HTML-Markup gültig zu halten (bitte hören Sie auf, Tags wie <img>und zu schließen <hr>, es ist albern und falsch, es sei denn, Sie verwenden einen XHTML-Doctype, den Sie wahrscheinlich nicht benötigen).

Da HTML5 die Parsing-Regeln klar definiert, kann ein kompatibler Browser jedes Tag verarbeiten, das Sie darauf werfen, auch wenn es nicht unbedingt gültig ist.

Zitat aus dem Abschnitt Erweiterbarkeit der HTML5-Spezifikation :

Für Funktionen auf Markup-Ebene, die auf die XML-Serialisierung beschränkt werden können und in der HTML-Serialisierung nicht unterstützt werden müssen, sollten Anbieter den Namespace-Mechanismus verwenden, um benutzerdefinierte Namespaces zu definieren, in denen die nicht standardmäßigen Elemente und Attribute unterstützt werden.

Wenn Sie also die XML-Serialisierung von HTML5 verwenden, ist es für Sie legal, Folgendes zu tun:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Wenn Sie jedoch die HTML-Syntax verwenden, sind Ihre Möglichkeiten wesentlich eingeschränkter.

Für Features auf Markup-Ebene, die für die Verwendung mit der HTML-Syntax vorgesehen sind, sollten Erweiterungen auf neue Attribute der Form "x-vendor-feature" beschränkt werden. [...] Neue Elementnamen sollten nicht erstellt werden.

Diese Anweisungen richten sich jedoch in erster Linie an Browser-Anbieter, die vermutlich visuelles Design und Funktionen für die von ihnen erstellten benutzerdefinierten Elemente bereitstellen.

Für einen Autor ist es zwar zulässig, ein benutzerdefiniertes Element in die Seite einzubetten (zumindest in der XML-Serialisierung), Sie erhalten jedoch nur einen Knoten im DOM. Wenn Sie möchten, dass Ihr benutzerdefiniertes Element tatsächlich etwas tut oder auf eine bestimmte Weise gerendert wird, sollten Sie sich die Spezifikation für benutzerdefinierte Elemente ansehen .

Weitere Informationen zu diesem Thema finden Sie in der Einführung zu Webkomponenten , die auch Informationen zum Shadow DOM und zu anderen zugehörigen Spezifikationen enthält. Diese Spezifikationen sind derzeit noch in Arbeit - Sie können den aktuellen Status hier sehen - aber sie werden aktiv weiterentwickelt.

Eine einfache Definition für ein greetingElement könnte beispielsweise so aussehen:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Dies weist den Browser an, den Elementinhalt in Anführungszeichen zu rendern, wobei der Text "Simon sagt:" vorangestellt wird, der mit der Farbe Grau gestaltet ist. In der Regel wird eine solche benutzerdefinierte Elementdefinition in einer separaten HTML-Datei gespeichert, die Sie mit einem Link importieren.

<link rel="import" href="greeting-definition.html" />

Sie können es aber auch inline einbinden, wenn Sie möchten.

Ich habe eine funktionierende Demonstration der obigen Definition unter Verwendung der Polymer-Polyfill-Bibliothek erstellt, die Sie hier sehen können . Beachten Sie, dass hierfür eine alte Version der Polymer-Bibliothek verwendet wird - neuere Versionen funktionieren ganz anders. Da sich die Spezifikation jedoch noch in der Entwicklung befindet, würde ich die Verwendung im Produktionscode ohnehin nicht empfehlen.

Verwenden Sie einfach alles, was Sie wollen, ohne Dom-Deklaration

<container>content here</container>

Fügen Sie Ihren eigenen Stil hinzu (Anzeige: Block) und er funktioniert mit jedem modernen Browser

data-*Attribute sind in HTML5 gültig und sogar in HTML4 werden alle Webbrowser verwendet, um sie zu respektieren. Das Hinzufügen neuer Tags ist technisch in Ordnung, wird jedoch nicht empfohlen, nur weil:

1. Es kann zu Konflikten mit etwas kommen, das in Zukunft hinzugefügt wird, und
2. Macht das HTML-Dokument ungültig, sofern es nicht dynamisch über JavaScript hinzugefügt wird.

Ich verwende benutzerdefinierte Tags nur an Stellen, die Google nicht interessieren. Zum Beispiel habe ich in einem Game-Engine-Iframe ein <log>Tag erstellt, das enthält <msg>, <error>und <warning>- aber nur über JavaScript . Und es war laut Validator voll gültig. Es funktioniert sogar im Internet Explorer mit seinem Styling! ;]

Benutzerdefinierte Tags sind in HTML5 nicht gültig. Derzeit unterstützen Browser das Parsen und Sie können sie auch mit CSS verwenden. Wenn Sie also benutzerdefinierte Tags für aktuelle Browser verwenden möchten, können Sie dies tun. Die Unterstützung kann jedoch eingestellt werden, sobald die Browser die W3C-Standards ausschließlich zum Parsen des HTML-Inhalts implementieren.

Ich weiß, dass diese Frage alt ist, aber ich habe dieses Thema untersucht und obwohl einige der obigen Aussagen korrekt sind, sind sie nicht die einzige Möglichkeit, benutzerdefinierte Elemente zu erstellen. Beispielsweise:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

würde einwandfrei funktionieren (in neueren Versionen von Google Chrome, IE, FireFox und Mobile Safari bisher). Alles, was Sie brauchen, ist nur ein Alpha-Zeichen (az, AZ), um das Tag zu starten, und danach können Sie jedes der Nicht-Alpha-Zeichen verwenden. In CSS müssen Sie das "\" (Backslash) verwenden, um das Element zu finden, das beispielsweise Query \ ^ {...} benötigt. Aber in JS nennen Sie es einfach so, wie Sie es sehen. Ich hoffe das hilft. Siehe Beispiel hier

-Mink CBOS