主なインライン要素（span、strong、em、b）の仕様と使い方

カテゴリ：HTML編

インライン要素は終了タグの後が改行されない要素です。

span要素

span要素自体は特別な意味を持たないインライン要素で、一般的に文字の装飾などに使用します。
特にHTML5ではfont要素は廃止されたため、例えば文字の色を変更する場合、以下のようにspanタグで囲み、cssを指定します。

<span style="color: red;">この文字列の色を赤に変更します。</span>

この文字列の色を赤に変更します。

また、以下のようにページ送りなどにも使用できます。

<span class="prev">前のページ</span><span class="next">次のページ</span>

※但し、横並びのリストに使用する場合は、spanではなく、リスト要素（ul li）をCSSでインライン要素として指定する方が適切です。

基本的にはCSSと組み合わせて、特別な意味を持たない文字の装飾用として使用してください。

span要素は単独では意味はありませんが、class、lang、dirなどのグローバル属性とともに使用すると便利です。それはその子供たちを表しています。

strongは以下の例のように、文章中の意味として強調したい部分（重要な箇所）を表します。

高血圧の患者には降圧薬を投与しますが、<strong>気管支喘息の既往歴のある患者には禁忌</strong>であるため注意してください。

高血圧の患者には降圧薬を投与しますが、気管支喘息の既往歴のある患者には禁忌であるため注意してください。

strong要素は、その内容の重要性、重大性、または緊急性を示します。
重要：strong要素は、見出し、キャプション、段落に使用して、より重要な部分、より陽気な部分、または単なる定型文となる部分を区別することができます。

emもstrongと同様に強調を表しますが、HTML5では特にアクセントの強調に使用されます。
同じ文章でもどこを強調するかで意味が異なってくる場合があります。

例えば、

明日歩いて来ます。

という文章があったとします。
しかし以下のように、前にある文章により意味（強調したい箇所）が異なってきます。

彼は今日用事ができたため、<em>明日</em>歩いて来ます。

（今日ではなく「明日」であることを伝えたい）

彼は車が故障したため、明日<em>歩いて</em>来ます。

（車ではなく「歩いて」行くことを強調したい）

em要素は、内容の語勢（アクセント）強調を表します。
特定のコンテンツの語勢のレベルは、その祖先要素の数によって与えられます。
語勢強調の配置は、文章の意味を変えます。従って、要素はコンテンツの不可欠な部分を形成します。このように語勢が使用される正確な方法は言語によって異なります。

b要素は特別な意味を持たない、文字の太字（装飾、見栄え）として使用される要素です。
一般的には、特定の単語（キーワード）を注意を引かせるために太字にする場合に使用します。

HTML5の仕様については<b>W3Cの勧告</b>も参照してください。

HTML5の仕様についてはW3Cの勧告も参照してください。

あくまでも文字の強調（太字）のための要素であり、意味的な強調にはstrong要素を使用します。

但し、多様し過ぎるとどの語句に注意を引かせたいのか分からなくなるだけではなく、読みづらくなるため注意が必要です。これは、strongやemも同様です。

b要素は、文書要約のキーワード、レビューの製品名、実行可能な言葉、双方向テキスト駆動型ソフトウェア、記事の前置き部分のような、余分な重要性を伝えずに、実用目的のために注意を引いているテキストの範囲を表します。

公開日時：2018年01月01日 19:59:17
最終更新日時：2022年03月12日 07:15:53