今回は記事の中で強調したい単語や重要性を伝えるための要素を解説したいと思います。
今回紹介する要素を使用することで、文字に一定の装飾が与えられます。
しかし、装飾は近年CSSで行うことが推奨されています。
HTMLで文字や文章を装飾することは推奨されてないんだ。
だから装飾はCSSで行うようにしましょう。
ではどのような時にこの強調や重要性を伝える要素を使用すれば良いのか。
それぞれの使い方について初心者向けに解説していきます。
これらはSEO対策でも、必要とされている内容になるので覚えておきましょう。
強調を表す要素（em要素）
強調する要素については以前の記事で少し解説したem要素を使っていきます。
以前の記事を参照したい方は以下のリンク先を参照下さい。
以下のような記事の文章があったとします。
美味しいラーメン店の名前はぱくぱく軒です。
いつもようにこれは文章（段落）なので、P要素を使用します。
表現すると以下の通りです。
HTML
<p>美味しいラーメン店の名前はぱくぱく軒です。</p>
そしてP要素内にem要素を入れることが出来るか、コンテンツモデルを調べていきます。
調べ方については以下の以前の記事（以下リンク先）を参考にしてみて下さい。
P要素はフレージングモデルなので、em要素を入れることができます。
それでは先程の文章にem要素を入れます。
今回はぱくぱく軒を強調したいので、ぱくぱく軒をem要素で囲みます。
表現すると以下の通りです。
HTML
<p>美味しいラーメン店の名前は<em>ぱくぱく軒</em>です。</p>
それでは出来栄えを確認してみましょう。
比較表示イメージ
いかがですか？ぱくぱく軒の文字が斜体になっていることが確認できると思います。
このように、em要素で記述された文字は斜体となってブラウザ上に出力されます。
しかし以前も解説しましたが、斜体を使いたいからem要素を使用することはやめましょう。
HTMLは文章や文字の装飾の為に使用することは、ウェブサイトのレイアウト崩れに繋がってしまいます。
文章や文字については、CSSを使用して装飾していきましょう。
重要を表す要素（strong要素）
重要を表す要素についてはstrong要素を使っていきます。
以下のような記事の文章があったとします。
（先程の文章使い回しですみません。。。）
美味しいラーメン店の名前はぱくぱく軒です。
先程同様に文章なので、P要素を記述します。
HTML
<p>美味しいラーメン店の名前はぱくぱく軒です。</p>
そして今回は、ぱくぱく軒が重要だとして記述します。
ここでstrong要素の登場です。
表現するを以下の通りです。
HTML
<p>美味しいラーメン店の名前は<strong>ぱくぱく軒</strong>です。</p>
それでは出来栄えを確認してみましょう。
比較表示イメージ
いかがでしょうか。
em要素では斜体で出力されたのに対し、strong要素では太字になっています。
しかしシツコイ様ですが、太字の装飾目的でstrong要素を使うのはやめましょうね。
HTMLは文章や文字の装飾の為に使用することは、ウェブサイトのレイアウト崩れに繋がってしまいます。
文章や文字については、CSSを使用して装飾していきましょう。
em要素とstrong要素の使用用途の違い
ここでem要素とstrong要素の用途の違いについて解説します。
em要素・・・・アクセント：文章の意味を変えたい箇所）
strong要素・・・重要性：重要だと伝えたい単語・文章の箇所）
以下のような文章を作成した場合に、『アクセント』と『重要性』でニュアンスを変えることができます。
ぱくぱくブログはコーディングの基本を解説します。
まずはアクセント（em要素）について。
例えば上の文章内の『ぱくぱくブログ』にem要素をコーディングした場合は『ぱくぱくブログ』にアクセントを加えることができます。
そして重要性（strong要素）について
上の文章内で重要だと思う箇所にstrong要素をコーディングします。
私の場合だと『コーディング』ですかね。
SEO対策について
em要素とstrong要素の使用によっての検索エンジンの評価に差はありません。
なので、基本的にはstrong要素を使用しておけば問題はありません。
そしてstrong要素の太字や文字色などの装飾については、CSSで行っていきましょう。
まとめ
このように結論としては人それぞれの表現の自由になります。
em要素とstrong要素をうまく使って文章のニュアンスをユーザーに伝えていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
