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

“引用文”に関するタグ　<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>。といった具合です。

まとめ

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。