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

その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>。といった具合です。

まとめ

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

この記事のシェア数

819

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。