そのHTML5のタグは合ってますか？間違えやすいタグ15選

セイト

2015.08.18

Web制作

（編集部注＊2014年2月5日に公開された記事を再編集したものです。）

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。

先日、HTML5カルタ大会という大会で優勝させていただきました。
いやあ、実に光栄です。

そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。

あ、でも皆さん誤解しないでくださいね。
この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。

どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。

【こちらもおすすめ】

HTML5がW3Cの勧告になるとは？Web技術の標準規格について

LIGブログ編集部

2014.10.31

その使い方合っていますか？間違えやすいタグ15選（HTML5対応）

“定義”に関わるタグ　<dt>,<dfn>,<abbr>

<dt>

“説明される言葉”を囲むタグ。以前は”定義する用語”を囲むためだけの限定的な役割だったけど、HTML5からはもっとざっくり使えるようになったようです。

<dfn>

“定義する用語”を囲むタグ。以前の<dt>の役割をこいつが担うことになりました。

<abbr>

“略語や頭文字”を囲むタグ。<dt>や<dfn>と組み合わせて使うことも可能。title属性を追加してそこに正式名称を書いたりして使う。

使用例1

<dl>
	<dt>Q1.「バナナはおやつに含まれますか？」</dt>
	<dd>A1.バナナはフルーツであり、デザートです。お菓子ではないので、おやつには含まれません。</dd>
</dl>

↓ブラウザ上での表示（LIGブログの場合）↓

Q1.　「バナナはおやつに含まれますか？」: A1.バナナはフルーツであり、デザートです。お菓子ではないので、おやつには含まれません。

※本ブログではそれぞれのタグにCSSスタイルがあたっているため、けっこう装飾されています。
実際はこのようにボーダーが入ったりしません。

使用例2

<dl>
	<dt><dfn><abbr title="Photoshop">PS</abbr></dfn></dt>
	<dd>PSとは<dfn>Photoshop</dfn>の略で、Adobe社の開発したすごいソフトである。
	<abbr title="フォトショップ">フォトショ</abbr>と呼ばれることもしばしば。</dd>
</dl>

↓ブラウザ上での表示（LIGブログの場合）↓

PS: PSとはPhotoshopの略で、Adobe社の開発したすごいソフトである。
フォトショと呼ばれることもしばしば。

ざっくり解説

ちなみに<abbr>,<dfn>は<dl>,<dt>と一緒に使わなきゃいけないわけではないです。
タグの中に入れたりしても全然OKです。

“上付き文字”と”下付き文字”のタグ　,

“上付き文字”を囲むタグ。

“下付き文字”を囲むタグ。

使用例

10の2乗 = 10<sup>2</sup>
水素分子 =　H<sub>2</sub>

↓ブラウザ上での表示（LIGブログの場合）↓
10の2乗 = 10²
水素分子 =　H₂

ざっくり解説

数式などを書きたいときに付けるタグ。
「どっちが上でどっちが下だっけ」と、ごっちゃにならないよう気を付けましょう。

“強調”に関するタグ　,,

ニュアンスを強調するタグ

重要なテキストを囲むタグ

文書内のキーワードや製品名など、他と区別したいテキストを囲むタグ

使用例1

1.もし<em>高校野球の女子マネージャーが</em>ドラッカーの『マネジメント』を読んだら
2.もし高校野球の女子マネージャーが<em>ドラッカーの『マネジメント』を</em>読んだら
3.もし高校野球の女子マネージャーがドラッカーの<strong>『マネジメント』</strong>を読んだら
4.もし高校野球の女子マネージャーがドラッカーの<b>『マネジメント』</b>を読んだら

↓ブラウザ上での表示（LIGブログの場合）↓
1.もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
2.もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
3.もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
4.もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら

1は「ドラッカーの『マネジメント』を読んだのは、高校野球の女子マネージャーなんだよ！変わった女子高生がいるもんだなあ」的なニュアンスの意味で、

2は「高校野球の女子マネージャーが、あのドラッカーの『マネジメント』を読んだんだよ！珍しい本のチョイスだよねえ」的なニュアンスの意味です。

3は『マネジメント』という言葉単体を重要視しています。文章のニュアンスうんぬんより、検索キーワードで『マネジメント』をひっかけたいということだけならこの使い方です。

4は『マネジメント』が書籍名であり、他のテキストとは違うということを伝えています。ただし、このキーワードがとりわけ重要であると言っているわけではありません。あくまで区別しているだけです。