Web制作

2014.10.08(wed)

初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選

365

こんにちは、LIGブログ編集部です。

LIGブログを読んでくれている皆さんの中には、自身でもブログを書いているという方も多いと思います。
しかし、HTMLタグを自分で入力しながら書いている、タグの意味を理解しながら使っている、という人は少ないかもしれません。

最近では、HTMLタグが全くわからなくても、同じような書式の効果が手軽に反映できるブログサービスもたくさんあります。
でも、そのような設定でブログを書こうとすると、改行のときにフォントが崩れたり、勝手に斜字になったり、思わぬストレスになることもありますよね。

実はこれ、HTMLを書式に自動で反映する仕組みにも限界があり、全てを正確に反映できるわけではないことが原因です。
それを修正したり、根本的に防止するためには、HTMLの知識が必要になります。また、せっかくブログを書くからには、しっかりとHTMLタグの意味を理解し、入力していきたいですよね。

というわけで今回は、初心者のブロガーの方に向け、ブログでよく使われるオススメのHTMLタグと、そのタグが持つ意味をまとめて紹介していきたいと思います。

ブログ初心者ではない方も、おさらいのつもりでご確認ください。意外に知らなかったHTMLタグを発見できるかもしれません。

各種ブログサービスでHTMLタグを使うには

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ）の略で、タグというマーク（命令）を使うことで、HTML文書の構造や意味を指定したり、文字の大きさや色を変えたり、画像を表示させたりすることができます。

HTMLに対応した編集モードへの切り替え

LIGブログではWordPressというブログソフトウェアを使用していますが、代表的な各種ブログサービスでも自由にHTMLタグを使うことができます。（正確には、もともとHTMLタグを使用しているのですが、サービスが自動的にタグを入力しています）

ただし、使用時はHTMLに対応した編集モードに切り替える必要があります。切り替える方法は下記の通りです。

Tumblr：
管理画面の<html>という文字をクリックするたびにON／OFFが切り替わる
ライブドアブログ：
管理画面の「HTMLタグ編集」というボタンをクリック
はてなブログ：
管理画面の「HTML編集」というタブをクリック
Yahoo!ブログ：
管理画面の「Wiki、HTMLモードへ」という文字をクリック（使えるタグに制限があります）
アメーバブログ：
デフォルトの入力画面がHTMLに対応している
FC2ブログ：
デフォルトの入力画面がHTMLに対応している

タグの使い方について

タグの使い方については、以下の2つをまず理解しておきましょう。

タグの入力

<●>吾輩は猫である</●>

タグを入力するときは、上記のように開始タグと終了タグで要素の内容を挟みます。命令分を“<>”で囲んだものが開始タグ、命令分の前に”/”を入れて<>で囲んだものが終了タグとなります。（タグによっては終了タグを必要としないものもあります。）

また、タグの中に「属性」を指定することで情報を付加し、さらに細かな役割を与えることができます。

セマンティックの重要性

HTMLのバージョンが4.01から5に改訂され、いくつかのタグに従来とは違うセマンティック上での意味が追加されました。セマンティックとは、文字や情報データに特別な意味を持たせ、コンピュータに正しい解釈をさせるということになります。

そのメリットとして代表的なのが「検索エンジンがサイトを構成するHTMLからセマンティック要素を見つけ出し、ユーザに適切な検索結果を返せるようになる」ことです。つまり、HTMLタグをきちんと理解し入力することで、自身のブログへ検索流入の増加が期待できるようになるのです。

ブログでよく使用するHTMLタグ

今回の記事では、LIGブログで実際によく使用されているHTMLタグを中心に紹介していきます。

なお、LIGブログ上の表示はデザインの都合により、CSSで特別な装飾を指定されているタグもあります。その場合は他のブログサービスでは同じように表示されるわけではありませんので、あらかじめご了承ください。

▼目次

テキスト関連のタグ

まずはテキスト関連のタグを12種類紹介していきます。

1.

段落を意味する文字列に使用されます。

■使用例

ここからここまでが1つの段落です。ここから次の段落です。

■表示例

ここからここまでが1つの段落です。

ここから次の段落です。

2.

読む人の注意をひきたいテキストに対して使うタグで、慣例的に太字にする場合に用いられます。

※HTML4.01では単に「太字」という意味でしたが、HTML5になって「セマンティック上の意味を持たない太字」という意味に変わりました。人間にとっては強調されるが、コンピュータにとっては強調されない、というニュアンスになります。

■使用例

人間の注意をひきたいので太字にしますが、セマンティック上の意味はありません。

■表示例

人間の注意をひきたいので太字にしますが、セマンティック上の意味はありません。

3.

周囲と区別したいテキストに対して使うタグで、慣例的にイタリック体にする場合に用いられます。また、タグと同じくセマンティック上の意味を持ちません。

しばしば「斜体」と同じものだと勘違いをされますが、イタリック体とはアルファベット用の書体の1つで、欧米で船の名前などを表示させるときに使われるなどの特徴があります。対して斜体とは、文字を機械的に斜めに表示させる「Oblique」を表します。

■使用例

単に斜めに表示させたのではなく、筆記体に似た装飾の書体がイタリックです。

■表示例

単に斜めに表示させたのではなく、筆記体に似た装飾の書体がイタリックです。

4.

テキストに下線を引くときに使うタグで、セマンティック上の意味を持ちません。

■使用例

テキストに下線を引きたいときに使います。

■表示例

テキストに下線を引きたいときに使います。

5. <s>

「（過去は正確だったが）すでに正確ではなくなった・関係なくなった」という意味で、テキストに取り消し線を引くときに使うタグです。
「削除された」あるいは「訂正をした」という意味では使いません。参考として提示しておくような過去の情報に対して使用するのが望ましいでしょう。

■使用例

<s>通常価格:9,800円</s>特別価格:2,980円

■表示例

~~通常価格:9,800円~~

特別価格:2,980円

6. <del>

文章の取り消し、あるいは「削除された」「訂正をした」情報をテキストとして残しておきたい場合の取り消し線をひくときに使うタグです。見た目は<s>タグと一緒ですが、意味は全く違うので注意が必要です。

■使用例

<del>無料プレゼントの申込はこちらから</del>現在申込は終了しております。

■表示例

~~無料プレゼントの申込はこちらから~~

現在申込は終了しております。

7.

強調すべきテキスト、コンテンツにおける必要不可欠とされる情報に対して使うタグです。見た目上の差異がなかったとしても、コンピュータには「強調されている文」として認識されます。

■使用例

強調したい。もっと、強調したい。

■表示例

強調したい。もっと、強調したい。
（※LIGブログ上の表示では、見た目の差異はありません。）

8.

特に強調すべきものに対して使用するタグです。HTML5になってから、「重ねて使用することでより重要性を高める」という意味が追加されました。
重ねても見た目は変わらないのですが、コンピュータ的にはコンテンツの重要性の相対的なレベルを区別することができます。

■使用例

強調したい、もっともっと強調したい。

■表示例

強調したい、もっともっと強調したい。

9.

免責事項、規約文書、法的制約、警告、コピーライトなどの細目や注釈を表示するときに使用するタグです。
HTML4.01では「文字を小さくする時に使うタグ」という扱いでしたが、HTML5になって全く意味が違う定義のタグとなりました。ちなみに、同じ仲間だと思われていた<big>タグは、HTML5では廃止となりました。

■使用例

■表示例

10. <ruby>、<rt>、<rp>

テキストにルビをふるときに使用するタグで、主に発音のガイドや読み方のガイドなどに使用されます。<ruby>タグで囲った部分がルビをふる範囲、<rt>タグで囲った部分がルビのテキストとなります。

また、ブラウザによってはルビが表示されず<rt>タグのテキストがそのまま表示されてしまいます。そのフォローの意味で、<rt>タグで囲っている部分を<rp>タグで囲みます。もしルビが表示できなかった場合は、テキストに括弧がつくようになります。

■使用例

本気と書いて<ruby>本気<rp>（</rp><rt>マジ</rt><rp>）</rp></ruby>と読みます。

■表示例（ルビ対応ブラウザ）

本気と書いて本気（マジ）と読みます。

■表示例（ルビ非対応ブラウザ）

本気と書いて本気（マジ）と読みます。

11. <hr>

段落レベルの文章の意味上の区切りを意味します。見た目上は水平線がひかれ、終了タグは不要です。
HTML4.01では単に「水平線をひく」という定義のタグでしたが、HTML5においてはテーマ・話題の区切りを表す要素となり、水平線という定義ではなくなりました。

■使用例

朝からずっと考えていたことがある。俺の好きな食べ物の話だ。

ラーメンとうどん、本当に美味しいのはどっちなのだろうか。

<hr>

久しぶりに新宿の街に来たが、相変わらずネオンが眩しい。

■表示例

朝からずっと考えていたことがある。俺の好きな食べ物の話だ。

ラーメンとうどん、本当に美味しいのはどっちなのだろうか。

久しぶりに新宿の街に来たが、相変わらずネオンが眩しい。

12.

改行するために使うタグです。こちらも終了タグは不要です。ただし“見た目を整えるため”ではなく、改行が実際にコンテンツの一部となる場合に使用します。
見た目を整えるために改行したいときは、タグを使いましょう。

■使用例

株式会社LIG tel:03-6240-1253 110-0015 東京都台東区

■表示例

株式会社LIG
tel:03-6240-1253
110-0015 東京都台東区

引用文のタグ

文章を引用・転載するときに使用します。

13. <blockqoute>

■使用例

<blockquote>
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
</blockquote>

■表示例

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

定義・説明文のタグ

定義・説明文を表記するときに使用します。

14. <dl> 、<dt>、<dd>

<dl>タグの中に<dt>タグで定義・説明される言葉を、<dd>タグでそれに対応する説明文を表示させます。

■使用例

<dl>
　　　　　<dt>説明したい言葉</dt>
　　　　　<dd>説明文</dd>
</dl>

■表示例

説明したい言葉: 説明文

リストのタグ

リストにするときに使用します。

15. <ul>、<ol>、<li>

<ul>は配置順に意味を持たないアイテムを持つリスト、<ol>は配置順に意味を持たせるアイテムを持つリストとなります。
<li>はリストアイテムを意味します。<ul>タグと<ol>タグは、必ず1つ以上の<li>要素を含む必要があります。また、入れ子状に表現することもでkます。

■使用例1
<ul>
　　　　　<li>リストアイテム</li>
　　　　　<li>リストアイテム</li>
　　　　　<li>リストアイテム</li>
</ul>
<ol>
　　　　　<li>１つめのリストアイテム</li>
　　　　　<li>２つめのリストアイテム</li>
　　　　　<li>３つめのリストアイテム</li>
</ol>

■表示例1

リストアイテム
リストアイテム
リストアイテム

１つめのリストアイテム
２つめのリストアイテム
３つめのリストアイテム

■使用例2
<ul>
　　　　　<li>カレーライス</li>
　　　　　<li>オムライス</li>
　　　　　<li>ハンバーグライス</li>
　　　　　<ul>
　　　　　　　　　　<li>チーズハンバーグライス</li>
　　　　　　　　　　<li>デミグラスハンバーグライス</li>
　　　　　　　　　　<li>和風ハンバーグライス</li>
　　　　　</ul>
　　　　　<li>ハヤシライス</li>
</ul>

■表示例2

カレーライス
オムライス
ハンバーグライス
- チーズハンバーグライス
- デミグラスハンバーグライス
- 和風ハンバーグライス
ハヤシライス

表のタグ

表にするときに使用します。

16. <table>、<tr>、<th>、<td>

基本構造としては<table>の中の<tr>で横一行を定義し、さらにその中に<th>や<td>でセルを定義します。
<th>は見出しを定義するヘッダセル、<td>はデータを定義するデータセルとなり、一般的なブラウザではヘッダセル内のテキストは太字でセンタリングされて表示されます。

■使用例1
<table>
　　　　　<tr>
　　　　　　　　　　<th>見出しセル1</th>
　　　　　　　　　　<th>見出しセル2</th>
　　　　　　　　　　<th>見出しセル3</th>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<td>データセル1の1</td>
　　　　　　　　　　<td>データセル2の1</td>
　　　　　　　　　　<td>データセル3の1</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<td>データセル1の2</td>
　　　　　　　　　　<td>データセル2の2</td>
　　　　　　　　　　<td>データセル3の2</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<td>データセル1の3</td>
　　　　　　　　　　<td>データセル2の3</td>
　　　　　　　　　　<td>データセル3の3</td>
　　　　　</tr>
</table>

■表示例1

見出しセル1	見出しセル2	見出しセル3
データセル1の1	データセル2の1	データセル3の1
データセル1の2	データセル2の2	データセル3の2
データセル1の3	データセル2の3	データセル3の3

■使用例2
<table>
　　　　　<tr>
　　　　　　　　　　<th>見出しセル</th>
　　　　　　　　　　<th>見出しセル横の1</th>
　　　　　　　　　　<th>見出しセル横の2</th>
　　　　　　　　　　<th>見出しセル横の3</th>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<th>見出しセル縦の1</th>
　　　　　　　　　　<td>データセル1の1</td>
　　　　　　　　　　<td>データセル2の1</td>
　　　　　　　　　　<td>データセル3の1</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<th>見出しセル縦の2</th>
　　　　　　　　　　<td>データセル1の2</td>
　　　　　　　　　　<td>データセル2の2</td>
　　　　　　　　　　<td>データセル3の2</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　　　<th>見出しセル縦の3</th>
　　　　　　　　　　<td>データセル1の3</td>
　　　　　　　　　　<td>データセル2の3</td>
　　　　　　　　　　<td>データセル3の3</td>
　　　　　</tr>
</table>

■表示例2

見出しセル	見出しセル横の1	見出しセル横の2	見出しセル横の3
見出しセル縦の1	データセル1の1	データセル2の1	見出しセル3の1
見出しセル縦の2	データセル1の2	データセル2の2	見出しセル3の2
見出しセル縦の3	データセル1の3	データセル2の3	見出しセル3の3

リンク指定のタグ

ハイパーリンクを指定するときに使用します。

17. <a>

テキストや画像を<a>（アンカー）タグで囲むと、Web上の関連する情報を結びつけるハイパーリンクを指定することができます。

href属性でURLを指定したり、target属性でリンク先の情報をどのウィンドウ（フレーム）で開くかの指定ができたりします。
今回の記事でもページ内リンク付きの「目次」を用意していましたが、これも<a>タグを使用しております。

■使用例1
<a href=”#mokuji”>目次に戻ります</a>

※目次部分のテキストは
<h2 id=”mokuji”>ブログでよく使用するHTMLタグ</h2>
となっており、id=”mokuji”の位置に戻ります。

■表示例1

目次に戻ります

■使用例2
<a href=”http://www.yahoo.co.jp/” target=”_blank”>Yahoo!JAPANを新規ウィンドウで開きます</a>

■表示例2

Yahoo!JAPANを新規ウィンドウで開きます

画像表示のタグ

画像を表示するときに使用します。

18. <img>

基本的には<img src=”（場所＋画像ファイル名）” alt=”画像代替文字” width=”横幅” height=”高さ” 各種属性 >という構成で使われます。

src属性は画像のパス（ファイルの場所）を指定する役割を果たすため、必須のタグ属性です。alt属性はHTML4.01までは必須属性でしたが、HTML5になって省略できるようになりました。
その他、HTML4.01までは各種レイアウト用の属性が用意されていましたが、HTML5になってからは廃止されているため、CSSで指定することが望ましくなっています。

■使用例
<img src=”http://liginc.co.jp/wp-content/uploads/2014/10/yoshiki.jpg” alt=”画像代替文字が表示されます” width=”600″ height=”400″ class=”alignnone size-full wp-image-122353″ >

■表示例
画像代替文字が表示されます