span要素
初期値はインライン要素です。意味付けはありません。見出し要素（h1〜h6）段落要素（ｐ）などの要素内のテキストを部分的に装飾する場合に使用します。a要素内でも使用できます。span要素内にspan要素を入れ子にすることもできます。span要素と同じ意味付けがなく、ブロックレベル要素なのはdiv要素です。
<p>テキストの<span>この部分</span>を赤字にします</p>
/* 段落のみ赤字に指定 */
p span{
color: FF0000;
}
span要素はブロックレベル要素の親要素に指定することはできません。下記はすべて間違った使い方です。
<!-- 間違った使い方 -->
<span><h1>見出し</h1></span>
<span><p>段落</p></span>
<!-- spanではなくdivを使うのが正しい -->
<div><h1>見出し</h1></div>
<div><p>段落</p></div>
small要素
初期値はインライン要素です。HTML5以前では「小さい文字」という意味付けでしたがHTML5からは「細目」という意味付けになりました。「細目」とは細かい点について規定してある項目という意味です。WEBサイトでは主にフッター内のコピーライトで使用します。コピーライトで使用する場合Pタグの入れ子で使用します。
<!-- コピーライトで指定する場合 -->
<p><small>© 2016 WEB MANABU</small></p>
strong要素
strong要素はブラウザのデフォルトCSSで「font-weight: bold;」が設定されているため太字にしたい時に使用しているサイトがあります。
しかしstrong要素は「強調」という意味付けがあり、多用するとSEO対策で逆効果になってしまう場合があります。太字にしたい場合はspanタグで囲みCSSで「font-weight: bold;」を指定するほうが良いでしょう。
<!-- 間違った太字の指定 -->
<p>ここを<strong>太字に</strong>してください。</p>
<!-- 正しい太字の指定。太字にする時はCSSでfont-weight: bold;で指定 -->
<p>ここを<span>太字に</span>してください。</p>
em要素
em要素は一部のブラウザのデフォルトCSSで「font-style: italic;」が指定されており斜体になる場合があります。
またHTML5以前は「やや強調」という意味付けがあったため、strong要素とセットで古いSEO対策で利用されていました。現在HTML5ではem要素は発声の「アクセントととして強調」という意味になっていてSEO対策としての効果はありません。斜体に設定する場合もspan要素で囲み、CSSで「font-style: italic;」で装飾するほうが良いでしょう。
<!-- 間違った斜体の指定 -->
<p>ああああああああ<em>注目</em>あああああ</p>
<!-- 正しい斜体の指定 CSSで、font-style: italic; で指定 -->
<p>ああああああああ<span>注目</span>あああああ</p>
SEO対策としてのstrong要素とem要素の状況
検索サイトはstrong要素を検索順位決定の重要な要素としては扱っていません。多用したとしても効果はほとんどなく、逆に多用すると、どのテキストが強調したい語句なのかの判断ができずSEO対策として逆効果になる場合があります。使用する場合もstrong要素で囲む語句は1つぐらいと最低限にしぼり使うほうが良いでしょう。
em要素はHTML5から「発声のアクセントの強調」となっているため多用してもSEO対策の効果はまったくありません。
strong要素、em要素とも絶対に使用しなくては行けないタグではありません。無理に使用せず、ユーザーにとって自然な文章になるようにタグを使い分けることをオススメします。
まとめ
- テキストやインライン要素の部分装飾はspanタグで囲みCSSで装飾する
- span要素は意味付けをしない
- strong要素を太字にするために使用しない
- em要素を斜体にするために使用しない