※この記事は「2024年4月25日」に更新しました。
- HTML って勉強した方が良いの？
- 見出しの使い方がわからない
ブログを始めたばかりだと、上記のような方もいるかと思います。
ただ、WordPress でブログを運用する場合、最低限の知識で問題ないです。
今回は、ブログでよく使う HTML（タグ）をまとめました。
Web制作の経験がある管理人がこれだけは覚えておいたほうが良いというものを解説しています。
- 基本情報技術者資格所有者（ソフト開発の国家資格）
- WordPress歴、10年以上
- Withマーケ会員（2022年10月入会）
目次
ブログでよく使う 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 まであって、数字が小さいほどページ内での重要度が高まります。
確認したい方は、ブラウザ（Chrome）の開発者ツール（Chrome なら F12キー） を使って、ソースコードを見てみるとわかります。
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タグ
- ボディ部分です。ブラウザに表示される内容を記述するところです。
divタグ、spanタグ
divタグ、spanタグ自体に HTML の意味はありません。
ただし、スタイルシート（CSS）を使うときに、わりとよく使います。
- このテキストはマーカーをつけたようなデザインにしたい
- このテキストの文字の色は赤にしたい
詳しく知りたい方は、 CSS とは（スタイルシート） という記事もご参照下さい。
あくまで、ユーザーにとって見やすくするだけなので、この HTML として意味がないタグ を使った方が良い場面もあります。
昔は、ブロックレベル要素（divタグ）とインライン要素（spanタグ）という分け方をしていたのですが、HTML5 ではこの考え方が廃止されました。
例えば、divタグの中に pタグを入れるといった感じです。
divタグは、横に並べることができませんが、spanタグは、横に並べても問題ありません（例えば、1行に spanタグがいくつも並ぶこともある）。
pタグ
HTML を少しでも勉強した方は、段落タグ（pタグ）は覚えなくても良いのか疑問に思ったかもしれません。
WordPress の場合、自動整形機能 が備わっているので、記事を書くだけなら意識することはほとんどありません。
ブロックエディタでもクラシックエディタでも同様です。
知識としては、覚えておいた方が良いです。
最後に
HTML は、文書の論理構造を検索エンジンに正確に伝えるために必要な知識です。
WordPress の場合、ある程度、自動生成してくれるので、今回紹介した内容くらい覚えておけば、とりあえず困らないと思います。
また、HTMLタグの中には、現在推奨されていないものもあるので、紹介したもの以外をネットで独学する場合は注意しましょう。
