テキストをイタリックにする正しい方法は何ですか？私は次の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>。しかし、その支持者は泣き叫ぶ。もしあなたがそれを大胆にしたかったなら、後であなたのすべてのイタリック体のテキストを変更する方がはるかに簡単です。しかし、そうではありません。テキストを太字にした「italic」というクラスが残ってしまうからです。さらに、なぜウェブサイトのすべての斜体テキストを変更したいのか、少なくともこれが望ましくない、または必要でない場合を考えることができる理由は明らかではありません。

<span class="footnote">

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

1. すべてのテキストがセマンティックマークアップを保証するのに十分な意味を持つわけではありません。たとえば、ページの下部にある斜体のテキストは本当に脚注ですか？それとも余談ですか？または完全に別の何か。おそらく、特別な意味はなく、イタリック体でレンダリングして、前のテキストからプレゼンテーションを区別するだけです。

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

概要

イタリック体を作成したいという欲求がセマンティックな意味を持たせることを意図していない多くの場合、セマンティクスの要件は非常に負担になるようです。

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

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

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

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

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

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

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

私は専門家ではありませんが、本当にセマンティックになりたい場合は、語彙（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/

TLDR

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

より長い説明

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

CSSに到達した時点で、サイト内のすべての出現箇所にイタリックを付けるのに意味のあるセマンティック要素がすでにある場合があります。em良い例です。しかし、多分あなたはすべてaside > ul > liをイタリック体であなたのサイトにしたいでしょう。マークアップについて考えることと、プレゼンテーションについて考えることを分ける必要があります。

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

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

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

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

HTML5では、懸念事項とセマンティクスの分離が大きくなっています。多くの場合、セマンティクスが重要なのはマークアップだけではないことを人々は認識していません。コンテンツセマンティクス（HTML）がありますが、プレゼンテーションセマンティクス（CSS）と動作セマンティクス（JavaScript）もあります。それらはすべて、保守性とDRYを維持するために注意を払うことが重要な独自の個別のセマンティクスを持っています。

OOCSSリソース

• オブジェクト指向CSS
• オブジェクト指向CSS（OOCSS）の概要
• オブジェクト指向のCSSを書く方法
• オブジェクト指向CSS（OOCSS）の概要
• オブジェクト指向CSS：何を、どのように、そしてなぜ
• オブジェクト指向のCSSに飛び込む

おそらく、特別な意味はなく、イタリック体でレンダリングして、前のテキストからプレゼンテーションを区別するだけです。

それが特別な意味を持たない場合、なぜそれをその前のテキストから表現的に分離する必要があるのですか？この一連のテキストは少し奇妙に見えます。理由はありません。

でも私はあなたの言い分を理解します。デザイナーが視覚的に変化するデザインを、意味のある変化なしに作成することは珍しいことではありません。私はこれをボックスで最も頻繁に見ました。デザイナーは、色やコーナー、グラデーション、ドロップシャドウのさまざまな組み合わせのボックスを含むデザインを提供します。スタイルと内容の意味は関係ありません。

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

一部のテキストをイタリックにする具体的な例は、あまりにも簡単ですが、心配する必要はありません。セマンティックナッターが議論するためには、そのような特徴点をそのままにしておくのが最善です。

HTMLイタリックテキストは、テキストをイタリック形式で表示します。

<i>HTML italic text example</i>

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

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

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

詳しくは、このガイドをご覧ください：HTMLテキストのフォーマット

i要素等、ので、スクリーンリーダーのために、Googlebotの非意味論的である、それは、（ちょうどのような透明のいくつかの種類でなければならないspan、またはdiv要素）。ただし、プレゼンテーションレイヤーと構造レイヤーを結合するため、開発者にとっては適切な選択ではありません。これは悪い習慣です。

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

<span class="italic">Italic Text</span>最も間違った方法です。まず、使い勝手が悪い。第二に、それはテキストがイタリック体であるべきであることを示唆しています。また、構造レイヤー（HTML、XMLなど）がこれを行うべきではありません。プレゼンテーションは常に構造から切り離しておく必要があります。

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

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

見た目だけを気にし、余分なマークアップを常に避けようとする場合は、CSSを使用してください。

強調したい<em>時に使うのが正解だと思います。

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

デザイナーがすべての<h2>見出しをイタリック体のGaramondで見栄えよくするなど、それが純粋にスタイルのものである場合、HTMLに含める意味上の理由はなく、適切な要素のCSSを変更するだけです。

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

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

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

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

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

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

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

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

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

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

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

行う

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

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

3. 要素に割り当てるクラスに関連付けられているCSSスタイルを定義します

   .footnote { font-style:italic; }

しない

1. <i>or <em>要素は使用しないでください。これらはサポートされておらず、データとプレゼンテーションを近づけすぎます。
2. クラスに表示規則を示す値を指定しないでください（つまり、を使用しないでくださいclass="italic"）。