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

せいと


そのHTML5のタグは合ってますか?間違えやすいタグ15選
(編集部注*2014年2月5日に公開された記事を再編集したものです。)

こんにちは。フロントエンドエンジニアのせいとです。

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

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

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

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


【こちらもおすすめ】

その使い方合っていますか?間違えやすいタグ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>と一緒に使わなきゃいけないわけではないです。
<p>タグの中に入れたりしても全然OKです。

“上付き文字”と”下付き文字”のタグ <sup>,<sub>

<sup>

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

<sub>

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

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

↓ブラウザ上での表示(LIGブログの場合)↓
10の2乗 = 102
水素分子 = H2

ざっくり解説

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

“強調”に関するタグ <em>,<strong>,<b>

<em>

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

<strong>

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

<b>

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

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

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

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

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

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

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

ざっくり解説

よく混同しがちなタグですが、使いどころが微妙に違うんですよね……。
SEOを気にして囲むなら、<strong>一択です。
<em>,<b>はSEOには直接関係がなく、文章内の本当に細かい部分の違いなので、あえて使うほどのタグではないかと思います。

“引用文”に関するタグ <blockquote>,<q>

<blockquote>

引用文のまとまりを囲むタグ

<q>

引用のテキストを囲むタグ

使用例1
<blockquote cite="http://www.sokusenryoku.me/">
	<p>ぼくらはなぜ働くのでしょうか。ご飯をたべるため? それとも、誰かの役に立つためでしょうか? その答えは、人の数ほどあるでしょう。<br>
	しかし、一つだけ確実に言えることは、ぼくらは地球という太陽系第三惑星をみんなで共有(シェア)しているということです。</p>
	<small>『世界一即戦力な男・菊池良から新卒採用担当のキミへ』より抜粋</small>
</blockquote>

↓ブラウザ上での表示(LIGブログの場合)↓

ぼくらはなぜ働くのでしょうか。ご飯をたべるため? それとも、誰かの役に立つためでしょうか? その答えは、人の数ほどあるでしょう。
しかし、一つだけ確実に言えることは、ぼくらは地球という太陽系第三惑星をみんなで共有(シェア)しているということです。

『世界一即戦力な男・菊池良から新卒採用担当のキミへ』より抜粋

使用例2
<q>「我思う、ゆえに我あり」</q>とは、哲学者デカルトが自著『方法序説』の中で提唱した命題である。

↓ブラウザ上での表示(LIGブログの場合)↓
「我思う、ゆえに我あり」とは、哲学者デカルトが自著『方法序説』の中で提唱した命題である。

ざっくり解説

<blockquote>は長めの引用文のまとまりを囲めるので、中に<h1>~<h6>や<p>タグなどを含んでマークアップできます。
一方<q>は短文を引用する際に使うのに向いています。
また、cite属性を用いて情報源元URLを指定することもできます。(なくてもOK)

テキストに“ルビ”を振るタグ <ruby>,<rt>,<rp>

<ruby>

ルビのテキスト、ルビを振りたいテキスト、およびそれらのタグ全体を囲むタグ

<rt>

ルビのテキストを囲むタグ

<rp>

ルビのテキストを囲む括弧等の記号を囲むタグ(ruby非対応ブラウザ向け)

使用例1
<ruby>株式会社<rp>(</rp><rt>カブシキガイシャ</rt><rp>)</rp> LIG<rp>(</rp><rt>リグ</rt><rp>)</rp></ruby>

↓ブラウザ上での表示(LIGブログの場合)↓
・ruby対応ブラウザでの表示

株式会社カブシキガイシャ LIGリグ

・ruby非対応ブラウザでの表示
株式会社(カブシキガイシャ) LIG(リグ)

ざっくり解説

<rt>はルビのテキストを囲み、<ruby>は全体を囲むタグです。
ルビのテキストに括弧を付け、その括弧を<rp>で囲むと、ruby対応ブラウザ上では<rp>で囲まれた部分は非表示になり、ruby非対応ブラウザ上では表示される仕様です。

打消し線を引くタグ <s>,<del>

<s>

修正されたテキストを囲むタグ

<del>

削除されたテキストを囲むタグ

使用例1
LIGブログでは、世界一うざいページトップボタンの下に広告枠を用意しております。
今回特別にこの広告枠を<s>定価350,000円(1ヶ月)</s> → 特別価格10,000円(1ヶ月)でご提供させていただきます。

↓ブラウザ上での表示(LIGブログの場合)↓
LIGブログでは、世界一うざいページトップボタンの下に広告枠を用意しております。
今回特別にこの広告枠を定価350,000円(1ヶ月) → 特別価格10,000円(1ヶ月)でご提供させていただきます。

使用例2
LIGブログでは、世界一うざいページトップボタンの下に広告枠を用意しております。
今回特別にこの広告枠を<del>定価350,000円(1ヶ月) → 特別価格10,000円(1ヶ月)でご提供させていただきます。</del>
※現在は販売終了しました。

↓ブラウザ上での表示(LIGブログの場合)↓
LIGブログでは、世界一うざいページトップボタンの下に広告枠を用意しております。
今回特別にこの広告枠を定価350,000円(1ヶ月) → 特別価格10,000円(1ヶ月)でご提供させていただきます。
※現在は販売終了しました。

ざっくり解説

こいつらは見た目は同じですが、“修正”なのか“削除”なのかで使い分けます。
現在の情報を以前の情報と比較して見てほしい修正部分 = <s>。
削除したということをユーザーにきちんと伝えるためにあえて見せたい部分 = <del>。といった具合です。

まとめ

いかがだったでしょうか。
けっこうマイナーなやつも出てきたかと思います。でもまあ使えるっちゃ使えるので、ここだ!と思ったらぜひ実践で使用してみてください!

せいと
この記事を書いた人
せいと

フロントエンドエンジニア

2012年入社

この記事を読んだ人におすすめ

こちらもおすすめ

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座

  • 著者草野 あけみ
  • 価格¥ 2,678(2016/01/15 10:49時点)
  • 出版日2015/11/06
  • 商品ランキング3,362位
  • 単行本(ソフトカバー)384ページ
  • ISBN-104798142204
  • ISBN-139784798142203
  • 出版社翔泳社