HTML強調タグ

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

XHTMLに戻る

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

< strong> < em>

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

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

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

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

強い{
赤色;
}

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

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

これで、タグが使用されている場所で太字(および赤色)のテキストを含むページがあることが保証されます。

重点を重ねる

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

このテキストには、 ボールド体とイタリック体 の両方のテキストが含まれている必要があります。

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

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

太字と斜体に関する注意

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

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