Gibt es eine Möglichkeit, ein eigenes HTML-Tag in HTML5 zu erstellen?

Ich möchte so etwas wie erstellen

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Kann es in HTML5 gemacht werden? Ich weiß, dass ich es schaffen kann

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

aber es ist so viel weniger lesbar :(

Sie können benutzerdefinierte Tags in Browsern verwenden, obwohl diese nicht HTML5 sind (siehe Sind benutzerdefinierte Elemente gültig für HTML5? Und die HTML5-Spezifikation ).

Angenommen, Sie möchten ein benutzerdefiniertes Tag-Element namens verwenden <stack>. Folgendes sollten Sie tun ...

SCHRITT 1

Normalisieren Sie die Attribute in Ihrem CSS-Stylesheet (denken Sie an CSS-Reset) - Beispiel:

 stack{display:block;margin:0;padding:0;border:0; ... }

SCHRITT 2

Damit es in alten Versionen von Internet Explorer funktioniert, müssen Sie dieses Skript an den Kopf anhängen (wichtig, wenn Sie es für ältere Versionen von IE benötigen!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Dann können Sie Ihr benutzerdefiniertes Tag frei verwenden.

<stack>Overflow</stack>

Fühlen Sie sich frei, auch Attribute festzulegen ...

<stack id="st2" class="nice"> hello </stack>

Bei diesen Antworten bin ich mir nicht so sicher. Wie ich gerade gelesen habe: "BENUTZERDEFINIERTE TAGS WURDEN IMMER IN HTML ERLAUBT."

http://www.crockford.com/html/

Der Punkt hier ist, dass HTML auf SGML basiert. Im Gegensatz zu XML mit seinen Doctypes und Schemas wird HTML nicht ungültig, wenn ein Browser ein oder zwei Tags nicht kennt. Denken Sie an <Festzelt>. Dies war nicht im offiziellen Standard. Während der Verwendung wurde Ihre HTML-Seite "offiziell nicht genehmigt", und die Seite wurde auch nicht beschädigt.

Dann gibt es <keygen>, das Netscape-spezifisch war, in HTML4 vergessen und wiederentdeckt und jetzt in HTML5 angegeben wurde. Außerdem haben wir jetzt benutzerdefinierte Tag-Attribute wie data-XyZzz = "...", die für alle HTML5-Tags zulässig sind.

Obwohl Sie keinen eigenen benutzerdefinierten, nicht spezifizierten Markup-Salat erfinden sollten, ist es nicht unbedingt verboten, benutzerdefinierte Tags in HTML zu haben. Dies gilt jedoch nur, wenn Sie es mit einem + xml-Inhaltstyp senden oder andere XML-Namespaces wie SVG oder MathML einbetten möchten. Dies gilt nur für SGML-beschränktes HTML.

Wie Michael in den Kommentaren vorgeschlagen hat, ist das, was Sie tun möchten, durchaus möglich, aber Ihre Nomenklatur ist falsch. Sie fügen HTML 5 keine Tags hinzu, sondern erstellen einen neuen XML-Dokumenttyp mit Ihren eigenen Tags.

Ich habe dies für einige Projekte bei meinem letzten Job getan. Einige praktische Ratschläge:

1. Wenn Sie sagen, dass Sie "diese zu HTML 5 hinzufügen" möchten, meinen Sie damit, dass die Seiten in einem modernen Browser korrekt angezeigt werden sollen, ohne dass Sie viel Arbeit auf der Serverseite leisten müssen. Dies kann erreicht werden, indem oben in die XML-Datei eine "Stylesheet-Verarbeitungsanweisung" eingefügt wird, z. B. <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Ersetzen Sie "menu.xsl" durch den Pfad zum XSL-Stylesheet, das Sie erstellen, um Ihre benutzerdefinierten Tags in HTML zu konvertieren.

2. Vorsichtsmaßnahmen: Ihre Datei muss ein wohlgeformtes XML-Dokument mit dem XML-Header <xml version = "1.0"> sein. XML ist in Bezug auf nicht übereinstimmende Tags wählerischer als HTML. Im Gegensatz zu HTML wird bei Tags auch zwischen Groß- und Kleinschreibung unterschieden. Sie müssen auch sicherstellen, dass der Webserver die Dateien mit dem entsprechenden MIME-Typ "application / xml" sendet. Oft wird der Webserver so konfiguriert, dass dies automatisch erfolgt, wenn die Dateierweiterung ".xml" lautet. Überprüfen Sie dies jedoch.

3. Große Einschränkung: Schließlich ist die Verwendung der automatischen XSL-Transformation des Browsers, wie ich beschrieben habe, nur für das Debuggen und für eingeschränkte Anwendungen, bei denen Sie viel Kontrolle haben, am besten geeignet. Ich habe es erfolgreich verwendet, um bei meinem letzten Arbeitgeber ein einfaches Intranet einzurichten, auf das höchstens ein paar Dutzend Personen zugreifen konnten. Nicht alle Browser unterstützen XSL, und diejenigen, die keine vollständig kompatiblen Implementierungen haben. Wenn Ihre Seiten also in den "wilden" Zustand versetzt werden sollen, ist es am besten, sie alle auf der Serverseite in HTML umzuwandeln. Dies kann mit einem Befehlszeilentool oder mit einer Schaltfläche in vielen XML-Editoren erfolgen.

Das Erstellen eigener Tag-Namen in HTML ist nicht möglich / ungültig. Dafür sind XML, SGML und andere allgemeine Auszeichnungssprachen gedacht.

Was Sie wahrscheinlich wollen, ist

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Oder statt <div/>und so <span/>etwas wie <ul/>und <li/>.

Schließen Sie einfach CSS und Javascript an, damit es richtig aussieht und funktioniert.

Ich möchte nur zu den vorherigen Antworten hinzufügen, dass es eine Bedeutung hat, nur Zwei-Wörter-Tags für benutzerdefinierte Elemente zu verwenden. Sie sollten niemals standardisiert werden.

Zum Beispiel möchten Sie das Tag verwenden <icon>, weil Sie es nicht mögen <img>und Sie es nicht mögen<i> ...

Denken Sie daran, dass Sie nicht der einzige sind. Vielleicht werden w3c und / oder Browser in Zukunft dieses Tag spezifizieren / implementieren.

Zu diesem Zeitpunkt implementieren Browser wahrscheinlich den nativen Stil für dieses Tag, und das Design Ihrer Website kann fehlerhaft sein.

Daher schlage ich vor, (gemäß diesem Beispiel) zu verwenden <img-icon>.

Tatsächlich ist das Tag <menu>gut definiert, dh nicht so verwendet, sondern definiert. Es sollte enthalten <menuitem>, wie sich verhalten <li>.

Benutzerdefinierte Tags können in Safari, Chrome, Opera und Firefox verwendet werden, zumindest soweit sie anstelle von "class = ..." verwendet werden.

grün {Farbe: grün} in CSS funktioniert für

<green>This is some text.</green>

Zum Einbetten von Metadaten können Sie versuchen, HTML-Mikrodaten zu verwenden , diese sind jedoch noch ausführlicher als die Verwendung von Klassennamen.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Neben dem Schreiben eines XSL-Stylesheets, wie ich zuvor beschrieben habe, gibt es einen anderen Ansatz, zumindest wenn Sie sicher sind, dass Firefox oder ein anderer vollwertiger XML-Browser verwendet wird (dh NICHT Internet Explorer). Überspringen Sie die XSL-Transformation und schreiben Sie ein vollständiges CSS-Stylesheet, das dem Browser mitteilt, wie das XML direkt formatiert werden soll. Der Vorteil hierbei ist, dass Sie XSL nicht lernen müssen, was für viele Menschen eine schwierige und nicht intuitive Sprache ist. Der Nachteil ist, dass Ihr CSS das Styling sehr vollständig spezifizieren muss, einschließlich Blockknoten, Inlines usw. Normalerweise können Sie beim Schreiben von CSS davon ausgehen, dass der Browser beispielsweise <em> "kennt". ist ein Inline-Knoten, hat aber keine Ahnung, was mit <dish> zu tun ist.

Schließlich ist es einige Jahre her, seit ich dies versucht habe, aber ich erinnere mich, dass der IE (zumindest einige Versionen zurück) sich geweigert hat, CSS-Stylesheets direkt auf XML-Dokumente anzuwenden.

Der Sinn von HTML ist, dass die in der Sprache enthaltenen Tags eine vereinbarte Bedeutung haben, die jeder auf der Welt verwenden und Entscheidungen treffen kann - wie das Standard-Styling oder das Klicken auf Links oder das Senden eines Formulars, wenn Sie auf ein klicken <input type="submit"> .

Gemachte Tags wie Ihre sind großartig für Menschen (weil wir Englisch lernen können und somit wissen oder zumindest erraten, was Ihre Tags bedeuten), aber nicht so gut für Maschinen.

Dies ist in keiner HTML-Spezifikation eine Option :)

Sie können wahrscheinlich mit <div>Elementen und Klassen tun, was Sie wollen. Ausgehend von der Frage bin ich mir nicht sicher, wonach Sie suchen, aber nein, das Erstellen eigener Tags ist keine Option.

Wie Nick sagte, werden benutzerdefinierte Tags von keiner HTML-Version unterstützt.

Es wird jedoch kein Fehler ausgegeben, wenn Sie ein solches Markup in Ihrem HTML-Code verwenden.

Anscheinend möchten Sie eine Liste erstellen. Sie können eine ungeordnete Liste verwenden <ul>, um die Rool-Elemente zu erstellen, und die verwenden<li> Tag für die darunter .

Wenn Sie dies nicht erreichen möchten, geben Sie bitte genau an, was Sie möchten. Wir können dann eine Antwort finden.

Sie können benutzerdefinierte Attribute über HTML 5-Datenattribute hinzufügen. Beispiel: Nachricht, die für HTML 5 gültig ist. Weitere Informationen finden Sie unter http://ejohn.org/blog/html-5-data-attributes/ .

Mit Polymer- oder X-Tags können Sie Ihre eigenen HTML-Tags erstellen. Es basiert auf dem "Shadow DOM" des nativen Browsers.

Sie können einfach ein benutzerdefiniertes CSS-Styling durchführen. Dadurch wird ein Tag erstellt, das die Hintergrundfarbe rot macht:

redback {background-color:red;}

 

<redback>This is red</redback>

Unter bestimmten Umständen sieht es so aus, als ob das Erstellen eigener Tag-Namen einwandfrei funktioniert.
Dies ist jedoch nur die Fehlerbehandlungsroutine Ihres Browsers bei der Arbeit. Und das Problem ist, dass verschiedene Browser unterschiedliche Fehlerbehandlungsroutinen haben!

Siehe dieses Beispiel.
Die erste Zeile enthält zwei zusammengesetzte Elemente:what und ever, und sie bekommen unterschiedlich von verschiedenen Browsern behandelt. Der Text wird in IE11 und Edge rot angezeigt, in anderen Browsern jedoch schwarz.
Zum Vergleich ist die zweite Zeile ähnlich, enthält jedoch nur gültige HTML-Elemente und sieht daher in allen Browsern gleich aus.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Ein weiteres Problem mit erfundenen Elementen ist, dass Sie nicht wissen, was die Zukunft bringt. Wenn Sie vor ein paar Jahren eine Website mit Tag-Namen wie erstellt haben picture,dialog , details, slot, templateusw, sie erwarten wie Spannweiten zu verhalten, sind in Schwierigkeiten Sie jetzt!

Sie können dies verwenden:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

Ich habe diesen Artikel über das Erstellen und Instanziieren von benutzerdefinierten HTML-Tags gefunden. Es vereinfacht den Prozess und gliedert ihn in Begriffe, die jeder sofort verstehen und verwenden kann. Ich bin mir jedoch nicht ganz sicher, ob die darin enthaltenen Codebeispiele in allen Browsern gültig sind. Trotzdem ist es eine großartige Einführung in das Thema, um loszulegen.

Benutzerdefinierte Elemente: Definieren neuer Elemente in HTML