WordPress初心者が知っておきたいHTMLタグまとめ

WordPressでブログを運営していると、以下のような経験をすることがあるかと思います。

• 「HTML編集モードに切り替えたら謎のコードが出てきた」
• 「記事の装飾が崩れた」
• 「プラグインの説明にHTMLタグが出てきた」

最近のWordPressはブロックエディター（Gutenberg）が主流になったため、HTMLを直接書く機会は減りました。しかし、運営を続けていると、HTMLの知識がまったく不要になることはありません。

むしろ最低限のHTMLタグを理解しておくことで、以下のようなメリットがあります。

• 記事編集のトラブルに強くなる
• カスタムHTMLブロックを使える
• プラグインの設定が理解しやすくなる
• SEOの仕組みが分かる

この記事では、WordPress初心者が知っておきたいHTMLタグを分かりやすく解説します。

そもそもHTMLとは？

HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。

例えば、「見出し」「段落」「リスト」「リンク」「画像」などをブラウザに伝える役割を持っています。

<h1>WordPress初心者向けガイド</h1>Code language: HTML, XML (xml)

と書くと、「WordPress初心者向けガイド」という言葉について「これはページの最も重要な見出しです」という意味合いとなります。

HTMLは「デザインを作るもの」ではなく、「文章の意味や構造を伝えるもの」と考えると理解しやすいでしょう。

HTMLを学ぶべき理由

WordPressは年々使いやすくなっています。

しかし、例えば以下のような対応を行う際にはHTMLの知識が役立ちます。

• テーマの説明書を見る
• プラグインのマニュアルに目を通す
• CSSのカスタマイズを行う
• SEO対策や不具合調査を進める

特に「この部分は見出しなのか」「リンクなのか」「画像なのか」が理解できるだけでも、WordPressの扱いやすさは大きく向上します。

WordPressでHTMLタグを使う場面

WordPressでは主に以下の場面でHTMLタグを見かけます。

カスタムHTMLブロック

ブロックエディターの「カスタムHTML」ブロックを使用すると、直接HTMLを書けます。

コードエディター

投稿画面右上のメニューから「コードエディター」へ切り替えると、ブロックがHTML形式で表示されます。

広告・アクセス解析使用時

広告・アクセス解析使用時には所定のコードを貼り付けることがありますが、その際にHTMLが登場します。

特に「Google Analytics」等を利用する場合は割けては通れません。

最優先で覚えたいHTMLタグ

まずは以下のタグだけ覚えれば十分です。

h1～h6（見出し）

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>さらに小さな見出し</h4>
<h5>さらにさらに小さな見出し</h5>
<h6>さらにさらにさらに小さな見出し</h6>Code language: HTML, XML (xml)

記事の見出しを表します。SEOにおいても重要なタグです。

数字が上がることに節が分割される形となり、一般的には以下のように使います（章・節・項などのように理解いただくとスムーズかと思います）。

• h1：記事タイトル
• h2：大見出し
• h3：小見出し
• h4 / h5 / h6：さらに細かい見出し

p（段落）

<p>これは段落です。</p>Code language: HTML, XML (xml)

本文を表します。

WordPressで普通に文章を入力すると、自動的にpタグが付与されます。

br（改行）

1行目<br>
2行目Code language: HTML, XML (xml)

文章を改行します。ただし乱用はおすすめできません。

通常の文章はpタグで段落を分ける方が適切です。

strong（重要）

<strong>重要な内容</strong>Code language: HTML, XML (xml)

強調を意味します。ブラウザでは太字で表示されることが一般的です。

SEOの観点でも意味を持つタグです。

em（強調）

<em>強調したい部分</em>Code language: HTML, XML (xml)

文章を強調するタグです。通常は斜体表示になります。

日本語サイトでは使用頻度はやや少なめです。

リンク関連タグ

a（リンク）

<a href="https://example.com">
公式サイト
</a>Code language: HTML, XML (xml)

リンクを作成します。ブログ運営では非常に重要です。

target=”_blank”

<a href="https://example.com" target="_blank">
リンク
</a>Code language: HTML, XML (xml)

新しいタブで開きます。

rel属性

<a href="https://example.com" rel="nofollow">
リンク
</a>Code language: HTML, XML (xml)

検索エンジンへの指示を追加できます。WordPressでは自動付与されることもあります。

リスト関連タグ

ul（順不同リスト）

<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>Code language: HTML, XML (xml)

表示例は以下のとおりです。

• りんご
• みかん
• バナナ

ol（番号付きリスト）

<ol>
<li>準備する</li>
<li>設定する</li>
<li>公開する</li>
</ol>Code language: HTML, XML (xml)

表示例は以下のとおりです。

1. 準備する
2. 設定する
3. 公開する

li（リスト項目）

ulやolの中で使用します。

画像関連タグ

img（画像）

画像を表示します。

<img src="image.jpg" alt="説明文">Code language: HTML, XML (xml)

src

画像ファイルの場所を表します。

src="image.jpg"Code language: JavaScript (javascript)

alt

「代替テキスト」を指します。

alt="WordPressの管理画面"Code language: JavaScript (javascript)

画像が表示できない場合や、検索エンジンに内容を伝えるために重要とされており、SEOの観点でも大切です。

表（テーブル）関連タグ

table

表全体を作ります。

<table>
</table>Code language: HTML, XML (xml)

tr

行を表します。

<tr>
</tr>Code language: HTML, XML (xml)

td

一般的なセルを表します。

<td>内容</td>Code language: HTML, XML (xml)

th

見出しを表すセルです。

<th>項目</th>Code language: HTML, XML (xml)

サンプル

<table>
<tr>
<th>テーマ</th>
<th>料金</th>
</tr>

<tr>
<td>Cocoon</td>
<td>無料</td>
</tr>

<tr>
<td>SWELL</td>
<td>有料</td>
</tr>
</table>Code language: HTML, XML (xml)

引用タグ

blockquote

引用文を表します。

<blockquote>
引用文
</blockquote>Code language: HTML, XML (xml)

cite

引用元・出典等を示します。

<cite>引用元</cite>Code language: HTML, XML (xml)

必ずしもblockquote内に使用する必要はありませんが、blockquote内で使われることも多いです。

コード表示タグ

WordPressの技術記事を書く人には重要です。

code

コードのことを指す一般的なタグです。

<code>functions.php</code>Code language: HTML, XML (xml)

表示例：functions.php

pre

「整形済みテキスト」を指します。コードの他、文字を揃えたテキストにも使えます。ただし、現在ではコード以外で使われることはあまりありません。

<pre>
コード
</pre>Code language: HTML, XML (xml)

pre + code

複数行のコードを表現する場合には、以下のように組み合わせることも多いです。

<pre><code>
コード
</code></pre>Code language: HTML, XML (xml)

範囲指定のために使用されるタグ

div

こちらもよく見かけるタグです。意味はほとんどなく、「グループ化するための箱」として使用されます。

<div class-"container">内容</div>のように使用され、テーマ開発やプラグイン開発では頻繁に登場します。

span

文章の一部分を囲むためのタグです。こちらも内容的な意味はほとんど無いとされています。

たとえば、<span class="red">重要</span>のように使います。こちらもテンプレート編集等で頻繁に使います。

SEOで重要なタグ

WordPress運営者なら次のタグの意味は理解しておきたいところです。

title

ページタイトルを定義するタグのことを指します。ブラウザのタブバーやGoogleの検索結果等に表示される重要な要素です。

<title>記事タイトル</title>Code language: HTML, XML (xml)

meta

キーワードや説明文等のページ情報を記述します。

いくつか用例はあるのですが、例えば以下のように使います（ページ内説明文の例）。

<meta name="description" content="記事説明">Code language: HTML, XML (xml)

h1～h6タグ

見出し構造そのものがSEOに関係します。

特に「h1 / h2 / h3」 は重要です。

WordPress初心者が覚える必要のないタグ

初心者の段階では以下を無理に覚える必要はありません。

• article
• section
• nav
• aside
• header
• footer
• svg
• canvas
• script
• iframe

もちろん知っていると役立ちますが、ブログ運営だけなら優先度は低めです。

まとめ

WordPress初心者が最初に覚えるべきHTMLタグは多くありません。

まずは以下だけ理解できれば十分です。

• h1～h6（見出し）
• p（段落）
• br（改行）
• strong（強調）
• a（リンク）
• ul・ol・li（リスト）
• img（画像）
• table（表）
• blockquote（引用）
• code（コード表示）
• div（グループ化）
• span（一部分の装飾）

現在のWordPressではHTMLを直接書く機会は減っていますが、HTMLを理解しているとトラブル対応やカスタマイズの幅が大きく広がります。

すべて暗記する必要はありません。まずは「見たことがある」「何となく意味が分かる」状態を目指すだけでも、WordPress運営はぐっと楽になるでしょう。