210

テキストを斜体にする正しい方法は何ですか？私は次の4つのアプローチを見てきました。

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

これが「古いやり方」です。<i>意味的な意味はなく、テキストを斜体にすることによる表現効果のみを伝えます。私が見る限り、これは非セマンティックであるため、これは明らかに間違っています。

<em>

これは、純粋に表示目的でセマンティックマークアップを使用します。<em>デフォルトではテキストがイタリックで表示されるため、避けるべきことは知っているが、その意味的な意味を知らない人がよく使用します<i>。強調されているため、すべての斜体のテキストが斜体であるとは限りません。サイドノートやささやき声のように、正反対の場合もあります。

<span class="italic">

これは、CSSクラスを使用してプレゼンテーションを配置します。これは正しい方法としてしばしば宣伝されますが、繰り返しますが、これは私には間違っているようです。これは、それ以上の意味的な意味を伝えていないようです<i>。しかし、その支持者は叫びます。たとえば、太字にしたい場合は、後ですべての斜体のテキストを変更する方がはるかに簡単です。しかし、これは当てはまりません。テキストを太字にする「イタリック」というクラスが残ってしまうからです。さらに、なぜ私が自分のWebサイトのすべての斜体のテキストを変更したいのか、または少なくともこれが望ましくない、または必要でない場合を考えることができるのかは明らかではありません。

<span class="footnote">

これは、セマンティクスにCSSクラスを使用します。これまでのところ、これが最善の方法のように見えますが、実際には2つの問題があります。

  1. すべてのテキストがセマンティックマークアップを保証するのに十分な意味を持っているわけではありません。たとえば、ページの下部にあるイタリック体のテキストは本当に脚注ですか？それとも脇にありますか？または完全に何か他のもの。おそらく、それは特別な意味を持たず、その前のテキストから表示的に分離するためにイタリックでレンダリングする必要があるだけです。

  2. セマンティックの意味は、十分な強度がない場合に変わる可能性があります。ページの下部にあるテキストだけに基づいて「脚注」を使用したとしましょう。数か月後、下部にテキストを追加したい場合はどうなりますか？脚注ではなくなりました。これらの問題よりも一般的ではない<em>が回避するセマンティッククラスをどのように選択できますか？

概要

何かをイタリックにしたいという願望が意味的な意味を運ぶことを意図していない多くの場合、意味論の要件は過度に負担が大きいように思われます。

さらに、スタイルを構造から分離したいという願望により、CSSは<i>、これが実際にはあまり役に立たない場合がある場合の代わりとして宣伝されるようになりました。それで、これは私に謙虚な<i>タグを残し、この一連の考えがHTML5仕様に残されている理由であるかどうか疑問に思いますか？

このテーマに関する良いブログ投稿や記事もありますか？<i>おそらく、タグを保持/作成する決定に関与した人々によってですか？

4

12 に答える 12

218

ユースケースごとに異なる方法を使用する必要があります。

  1. フレーズを強調したい場合は、を使用して<em>ください。
  2. <i>タグはHTML5で新しい意味を持ち、 「別の声または気分のテキストのスパン」を表します。したがって、このタグは、思考/傍白や慣用句などに使用する必要があります。仕様では船の名前も提案されています（ただし、本/歌/映画の名前は提案されていません<cite>。代わりに使用してください）。
  3. イタリック体のテキストがより大きなコンテキストの一部である場合、たとえば導入段落の場合は、CSSスタイルをより大きな要素に添付する必要があります。p.intro { font-style: italic; }
于 2010-01-21T12:44:46.513 に答える
22

<i>非セマンティックであるため、間違いではありません。それはプレゼンテーションであるため、（通常は）間違っています。関心の分離とは、提示情報をCSSで伝達する必要があることを意味します。

一般に、名前を正しく付けるのは難しい場合があり、クラス名も例外ではありませんが、それでも、それはあなたがしなければならないことです。イタリックを使用してブロックを本文から目立たせる場合は、「flow-distinctive」というクラス名が適切である可能性があります。再利用について考えてみてください。クラス名は分類用です。他にどこで同じことをしたいですか？これは、適切な名前を特定するのに役立ちます。

<i>HTML5に含まれていますが、特定のセマンティクスが与えられています。イタリックとしてマークアップする理由が、仕様で識別されているセマンティクスの1つを満たす場合は、を使用するのが適切<i>です。そうでなければそうではありません。

于 2010-01-21T10:39:01.103 に答える
10

私は専門家ではありませんが、本当にセマンティックになりたいのであれば、語彙（RDFa）を使用する必要があります。

これにより、次のような結果になるはずです。

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emはプレゼンテーションに使用され（人間はイタリックで表示されます）、property属性hrefはイタリックとは何か（マシンの場合）の定義にリンクしています。

そのようなことの語彙があるかどうかを確認する必要があります。おそらくプロパティはすでに存在します。

RDFaの詳細については、こちらをご覧ください：http: //www.alistapart.com/articles/introduction-to-rdfa/

于 2010-01-21T10:31:08.747 に答える
7

TLDR

テキストをイタリックにする正しい方法は、CSSに到達するまで問題を無視し、プレゼンテーションのセマンティクスに従ってスタイルを設定することです。状況に応じて、最初の2つのオプションが適切である可能性があります。最後の2つは間違っています。

長い説明

マークアップを作成するときは、プレゼンテーションについて心配する必要はありません。イタリックで考えないでください。セマンティクスの観点から考えてください。ストレス強調が必要な場合は、emです。メインコンテンツに接している場合は、asideです。多分それは太字になるでしょう、多分それは斜体になるでしょう、多分それは蛍光緑色になるでしょう。マークアップを作成するタイミングは関係ありません。

CSSにたどり着くと、サイト内で出現するすべての部分にイタリックを付けるのに意味のあるセマンティック要素がすでにある可能性があります。em良い例です。aside > ul > liただし、サイトのすべてを斜体で表示したい場合があります。マークアップについて考えることと、プレゼンテーションについて考えることを区別する必要があります。

DisgruntledGoatで述べられているようiに、HTML5ではセマンティックです。しかし、セマンティクスは私には少し狭いように思えます。使用はおそらくまれでしょう。

のセマンティクスは、em強調を強調するためにHTML5で変更されました。strong重要性を示すためにも使用できます。strongそれがあなたがそれをスタイリングしたい方法であるならば、太字ではなく斜体にすることができます。ブラウザのスタイルシートで制限されないようにしてください。リセットスタイルシートを使用して、デフォルトの範囲内で考えるのをやめることもできます。（いくつかの注意点がありますが。）

class="italic"悪い。使用しないでください。これはセマンティックではなく、柔軟性もまったくありません。プレゼンテーションにはまだセマンティクスがあり、マークアップとは異なる種類です。

class="footnote"マークアップセマンティクスをエミュレートしており、同様に正しくありません。脚注のCSSは、脚注に完全に固有であってはなりません。すべてのパーツのスタイルが異なると、サイトが乱雑に見えます。CSSクラスに変換できるいくつかの視覚的なパターンがページ全体に散らばっている必要があります。脚注とブロッククォートのスタイルが非常に似ている場合は、何度も繰り返すのではなく、類似点を1つのクラスにまとめる必要があります。OOCSSの手法を採用することを検討してください（以下のリンク）。

HTML5では、関心の分離とセマンティクスが大きくなっています。セマンティクスが重要なのはマークアップだけではないことに人々は気づかないことがよくあります。コンテンツセマンティクス（HTML）がありますが、プレゼンテーションセマンティクス（CSS）と動作セマンティクス（JavaScript）もあります。それらはすべて、保守性とDRYの維持のために注意を払うことが重要な、独自の個別のセマンティクスを持っています。

OOCSSリソース

于 2013-09-06T00:46:54.423 に答える
5

おそらく、それは特別な意味を持たず、その前のテキストから表示的に分離するためにイタリックでレンダリングする必要があるだけです。

特別な意味がないのに、なぜその前のテキストからプレゼンテーション的に分離する必要があるのでしょうか。この一連のテキストは、理由もなくイタリック体で示しているため、少し奇妙に見えます。

しかし、私はあなたの主張を受け入れます。デザイナーが意味のある変化を伴わずに視覚的に変化するデザインを作成することは珍しいことではありません。これはボックスで最もよく見られます。デザイナーは、スタイルやコンテンツの意味に関係なく、色、コーナー、グラデーション、ドロップシャドウのさまざまな組み合わせのボックスを含むデザインを提供してくれます。

これらは（関連するInternet Explorerの問題を伴う）かなり複雑なスタイルであるため、さまざまな場所で再利用されます。スタイルを再利用できるようbox-1に、、などのクラスを作成します。box-2

ただし、テキストをイタリックにする具体的な例は、些細なことで心配する必要はありません。セマンティックナッターが議論するために、そのような細目を残すのが最善です。

于 2010-01-21T10:38:26.187 に答える
3

HTMLの斜体テキストは、テキストを斜体で表示します。

<i>HTML italic text example</i>

強調要素と強力な要素の両方を使用して、特定の単語や文の重要性を高めることができます。

<p>This is <em>emphasized </em> text format <em>example</em></p>

強調タグは、テキスト内のポイントを強調する場合に使用する必要がありますが、必ずしもそのテキストをイタリック体にする場合には使用しないでください。

詳細については、このガイドを参照してください：HTMLテキストの書式設定

于 2015-11-29T04:23:56.630 に答える
2

要素は非セマンティックであるため、スクリーンリーダー、Googlebotなどのi場合は、ある種の透明である必要があります（spanまたはdiv要素と同様）。ただし、プレゼンテーション層と構造層を結合するため、開発者にとっては適切な選択ではありません。これは悪い習慣です。

em要素（strongおよび）は、プレゼンテーションではなく、常にセマンティックコンテキストで使用する必要があります。単語や文が重要な場合はいつでも使用する必要があります。前の文の例として、em「常に使用する必要がある」部分をより強調するために使用する必要があります。ブラウザはこれらの要素にいくつかのデフォルトのCSSプロパティを提供しますが、これらの要素の正しい意味を維持するために設計でデフォルト値が必要な場合は、デフォルト値をオーバーライドできます。

<span class="italic">Italic Text</span>最も間違った方法です。まず第一に、それは使用に不便です。次に、テキストを斜体にする必要があることを示しています。そして、構造層（HTML、XMLなど）は決してそれを行うべきではありません。プレゼンテーションは常に構造から分離しておく必要があります。

<span class="footnote">Italic Text</span>脚注の最良の方法のようです。プレゼンテーションを提案するものではなく、マークアップについて説明しているだけです。この機能で何が起こるかを予測することはできません。この機能で脚注が大きくなる場合は、クラス名を変更しなければならない可能性があります（コードにロジックを保持するため）。

したがって、重要なテキストがある場合は、それを使用するemかstrong、強調してください。ただし、これらの要素はインライン要素であり、テキストの大きなブロックを強調するために使用しないでください。

何かがどのように見えるかだけを気にし、余分なマークアップを常に避けるようにする場合は、CSSを使用してください。

于 2010-01-21T11:02:41.280 に答える
1

強調する<em>ときに使うのが答えだと思います。

自分でテキストを読んでいるときに、ポイントを強調するためにわずかに異なる音声を使用していることに気付いた場合は、スクリーンリーダーに同じことをさせたいので、それを使用する必要があります。<em>

すべての見出しがイタリックのGaramondで見栄えが良くなるとデザイナーが判断した場合など、純粋にスタイルの問題である場合<h2>は、HTMLに含める意味的な理由はなく、適切な要素のCSSを変更する必要があります。

<i>CSSのないレガシーブラウザを特にサポートする必要がない限り、を使用する理由はわかりません。

于 2010-01-21T11:05:10.797 に答える
0

OK、最初に注意することはそれです<i>非推奨になっているため、使用しないでください <i>非推奨ではありませんが、それでも使用することはお勧めしません。詳細については、コメントを参照してください。これは、あなたが指摘したプレゼンテーション層でのプレゼンテーションの維持に完全に反するためです。同様に<span class="italic">、型も壊れているようです。

これで、2つの実際の方法があります。<em>と<span class="footnote">。それは強調emの略であることを忘れないでください。単語、フレーズ、文を強調したい場合は、イタリックかどうかに関係なく、タグに貼り付けてください。他の方法でスタイルを変更したい場合は、CSSを使用してください。もちろん、タグにクラスを適用することもできます。特定の強調されたフレーズを赤で表示する場合は、クラスを指定してCSSに追加します。<em>em { font-weight: bold; font-style: normal; }<em>

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

他の理由でイタリックを適用している場合は、他のメソッドを使用して、セクションにクラスを指定します。そうすれば、HTMLを調整せずに、いつでもスタイルを変更できます。あなたの例では、脚注は強調されるべきではありません。実際、脚注のポイントは重要ではないが興味深いまたは有用な情報を示すことであるため、脚注は強調されるべきではありません。この場合、脚注にクラスを適用して、プレゼンテーション層（CSS）のクラスのように見せることをお勧めします。

于 2010-01-21T10:37:37.237 に答える
0

<em>インライン要素を強調するために使用すると思います。テキストのブロックなどのブロック要素にクラスを使用します。CSSであろうとなかろうと、テキストにはタグを付ける必要があります。セマンティクス用であろうと視覚的補助用であろうと、私はあなたがそれを何か意味のあるものに使用していると思います...

何らかの理由でテキストを強調する場合は、、<em>またはテキストをイタリック体にするクラスを使用できます。

時々ルールを破っても大丈夫です！

于 2010-01-21T14:17:15.297 に答える
-1

他のスタイルのないコンテンツでイタリック体の単語/文字が必要な場合は、<em>を使用します。また、コンテンツをセマンティックにするのにも役立ちます。

text-style複数のスタイルに適しており、セマンティックは必要ありません。

于 2010-01-21T10:37:50.560 に答える
-3

行う

  1. クラス属性にデータの性質を示す値を指定します（つまりclass="footnote"、良好です）

  2. ページのCSSスタイルシートを作成する

  3. 要素に割り当てるクラスにアタッチされるCSSスタイルを定義します

    .footnote { font-style:italic; }

しない

  1. <i>または要素を使用しないでください<em>。これらはサポートされておらず、データとプレゼンテーションを密接に結び付けています。
  2. プレゼンテーションルールを示す値をクラスに与えないでください（つまり、を使用しないでくださいclass="italic"）。
于 2012-02-22T17:42:03.643 に答える