コーディング
本気で学ぶ！HTML入門#10
【HTML入門】強調を表すem要素と重要を表すstrong要素
「HTML入門」10回目ですね。今回もテキスト関連のインライン要素（フレージング・コンテンツ）を学習しましょう。今回は強調を表す「em要素（<em>）」、重要を表す「strong要素（<strong>）」について見ていきましょう。
これらのインライン要素（フレージング・コンテンツ）は、<p>などのブロックレベル要素の中で使います。
目次
強調を表すem要素
em要素は、<em> 〜 </em> で、囲まれた範囲が強調されている事を表す要素です。
- 概要
-
em要素は、emphasisの略で、
<em>〜</em>で囲まれた範囲が強調であることを示し、一般的なブラウザでは「斜体」で表示される。 - コンテンツ・カテゴリ
- コンテンツ・モデル
- フレージング・コンテンツ
- 配置できる場所
- フレージング・コンテンツが配置できる場所
- ブロックレベル要素・インライン要素
- インライン要素
要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。
属性
em要素は、グローバル属性が使えます。
属性については下記の記事を御覧ください。
使い方
次に紹介するstrong要素と使い分けが難しいのですが、em要素はあくまで強調したいテキストを囲みます。強調することによって意味や文脈を変えるときに使えます。
サンプル1
もし他の誰でもなく「僕」が海賊王になることを強調したければ
<p>
この<em>僕</em>が海賊王になる
</p>表示例
See the Pen html-vol10 by Qlio (@qlio) on CodePen.23853
もし、他のどの職業でもなく僕が「海賊王」になることを強調したければ
サンプル2
<p>
この僕が<em>海賊王</em>になる
</p>表示例
See the Pen html-vol10 by Qlio (@qlio) on CodePen.23853
このように、強調することで意味や、文脈を変えることができます。
重要であることを表すstrong要素
strong要素はHTML5から多少意味が変更になりました。HTML5では、<strong> 〜 </strong> で囲まれた範囲が重要であることを表す要素になります。HTML5までのstrong要素は「より強い強調」という意味で使われていました。
- 概要
-
strong要素は、
<strong>〜</strong>で囲まれた範囲が重要であることを示す。一般的なブラウザでは太字で表示される。
※.HTML5より前のバージョンではより強い強調という意味で使われていた - コンテンツ・カテゴリ
- コンテンツ・モデル
- フレージング・コンテンツ
- 配置できる場所
-
- フレージング・コンテンツが配置できる場所
- フロー・コンテンツが配置できる場所
- ブロックレベル要素・インライン要素
- インライン要素
要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。
属性
strong要素は、グローバル属性が使えます。
属性については下記の記事を御覧ください。
使い方
strong要素は、「ここは押さえといてほしい」というような重要な箇所に使います。
サンプル
<p>
HTMLは<strong>文章構造を示す</strong>言語だ。
</p>表示例
See the Pen html-vol10 by Qlio (@qlio) on CodePen.23853
【演習】em要素とstrong要素を使ってみる
では前回のHTMLにem要素やstrong要素を付けていきましょう。
自力でやってみたい人は、以下の文字列の範囲で、強調タグ（<em>）や重要タグ（<strong>）を考えて付けてみて下さい。
範囲：文字列「サンプルカフェは、」から文字列「たっぷり詰まったカフェです。」
何をどのように伝えたいかによってタグを付ける箇所が変わるので、絶対的な正解はないです。だからこそ難しいのですが考えてマークアップしてみてください。また、「難しいなぁ」という方は、下の編集手順を参考にしてみて下さい。
完成イメージ
See the Pen html-vol10 by Qlio (@qlio) on CodePen.23853
編集手順
- 前回作った「index.html」をテキストエディタを開いて下さい。
-
文字列「厳選された」に強調タグ（
<em>を、文字列「最高のコーヒーをゆったりと楽しんで頂きたい」には重要タグ（<storong>を付けて下さい。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルカフェ</title> </head> <body> <h1>サンプルカフェ</h1> <p>大阪府豊中市にある架空のカフェ</p> <h2>こだわり</h2> <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。<br> <em>厳選された</em>とっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「<strong>最高のコーヒーをゆったりと楽しんで頂きたい</strong>」そんな想いがたっぷり詰まったカフェです。</p> </body> </html> - 上書き保存し、ブラウザで確認しましょう。
See the Pen html-vol10 by Qlio (@qlio) on CodePen.23853
できましたか？
僕は、上記のように強調タグと重要タグを使いまいたが、「伝えたいものが何か」によって変わりますので、上の例が絶対だとは思わないでください。
まとめ
今回も、比較的によく使うテキスト関連のインライン要素を紹介しました。
em要素や、strong要素は、よくごっちゃになるのですが下記を意識して使い分けましょう。
- em要素：強調することで文脈や意味を変えたい
- strong要素：重要であることを表したい
以上です。次回ももう少し、テキスト関連のインライン要素を見ていきましょう。
