ブログでよく使用するHTMLタグ
今回の記事では、LIGブログで実際によく使用されているHTMLタグを中心に紹介していきます。
なお、LIGブログ上の表示はデザインの都合により、CSSで特別な装飾を指定されているタグもあります。その場合は他のブログサービスでは同じように表示されるわけではありませんので、あらかじめご了承ください。
テキスト関連のタグ
まずはテキスト関連のタグを12種類紹介していきます。
1. <p>
段落を意味する文字列に使用されます。
- ■使用例
<p>ここからここまでが1つの段落です。</p><p>ここから次の段落です。</p>
■表示例
ここからここまでが1つの段落です。
ここから次の段落です。
2. <b>
読む人の注意をひきたいテキストに対して使うタグで、慣例的に太字にする場合に用いられます。
※HTML4.01では単に「太字」という意味でしたが、HTML5になって「セマンティック上の意味を持たない太字」という意味に変わりました。人間にとっては強調されるが、コンピュータにとっては強調されない、というニュアンスになります。
- ■使用例
<b>人間の注意をひきたいので太字にしますが、</b>セマンティック上の意味はありません。
■表示例
人間の注意をひきたいので太字にしますが、セマンティック上の意味はありません。
3. <i>
周囲と区別したいテキストに対して使うタグで、慣例的にイタリック体にする場合に用いられます。また、<b>タグと同じくセマンティック上の意味を持ちません。
しばしば「斜体」と同じものだと勘違いをされますが、イタリック体とはアルファベット用の書体の1つで、欧米で船の名前などを表示させるときに使われるなどの特徴があります。対して斜体とは、文字を機械的に斜めに表示させる「Oblique」を表します。
- ■使用例
<i>単に斜めに表示させたのではなく、筆記体に似た装飾の書体がイタリックです。</i>
■表示例
単に斜めに表示させたのではなく、筆記体に似た装飾の書体がイタリックです。
4. <u>
テキストに下線を引くときに使うタグで、セマンティック上の意味を持ちません。
- ■使用例
テキストに<u>下線を引きたい</u>ときに使います。
■表示例
テキストに下線を引きたいときに使います。
5. <s>
「（過去は正確だったが）すでに正確ではなくなった・関係なくなった」という意味で、テキストに取り消し線を引くときに使うタグです。
「削除された」あるいは「訂正をした」という意味では使いません。参考として提示しておくような過去の情報に対して使用するのが望ましいでしょう。
- ■使用例
<s>通常価格:9,800円</s><p>特別価格:2,980円</p>
■表示例
通常価格:9,800円特別価格:2,980円
6. <del>
文章の取り消し、あるいは「削除された」「訂正をした」情報をテキストとして残しておきたい場合の取り消し線をひくときに使うタグです。見た目は<s>タグと一緒ですが、意味は全く違うので注意が必要です。
- ■使用例
<del>無料プレゼントの申込はこちらから</del><p>現在申込は終了しております。</p>
■表示例
無料プレゼントの申込はこちらから現在申込は終了しております。
7. <em>
強調すべきテキスト、コンテンツにおける必要不可欠とされる情報に対して使うタグです。見た目上の差異がなかったとしても、コンピュータには「強調されている文」として認識されます。
- ■使用例
<em>強調したい。もっと、強調したい。</em>
■表示例
強調したい。もっと、強調したい。
（※LIGブログ上の表示では、見た目の差異はありません。）
8. <strong>
特に強調すべきものに対して使用するタグです。HTML5になってから、「重ねて使用することでより重要性を高める」という意味が追加されました。
重ねても見た目は変わらないのですが、コンピュータ的にはコンテンツの重要性の相対的なレベルを区別することができます。
- ■使用例
<strong>強調したい、<strong>もっともっと強調したい。</strong></strong>
■表示例
強調したい、もっともっと強調したい。
9. <small>
免責事項、規約文書、法的制約、警告、コピーライトなどの細目や注釈を表示するときに使用するタグです。
HTML4.01では「文字を小さくする時に使うタグ」という扱いでしたが、HTML5になって全く意味が違う定義のタグとなりました。ちなみに、同じ仲間だと思われていた<big>タグは、HTML5では廃止となりました。
- ■使用例
<small>© 2014 LIG inc.</small>
■表示例
© 2014 LIG inc.
10. <ruby>、<rt>、<rp>
テキストにルビをふるときに使用するタグで、主に発音のガイドや読み方のガイドなどに使用されます。<ruby>タグで囲った部分がルビをふる範囲、<rt>タグで囲った部分がルビのテキストとなります。
また、ブラウザによってはルビが表示されず<rt>タグのテキストがそのまま表示されてしまいます。そのフォローの意味で、<rt>タグで囲っている部分を<rp>タグで囲みます。もしルビが表示できなかった場合は、テキストに括弧がつくようになります。
- ■使用例
本気と書いて<ruby>本気<rp>（</rp><rt>マジ</rt><rp>）</rp></ruby>と読みます。
■表示例（ルビ対応ブラウザ）
本気と書いて本気と読みます。
■表示例（ルビ非対応ブラウザ）
本気と書いて本気（マジ）と読みます。
11. <hr>
段落レベルの文章の意味上の区切りを意味します。見た目上は水平線がひかれ、終了タグは不要です。
HTML4.01では単に「水平線をひく」という定義のタグでしたが、HTML5においてはテーマ・話題の区切りを表す要素となり、水平線という定義ではなくなりました。
- ■使用例
<p>朝からずっと考えていたことがある。俺の好きな食べ物の話だ。</p>
<p>ラーメンとうどん、本当に美味しいのはどっちなのだろうか。</p>
<hr>
<p>久しぶりに新宿の街に来たが、相変わらずネオンが眩しい。</p>
■表示例
朝からずっと考えていたことがある。俺の好きな食べ物の話だ。
ラーメンとうどん、本当に美味しいのはどっちなのだろうか。
久しぶりに新宿の街に来たが、相変わらずネオンが眩しい。
12. <br>
改行するために使うタグです。こちらも終了タグは不要です。ただし“見た目を整えるため”ではなく、改行が実際にコンテンツの一部となる場合に使用します。
見た目を整えるために改行したいときは、<p>タグを使いましょう。
- ■使用例
<p>
株式会社LIG<br>tel:03-6240-1253<br>110-0015 東京都台東区<br>
</p>■表示例
株式会社LIG
tel:03-6240-1253
110-0015 東京都台東区
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
