HTML5で独自のhtmlタグを作成する方法はありますか？

のようなものを作りたい

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

HTML5でできますか？私はそれでできることを知っています

<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>

しかし、それはとても読みにくいです:(

ブラウザでカスタムタグを使用できますが、HTML5にはなりません（カスタム要素は有効なHTML5ですか？とHTML5仕様を参照）。

というカスタムタグ要素を使用するとし<stack>ます。これはあなたがすべきことです...

ステップ1

CSSスタイルシートで属性を正規化します（cssのリセットを考えてください）-例：

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

ステップ2

古いバージョンのInternet Explorerで動作させるには、このスクリプトをヘッドに追加する必要があります（古いバージョンのIEで動作させる必要がある場合は重要です）：

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

その後、カスタムタグを自由に使用できます。

<stack>Overflow</stack>

属性も自由に設定してください...

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

これらの答えについてはよくわかりません。先ほど読んだとおり、「カスタムタグは常にHTMLで許可されています。」

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

つまり、HTMLはSGMLに基づいていたということです。Doctypeとスキーマを備えたXMLとは異なり、HTMLは、ブラウザーが1つまたは2つのタグを知らなくても無効になりません。<マーキー>について考えてください。これは公式の基準には含まれていません。したがって、それを使用すると、HTMLページが「公式に未承認」になり、ページが破損することもありませんでした。

次に、Netscape固有の<keygen>があり、HTML4では忘れられ、再発見されてHTML5で指定されています。また、data-XyZzz = "..."などのカスタムタグ属性がすべてのHTML5タグで許可されました。

したがって、独自のカスタム未指定マークアップサラダ全体を発明するべきではありませんが、HTMLにカスタムタグを含めることは厳密には禁止されていません。ただし、+ xml Content-Typeで送信したり、SVGやMathMLなどの他のXML名前空間を埋め込んだりする場合を除きます。これは、SGML限定HTMLにのみ適用されます。

マイケルがコメントで示唆したように、あなたがしたいことはかなり可能ですが、あなたの命名法は間違っています。「HTML 5にタグを追加する」のではなく、独自のタグを使用して新しいXMLドキュメントタイプを作成します。

私は最後の仕事でいくつかのプロジェクトのためにこれをしました。いくつかの実用的なアドバイス：

1. 「これらをHTML 5に追加する」と言ったとき、私はあなたが本当に意味していることは、サーバー側で多くの作業を行わなくても、最新のブラウザーでページを正しく表示したいということだと思います。これは、<？xml-stylesheet type = "text / xsl" href = "menu.xsl"？>のように、xmlファイルの先頭に「スタイルシート処理命令」を挿入することで実現できます。「menu.xsl」を、カスタムタグをHTMLに変換するために作成したXSLスタイルシートへのパスに置き換えます。

2. 警告：ファイルは、XMLヘッダー<xml version = "1.0">を備えた、整形式のXMLドキュメントである必要があります。タグの不一致などについては、XMLはHTMLよりも厳格です。また、HTMLとは異なり、タグでは大文字と小文字が区別されます。また、Webサーバーが適切なMIMEタイプ "application / xml"のファイルを送信していることも確認する必要があります。多くの場合、ファイル拡張子が「.xml」の場合、これを自動的に行うようにWebサーバーが設定されますが、チェックしてください。

3. 重要な警告：最後に、ブラウザーの自動XSL変換を使用することは、すでに説明したように、デバッグや、多くの制御が可能な限られたアプリケーションにのみ最適です。私は最後の雇用主でシンプルなイントラネットをセットアップするのに成功しました。これは最大で数十人しかアクセスできませんでした。すべてのブラウザがXSLをサポートしているわけではなく、完全に互換性のある実装を備えていないブラウザもあります。したがって、ページを「ワイルド」にリリースする場合は、すべてをサーバー側でHTMLに変換するのが最善です。これは、コマンドラインツールまたは多くのXMLエディターのボタンを使用して実行できます。

HTMLで独自のタグ名を作成することは不可能/無効です。それがXML、SGML、その他の一般的なマークアップ言語の目的です。

あなたがおそらく望んでいるのは

<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>

または代わりに<div/>と<span/>のようなもの<ul/>と<li/>。

見た目と機能を正しくするために、CSSとJavaScriptを接続するだけです。

以前の回答に、カスタム要素に2ワードのタグのみを使用する意味があることを追加したいと思います。それらは決して標準化されるべきではありません。

たとえば、が<icon>好き<img>ではないため、タグを使用したいとします。<i>どちらも ...

まあ、あなただけではないことに注意してください。おそらく将来的には、w3cやブラウザがこのタグを指定/実装するでしょう。

現時点では、ブラウザはおそらくこのタグのネイティブスタイルを実装しており、ウェブサイトのデザインが壊れる可能性があります。

だから私は（この例に従って）使用することを提案しています<img-icon>。

実際のところ、タグ<menu>は明確に定義されています。つまり、タグはそれほど使用されていませんが、定義されています。の<menuitem>ように動作するものが含まれている必要があります<li>。

カスタムタグは、少なくとも「class = ...」の代わりに使用する限り、Safari、Chrome、Opera、Firefoxで使用できます。

cssの緑{color：緑}は

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

メタデータを埋め込むには、HTML microdataを使用することもできますが、クラス名を使用するよりも詳細です。

<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>

XSLスタイルシートを作成する以外に、前述したように、少なくともFirefoxまたは別の本格的なXMLブラウザーが使用されることが確実である場合（つまり、Internet Explorerではない）、別のアプローチがあります。XSL変換をスキップし、XMLを直接フォーマットする方法をブラウザーに指示する完全なCSSスタイルシートを記述します。ここでの利点は、XSLを学習する必要がないことです。XSLは、多くの人々にとって困難で直観に反する言語であることがわかります。欠点は、CSSがスタイルを完全に指定する必要があることです。これには、ブロックノードとは何か、インラインとは何かなどが含まれます。通常、CSSを作成するとき、ブラウザはそれを "知っている"と想定できます。たとえば、<em>インラインノードですが、<dish>をどうするかはわかりません。

最後に、私がこれを試してから数年になりますが、私の記憶は、IE（少なくとも数バージョン前）がCSSスタイルシートをXMLドキュメントに直接適用することを拒否したことです。

HTMLのポイントは、言語に含まれるタグが合意された意味を持ち、世界中の誰もがデフォルトのスタイリング、クリック可能なリンクの作成、クリックしたときのフォームの送信などの決定に基づいて使用できることです。 <input type="submit">。

あなたのようなタグは人間にとっては素晴らしいです（私たちは英語を学ぶことができるため、タグの意味を知っているか、少なくとも推測できるためです）が、機械にはあまり適していません。

これはHTML仕様のオプションではありません:)

<div>要素とクラスで何をしたいのかはおそらくわかりますが、自分が何を求めているのか正確にはわかりませんが、独自のタグを作成することはできません。

Nickが言ったように、カスタムタグはどのバージョンのHTMLでもサポートされていません。

ただし、HTMLでそのようなマークアップを使用しても、エラーにはなりません。

リストを作成したいようです。<ul>番号なしリストを使用してrool要素を作成し、<li>その下の項目にタグを使用できます。

それがあなたが達成したいことではない場合、あなたが望むものを正確に指定してください。それで私たちは答えを出すことができます。

HTML 5データ-属性を使用してカスタム属性を追加できます。例：メッセージはHTML 5に有効です。詳細については、http：//ejohn.org/blog/html-5-data-attributes/を参照してください。

Polymer タグまたはXタグを使用すると、独自のHTMLタグを作成できます。それはネイティブブラウザーの「シャドウDOM」に基づいています。

あなたはいくつかのカスタムCSSスタイリングを行うことができます、これは背景色を赤にするタグを作成します：

redback {background-color:red;}

 

<redback>This is red</redback>

状況によっては、独自のタグ名を作成しても問題ないように見える場合があります。
ただし、これはブラウザのエラー処理ルーチンです。そして問題は、ブラウザによってエラー処理ルーチンが異なることです。

この例を参照してください。
最初の行には2つの構成要素、whatおよびが含まれておりever、ブラウザによって処理が異なります。IE11とEdgeではテキストが赤で表示されますが、他のブラウザでは黒になります。
比較のために、2行目は似ていますが、有効なHTML要素のみが含まれているため、すべてのブラウザで同じに見えます。

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>

構成要素のもう1つの問題は、将来の状況が分からないことです。あなたのようなタグ名で数年前にウェブサイトを作成した場合はpicture、dialog、details、slot、templateなど、彼らはスパンのように振る舞うことを期待し、あなたが今困っています！

あなたはこれを使うことができます：

<!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>

カスタムHTMLタグの作成とインスタンス化に関するこの記事を見つけました。それはプロセスを簡素化し、誰でもすぐに理解して利用できる条件に分解します-ただし、そこに含まれるコードサンプルがすべてのブラウザーで有効であるかどうかは完全にはわかりません。それにもかかわらず、それは始めるための主題への素晴らしい導入です。

カスタム要素：HTMLでの新しい要素の定義