単語を強調表示するために、HTMLページで非標準のタグを使用する必要がありますか?


20

特定のカスタム目的のために、HTMLページで非標準タグを使用するのが良い習慣か合法かを知りたいです。

例えば:

Lorem ipsum dolorシットアメット、consectetur adipiscing elit。Nullam consequat、felis sit amet suscipit laoreet、nisi arcu accumsan arcu、vel pulvinar odio magna suscipit mi。

「consistetur adipiscing elit」を重要として強調表示し、「nisi arcu accumsan arcu」を強調表示したい。

したがって、HTMLに次のように記述します。

Lorem ipsum dolor sit amet、<important> conectetur adipiscing elit </ important>。Nullamの結果、felisはamet suscipit laoreetに座り、<強調> nisi arcu accumsan arcu </ highlighted>、vel pulvinar odio magna suscipit mi。

CSSで:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

ただし、これらは有効なHTMLタグではないため、これで問題ありませんか?


56
<span class=..>
ジェイクバーガー

12
定義により、カスタムの場合、HTMLタグ(標準化された)ではありません。それらは、特定の意味を持たない単なる要素です。
Oded


14
<em>は基本的にあなた<important><mark>あり、あなたの<highlight>です。
ピーターC

3
あなたが正しい。HTML5の仕様は言う<strong>よりも重要性のためのより適切である<em>です。私の悪い。
ピーターC

回答:


50

いいえ、これは良い習慣ではありません。すでに意味のある意味のあるタグ(おそらく<em>この場合)を使用し、CSSスタイルを適用して設計要件を達成する必要があります。


3
おそらく彼はクラスに精通していないでしょう。構文は次のとおりです。HTML <em class="myclass">sample text</em>CSS .myclass: { background: red; etc. } だけでなく、ほとんどのタグにクラスを指定できますem。通常divまたはspanテキスト用。 も参照してください
BlueRaja-ダニーPflughoeft

@ BlueRaja-DannyPflughoeft-コード全体に散らばるクラスも、これを処理する間違った方法です。おそらく、コンテナ上で1つまたは2つのクラスを持つ子孫セレクターを使用する方が適切です。
ワイアットバーネット

14

あなたの質問はそれが「良い習慣合法か」を尋ねました。

まず、それは一種の合法です -少なくとも、それは許容されます。ブラウザは、それが単に無視することを意味する場合でも、理解できないタグに対処するように常にプログラムされています。このHTMLコード:

Some <b>bold</b> and some <slanted>italic</slanted>.

これは、すべてのブラウザごとに表示されます。

一部は太字、一部は斜体です。

さらに、ほとんどのブラウザでは、CSSでその要素のスタイルを設定できます。したがって、次のCSS定義を追加すると:

slanted { font-style: italic; }

ほとんどのブラウザは次のようにレンダリングされます。

いくつかの太字といくつかのイタリック

本当に:自分で試してみてください。ちなみに、これは新しいHTML5タグが古いブラウザーで正しく表示されるようにするためにWeb開発者が使用するトリックです。

しかし、それは完全な全体像ではありません。完全な答えはノーです、それは良い習慣ではありません。「ほとんどのブラウザ」というフレーズの使用に気付いたかもしれません。残念ながら、IE9より前のInternet Explorerのすべてのバージョンでは、この動作を実装できません。IE8以前では、上記のコードは引き続き次のようになります。

一部は太字、一部は斜体です。

Dive Into HTML5には問題の非常に詳細な説明があり、回避策の詳細もあります。ただし、回避策にはJavaScriptが必要なため、純粋なHTMLソリューションではなく、すべてのシナリオで機能するわけではありません。

したがって、簡単な答え:標準のHTML要素のみに固執し、CSSで好きなようにスタイルを設定します。


合法ではありません。仕様は、許可される要素を定義します。ブラウザーが作成者のエラーから回復する機能は、作成者のエラーを正しくしないわけではありません。
クエンティン

違法であるとどこで確認できますか?HTML仕様で検索しようとしましたが、適切なリファレンスを見つけることができませんでした。
ディベケ

2
@DavidDorwardはい、そうですね。私が意図したことは、ブラウザが未知のタグを見たときに壊れないことを保証するということでした-例えば、閉じられていないタグの周りの保証の欠如とは対照的です。したがって、ここでの正しい用語は、合法ではなく「許容」されます。それに応じて答えを更新しました。
マーク・ウィテカー

@DavidDorwardそれは絶対に合法です。W3Cは、「この仕様で定義されていないHTML要素にはHTMLUnknownElementインターフェイスを使用する必要があります」と規定するほど、HTML5仕様にまで達しました。それが合法でなければ、彼らはそのように述べたでしょう。UnknownElementまたはMicroformatsのどちらがWebにとってより良いセマンティックアプローチであるかをめぐって、ダストアップが起きていると思います。どちらが良いかに関係なく、両方とも合法です。

1
仕様からHTML仕様の以前のバージョンとは異なり、この仕様では、無効なドキュメントと有効なドキュメントに必要な処理を詳細に定義しています。ただし、ほとんどの場合、無効なコンテンツの処理は明確に定義されていますが、ドキュメントの適合性要件は依然として重要です
クエンティン

8

<important/>特定の理由でセマンティクスを保持する必要がある場合は、XSLを使用してカスタムタグを有効なHTMLに変換できます。このトピックの詳細については、こちらをご覧ください。

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

<important/>最終的なHTML出力に含めることはできませんが、のようなものに自動的に変換することはできます<span class="important"...


8

ここには、独自のカスタムタグを作成してはならない理由を説明する非常に多くの回答があります。間違いなく、それらはすべて間違っています。

カスタムタグのWHATWGの分析は、それらが許容可能で、標準に準拠し(認識されないタグの処理が明確に定義されているため)、たとえば汎用divのスタイリングよりもアクセスしやすいと結論付けています。

<x-accordion> </ x-accordion>は、あらゆる機械的な意味で<div class = "accordion"> </ div>より悪くありません。「x-accordion」(またはコンポーネントモデルのサポート)の定義がない場合、両方とも同じことを意味し、両方とも同じ方法でスタイル設定できます。1つはHTMLUnknownElement、もう1つはHTMLDivElementで、APIの表面は同じです。

OPがしなかった、あなたがすべきことは、慣例ごとにすべてのカスタムタグに「x-」を付けることです。これは、このタグがドキュメントのローカルにあることを明確に示しており、将来の仕様要素との競合を回避します。

一部の一般的なブラウザは標準に準拠した方法でカスタムタグを処理しないため、使用しないでくださいと主張する人もいます。ただし、非準拠のブラウザーの動作はそれ自体の問題であり、できれば非セマンティックマークアップの記述を強制することはありません。この問題に対するJavascriptと非Javascriptの両方のソリューションがあります。これらは、特にサポートしたい非準拠ブラウザーにのみ適用する必要があります。

つまり、作成したタグ(<highlight>)のセマンティックな意味を明確にカバーするタグが仕様(<mark>)に存在する場合は、既存のタグを使用することをお勧めします。


テキスト(たとえば「Dm7」)をクリックして、アニメーションアコーディオンにDマイナー7和音を演奏させたい場合、「x-accordion」アプローチは良い方法でしょうか。アコーディオンのJavascriptに追加情報が必要な場合、それをどのように表記すればよいでしょうか?として<x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>
supercat

5

カスタムCSSを使用して<em /><strong />表示方法を変更できます。

強い、強い重要性を指す。

強調は、強調の増加を指します。


4

実用的な面では、強調表示のために新しいタグを使用する必要はありませんイタリック体をデフォルト(非CSS)レンダリングとして使用する場合や、太字をデフォルトとして使用するem場合は、or iタグを使用できます。何らかの理由で、デフォルトのレンダリングを通常のテキスト、つまり強調表示なしにする場合は、を使用します。いずれの場合も、属性を使用して、この使用法をマークアップに使用できる他の使用法と区別できます。strongbspanclass

HTMLの仕様と(HTML5)ドラフトは、これらの要素のセマンティクスに関して不明瞭ですが、これは大きな頭痛の種を引き起こす必要はありません。


7
-1これは悪いアドバイスです。emそしてstrong、あなたが太字や斜体たくないとき、そうする意味的に正しい場合にタグを使用する必要があります。CSSを使用してプレゼンテーションを変更できます。
-DisgruntledGoat

2

いいえ、XHTMLの別のネームスペースから新しいタグを追加することは許可されていますが、指定されていないHTMLタグの処理は強く推奨されていません。


2

まあ、それはあなたがそれを行うために逮捕されるつもりはないという点で合法です。しかし、W3Cからの暗殺者があなたのドアに現れても、驚かないでください。

最初に、他の開発者は彼らが何を意味するのかを知りません。以下の場合<important><highlight>、彼らはあるが、あなたは、たとえば、のようなものを使用している場合<set>、あなたは数学のセットを参照している知っているかもしれませんが、あなたのコードを読んで、他の誰かが何か他のもののためにそれを勘違いかもしれません。答えを出すための仕様がなければ、大きな混乱が生じる可能性があります。

第二に、もしW3Cが<important>要素は良いアイデアであると決定したが、それは次のような緊急の通知を意味すると考えている場合

<important>This site is going to be down for maintenance 2/29/2012.</important>

その後、あなたはめちゃくちゃです。ブラウザと仲間の開発者はかなり混乱するでしょう。彼らはおそらくあなたが正気になるまで正規表現であなたのコードを解析することを強制するでしょう。そして、それがどうなるかは誰もが知っています。

第三に、IE <9では、ちょっとしたハックなしで未知の要素をスタイルできません。大きなことではありませんが、迷惑です。

最後に、この場合、すでに存在<important><highlight>ています!<strong>そして<mark>あなたが探しているものです。HTML5仕様によると

強い要素は、その内容にとって非常に重要です。

そして

mark要素は、参照目的でマークまたは強調表示された1つのドキュメント内の一連のテキストを表します...

「参照目的」のためにそれを使用していない場合は<span>、クラスで問題ありません。


2

http://www.w3.org/TR/html5/elements.html

これはリビジョン1.5612です。

著者は、この仕様または他の該当する仕様で許可されていない要素、属性、または属性値を使用してはなりません。使用すると、将来言語が拡張されるのが著しく難しくなります。


1
これは素晴らしい答えの始まりです。ただし、すばらしいのは、ガイドラインが作成された理由の一部を追加することです。また、同じ効果を可能にするが、ガイドラインに適合する代替戦略の追加も好意的に見られます。
-JustinC

1

ここで他の人の意見を無視します。

2つの非常に重要な理由から、それは良い習慣ではありません。

第一に、ある時点で標準委員会がそのタグを<important>使用するという名前のタグを含めることを決定する可能性があります。確かに、それはしばらくかかるかもしれません。しかし、その可能性は、後でそれをリッピングする時間を無駄にするつもりです。

第二に、(これが本当の理由です)コードを継承するプログラマーは、非標準的なアプローチで常に「wtf」と言いながら、それをすべてヤンクするか、あるいは、それが何であるかによって完全に混乱します欲求不満で終わってしまいました。

だから、素敵に。いつか彼らに仕事を依頼してしまうかもしれません。


0

独自のHTMLタグを作成することはできません。その場合、すべての主要なブラウザーにタグを実装させる必要があります。タグは無意味で、それでもあなたのブラウザでしか動作しません。

それらのユースケースをw3cに提出してみることもできますが、どこにでも届くとは思いません。


0

いいえ、他のすべての回答が提供するすべての理由から、それは良い習慣ではありません。それらのポイントを繰り返す代わりに、私はそれらの答えで見たことがないオプションを提示したいと思います!

セマンティックな意味が目標に一致する既存のタグがない場合、CSSとdata-*HTML 5仕様の新しい属性の組み合わせを使用できます。もちろん、これは選択したほとんどのタグで機能します。

例:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

これは完全な解決策ではありませんが、data-*属性には明確に定義されたセマンティックな意味がないため、少なくともdata-type属性の意味を知っている人に追加情報を提供することができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.