HTMLで強調タグを使用する方法とタイミング

ウェブデザイン教育の早い段階で学ぶタグの1つは、「強調タグ」と呼ばれるタグのペアです。これらのタグが何であるか、そしてそれらが今日ウェブデザインでどのように使用されているかを見てみましょう。

XHTMLに戻る

HTML5が登場するずっと前にHTMLを学んだのであれば、おそらく太字と斜体の両方のタグを使用していたと思います。期待どおり、これらのタグは、要素をそれぞれ太字または斜体に変換しました。これらのタグの問題と、それらがなぜ新しい要素を優先して追い出されたのか（これについてはまもなく検討する）は、それらが意味要素ではないということです。これは、テキストに関する情報ではなく、テキストの外観を定義するためです。覚えておいてください、HTML（これらのタグが書き込まれる場所です）はすべて、ビジュアルスタイルではなく構造についてです！ビジュアルはCSSで処理され、Webデザインのベストプラクティスでは、Webページのスタイルと構造が明確に分離されている必要があります。これは、意味的ではなく、構造ではなく詳細を示す要素を使用しないことを意味します。これは、太字とイタリックのタグが一般的に強い（太字の）タグと強調（イタリックのタグ）に置き換えられている理由です。

そして

強く強調する要素は、あなたのテキストに情報を追加し、内容が異なると扱われるべき内容を詳述し、その内容が話されるときに強調されます。これらの要素は、過去に太字や斜体を使用したのと同じように使用します。開始タグと終了タグでテキストを囲むだけです（ そして 強調のために そして 強く強調するため）、囲まれたテキストが強調されます。

これらのタグをネストすることはできますが、どちらが外部タグであるかは関係ありません。下記は用例です。

このテキストは強調されています ほとんどのブラウザで斜体で表示されます。

このテキストは強く強調されています ほとんどのブラウザでは太字で表示されます。

これらの例では、HTMLで視覚的な表情を指定するわけではありません。はい、デフォルトの外観は タグは斜体になり、 太字になりますが、これらの外観はCSSで簡単に変更できます。これは両方の世界の中で最高です。実際の線を越えたり、構造やスタイルを混ぜたりすることなく、デフォルトのブラウザスタイルを利用して、ドキュメント内のイタリック体またはボールド体のテキストを取得することができます。あなたはそれが欲しいと言って テキストを太字にするだけでなく、赤色にすることもできます。これをCSSに追加することもできます

強い{ 赤色;}

この例では、太字のfont-weightのプロパティーはデフォルトであるため、追加する必要はありません。しかし、それを偶然にしたくない場合は、いつでも追加することができます：

強い{ font-weight：太字; 赤色;}

今では、太字（および赤色）のテキストを持つページを持つことは保証されていますが、 タグが使用されます。

重点を重ねる

私が1年以上気づいたことの一つは、重点を置くと何が起こるかということです。例えば：

このテキストは、 太字とイタリック体 その中のテキスト

この行は、太字の斜体のテキストを含む領域を生成すると考えられます。時にはこれが実際に起きることもありますが、ブラウザの中には、実際のテキストに最も近い2つの強調スタイルのうちの2番目のスタイルのみを尊重し、イタリック体としてのみ表示するブラウザもあります。これが私が強調タグを二重にしない理由の1つです。

この「倍増」を避ける別の理由は、文体的な目的のためです。あなたが設定したいトーンを伝えるのに十分な場合、強調の1つの形式。テキストを目立たせるために太字、斜体、色付け、拡大、および下線を付ける必要はありません。そのテキストは、それらの異なる種類の強調のすべてが華やかになります。強調表示タグやCSSスタイルを使用して強調表示し、過度に過ごさないように注意してください。

太字と斜体に関する注意

1つの最終的な考え - 大胆な（）とイタリック体（）タグを強調要素として使用することは推奨されていません。これらのタグを使用してテキストのインライン領域をスタイルするWebデザイナーもいます。基本的には、 素子。タグは非常に短いため、この方法でこれらの要素を使用することはお勧めできません。いくつかのサイトで太字またはイタリック体のテキストを作成せずに、他の種類の視覚的スタイリング用のCSSフックを作成するために使用されているサイトを見てみましょう。

Jennifer Kryninのオリジナル記事。ジェレミージラール編集：12/2/16