【ブログで使える】HTMLまとめ

※この記事は「2020年11月9日」に更新しました。

今回の記事は、ブログで使える HTML をまとめています。

自分が決めたキーワードで検索エンジン上位表示を目指すためには必要な知識です。

ただ、WordPress(ワードプレス)でブログを運用する場合、最低限の知識で問題ないと思います。

Web制作の経験がある、管理人がこれだけは覚えておいたほうが良いというものを紹介します。

ブログでよく使う HTML タグ

HTML

おそらく、どんなブログでもよく使うであろう HTML タグを紹介します。

見出しタグ

確実に使うのが、見出しタグです。

<h2>見出し2</h2>
<h3>見出し2</h3>
<h4>見出し2</h4>

例えば、本の場合、目次があって、いくつかの章で分かれていたりするかと思います。

Webページでも同じように、章立てをして、情報を整理して、検索エンジンにページの内容をわかりやすくする必要があるのです。

見出しは、h1~h6 まであって、数字が小さいほどページ内での重要度が高まります。

私が h1 を紹介しなかったのは、WordPress の場合、ブログのタイトルがそのまま h1 になるからです。

確認したい方は、ブラウザ(Chrome)の開発者ツールを使って、ソースコードを見てみるとわかります。

h1 は、一番重要な見出しです。

基本的に h1 は、一つの記事に一つというのが原則です。

理由は、いくつもあるとどれが一番伝えたいことなのかわからなくなるからです。

つまり、h2 から複数使うことになります。

h2~h4 くらい使えれば、ほとんどの記事をわかりやすくすることができるはずです。

イメージタグ

イメージタグは、画像を表示させるためのタグです。

<img src="画像のパス(画像の場所を指定します)" alt="画像の名前" />

このタグに関しては、コードを直接打ち込むということはないかと思いますが、形だけ覚えておきましょう。

リストタグ

リストタグもよく使います。

リストである場合、このタグを使っておいた方が良いでしょう。

順不同リスト(箇条書き)です。

<ul>
<li>にんじん</li>
<li>たまねぎ</li>
<li>じゃがいも</li>
</ul>

連番付きリストです。

<ol>
<li>まず、にんじんを入れます。</li>
<li>次に、たまねぎを入れます。</li>
<li>最後に、じゃがいもを入れます。</li>
</ol>

定義型リストです。

<dl>
<dt>にんじん</dt>
<dd>原産地はアフガニスタンで、西洋種と東洋種とに大別されます。</dd>
<dt>たまねぎ</dt>
<dd>中央アジア原産のユリ科ネギ属の野菜です。</dd>
<dt>じゃがいも</dt>
<dd>アンデス温帯地方原産のナス科の多年生作物。</dd>
</dl>

アンカータグ

アンカータグは、リンクを張るときに使います。

船の錨(いかり)のように、リンク先をここにとどめておくというイメージです。

リンクを張るは、Web(蜘蛛の巣)のイメージから漢字は、貼るではなく張るが正解です。

<a href="リンク先">テキスト</a>

ちなみに別ウィンドウでリンク先のページを開くには、target = “_blank” を使います。

<a href="リンク先" target = "_blank">テキスト</a>

テーブルタグ

テーブルタグは、表を作成するためのタグです。

例えば、以下は 3行2列のテーブルです。

<table>
<tr>
<th>表の見出し</th>
<th>表の見出し</th>
</tr>
<tr>
<td>表の内容</td>
<td>表の内容</td>
</tr>
<tr>
<td>表のフッター</td>
<td>表のフッター</td>
</tr>
</table>

個人的には、ビジュアルエディタで作成して、あとからテキストエディタ(HTMLソース)を使って編集する方が早いと思います。

余裕があれば覚えたほうが良い HTML タグ

余裕があれば、覚えましょう。

htmlタグ、headタグ、bodyタグ

HTML を基礎から知りたいということなら、htmlタグ、headタグ、bodyタグの意味は知っておいた方が良いです。

htmlタグ
このタグで囲まれているものは、HTMLで記述されているという意味です。
headタグ
ヘッダ部分です。ページのタイトルや文字コードなどを記述するところです。
bodyタグ
ボディ部分です。ブラウザに表示される内容を記述するところです。

ただし、WordPress を使う場合、このタグは自動で生成されます。

興味のある方は、ブラウザの開発者ツール(Chrome なら F12キー)でソースコードを確認してみると良いかと思います。

divタグ、spanタグ

divタグ、spanタグ自体に HTML の意味はありません。

ただし、スタイルシート(CSS)を使うときに、わりとよく使います。

  • このテキストはマーカーをつけたようなデザインにしたい
  • このテキストの文字の色は赤にしたい

ブログだとこんな場面で使えます。

あくまで、ユーザーにとって見やすくするだけなので、この HTML として意味がないタグを使った方が良い場面もあるということです。

昔は、ブロックレベル要素(divタグ)とインライン要素(spanタグ)という分け方をしていたのですが、HTML5 ではこの考え方は廃止されました。

基本的に、spanタグは、テキスト内で使ったりします。

divタグは、箱のように使うイメージです。

例えば、divタグの中に pタグを入れるといった感じです。

divタグは、横に並べることができませんが、spanタグは、横に並べても問題ありません(例えば、1行に spanタグがいくつも並ぶこともある)。

最後に

いかがでしょうか。

HTML は、文書の論理構造を検索エンジンに正確に伝えるために必要な知識です。

私たちが視覚的に見ている部分とは、また別の話になります。

WordPress の場合、ある程度、自動生成してくれるので、今回紹介した内容くらい覚えておけば、とりあえず困らないと思います。

また、HTMLタグの中には現在、推奨されていないものもあるので、注意しましょう。