web-dev-qa-db-ja.com

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

特定のカスタム目的のためにHTMLページで非標準のタグを使用することが適切な方法か合法かを知りたいのですが。

例えば:

ロレム・イプサム・ドーラーはアメット座位であり、奉献者はエリートである。 Nullam consequat、felis sit amet suscipit laoreet、nisi arcu accumsan arcu、vel pulvinar odio magna suscipit mi。

「consectetur adipiscing ellit」を強調し、「nisi arcu accumsan arcu」を強調したい。

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

Lorem ipsum dolor sit amet、<important> consectetur adipiscing elit </ important>。 Nullam consequat、felis sit amet suscipit laoreet、<highlighted> nisi arcu accumsan arcu </ highlighted>、vel pulvinar odio magna suscipit mi。

そしてCSSで:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

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

20
rcs20

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

50
Wyatt Barnett

あなたの質問は、それが「良い習慣またはlegal」であるかどうか尋ねました。

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

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

このように表示されるのは、すべてのブラウザです。

一部の太字と一部の斜体。

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

slanted { font-style: italic; }

mostブラウザは次のようにレンダリングされます:

一部太字および一部斜体

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

しかし、それは完全な全体像ではありません。完全な答えはいいえ、それは良い習慣ではありません。私が "mostbrowsers"というフレーズを使用していることに気づいたかもしれません。残念ながら、IE9より前のすべてのバージョンのInternet Explorerは、この動作を実装できません。 IE8以前では、上記のコードは次のようになります。

一部の太字と一部の斜体。

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

だから、短い答え: 標準のHTML要素 のみに固執し、CSSで好きなようにスタイルを設定してください。

14
Mark Whitaker

特定の理由で<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

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

独自のカスタムタグを作成してはならない理由を説明する答えがかなりあります。間違いなく、それらはすべて正しくありません。

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

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

あなたがすべきことは、OPがそうしなかったように、すべてのカスタムタグの前に「x-」を規則に従って付けることです。これは、このタグがドキュメントに対してローカルであることを意図しており、将来のspec要素との競合を回避することを明確に示しています。

一部の人気のあるブラウザーは標準に準拠した方法でカスタムタグを処理しないため、それらを使用しないでください。ただし、非準拠ブラウザーの動作はそれ自体の問題であり、非セマンティックマークアップを作成するように強制することはできません。その問題にはJavaScriptと非JavaScriptの両方の解決策があり、それらは、特にサポートしたい非準拠ブラウザーにのみ適用する必要があります。

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

8
hemp

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

強い、より強い重要性を指します。

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

5
CaffGeek

実用的な面では、強調表示に新しいタグを使用するのは不要です。必要に応じて、emまたはiタグを使用できますitalicsをデフォルト(CSS以外)のレンダリングおよびstrongまたはb必要に応じてboldingをデフォルトとして使用します。何らかの理由で、通常のテキストとしてデフォルトのレンダリングを希望する場合、つまり強調表示しない場合は、spanを使用します。どちらの場合も、class属性を使用して、この使用法を、マークアップで使用できる他の使用法と区別できます。

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

4

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

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

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

2
zhao

いいえ、XHTMLの別の名前空間から新しいタグを追加することはできますが、指定されていないHTMLタグの処理はお勧めしません。

2
Dibbeke

まあ、あなたがそれをしたために逮捕されるつもりはないという点で合法です。しかし、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
Peter C

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

次の2つの非常に重要な理由から、これは適切な方法ではありません。

まず、ある時点で、標準委員会が<important>という名前のタグを含めることを決定した可能性があり、そのタグは最終的にそれを使用することになります。確かに、しばらく時間がかかるかもしれません。しかし、後でそれを引き出すのに時間を浪費する可能性があります。

次に、(これが本当の理由です)コードを継承するプログラマーは、非標準的なアプローチで常に「wtf」と言いながら、それをすべてヤンクします。欲求不満でやっただけでやめました。

だから、ニースになります。いつか彼らに仕事を依頼することになるかもしれません。

1
NotMe

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

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

例:

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属性の意味を知っている人に追加情報を提供できます。

0
Andy Hunt

いいえ、独自のHTMLタグを作成することはできません。すべての主要なブラウザーでタグを実装する必要があるためです。現時点では、ブラウザーが認識されないタグを見つけると、その中のすべてを無視するので、独自のブラウザーで新しいタグを作成しない限り、タグは無意味であり、それでもそれらはあなたのブラウザでのみ機能します。

それらのユースケースをw3cに送信してみることもできますが、それがどこかで行われるとは思えません。

0
Ryathal