【ブログでよく使う】HTML タグまとめ

※この記事は「2024年10月19日」に更新しました。

  • HTML って勉強した方が良いの?
  • 見出しの使い方がわからない

ブログを始めたばかりだと、上記のような方もいるかと思います。

HTML は、検索エンジン上位表示を目指すためには、必要な知識です。

ただ、WordPress でブログを運用する場合、最低限の知識で問題ないです。

今回は、ブログでよく使う HTML(タグ)をまとめました。

Web制作経験者が、これだけは覚えておいたほうが良いというものを解説しています。

タカフミ
記事を書いている管理人の経歴は、以下の通りです。
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • WordPress歴、10年以上
  • Withマーケ会員(2022年10月入会)

ブログでよく使う HTML タグ

HTML

以下は、ブログでよく使う HTML タグです。

  • 見出しタグ【h2、h3 など】
  • イメージタグ【img】
  • リストタグ【ul、ol】
  • アンカータグ【a】
  • テーブルタグ【table】
タカフミ
それぞれ解説していきます。

見出しタグ【h2、h3 など】

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

<h2>WordPress(ワードプレス)について</h2>
<h3>インストール方法</h3>
<h3>使い方</h3>
<h2>Movable Type(ムーバブルタイプ)について</h2>
<h3>インストール方法</h3>
<h3>使い方</h3>

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

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

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

WordPress の場合、ブログのタイトルがそのまま h1 になります。

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

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

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

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

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

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

イメージタグ【img】

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

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

alt属性に、画像の名前を設定することで、検索エンジンにどんな画像か伝えることができます。

このタグに関しては、コードを直接打ち込むということはないと思います。

タカフミ
形だけ覚えておきましょう。

リストタグ【ul、ol】

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

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

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

<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>

アンカータグ【a】

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

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

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

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

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

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

テーブルタグ【table】

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

例えば、以下は 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 タグです。

  • htmlタグ、headタグ、bodyタグ
  • divタグ、spanタグ
  • pタグ
タカフミ
それぞれ解説していきます。

htmlタグ、headタグ、bodyタグ

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

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

divタグ、spanタグ

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

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

  • このテキストはマーカーをつけたようなデザインにしたい
  • このテキストの文字の色は赤にしたい
タカフミ
ブログだと、上記のような場面で使えます。

詳しく知りたい方は、 CSS とは(スタイルシート) という記事もご参照下さい。

CSSの基礎

CSS とは(スタイルシート)【初心者向け】

2020年3月13日

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

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

基本的に、spanタグは、テキスト内で使ったりします。
タカフミ
divタグは、箱のように使うイメージです。

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

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

pタグ

HTML を少しでも勉強した方は、段落タグ(pタグ)は覚えなくても良いのか疑問に思ったかもしれません。

WordPress の場合、自動整形機能が備わっているので、記事を書くだけなら意識することはほとんどありません。

タカフミ
段落タグは2回連続の改行で挿入されます。

ブロックエディタでもクラシックエディタでも同様です。

知識としては、覚えておいた方が良いです。

最後に

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

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

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

また、HTMLタグの中には、現在推奨されていないものもあるので、紹介したもの以外をネットで独学する場合は注意しましょう。