3-10｜ワードプレスで使う「HTMLタグ」の基礎

Lesson. 03｜WordPress（ワードプレス）編

3-10｜ワードプレスで使う「HTMLタグ」の基礎

WordPressでブログやWebページを作成する際に知っておくと便利な「HTMLタグ」ついて、学んで行きましょう♪

HTMLタグとは

WEBページをWEB上で表示するための言語の一つで、マークアップ言語と言われています。

「<」と「>」で囲まれた部分が「タグ」です。

ワードプレスでページの「タグ」を見る方法

作成したページの「タグ」を見たい場合は、編集画面にて「コード」のタブをクリックすると、確認することが可能です。

もちろん、編集も可能です。

WEBサイトの基本的な構造タグ

タグ	役割	例
`<html>`	HTML文書の開始	`<html lang="ja">`
`<head>`	メタ情報やCSSの読み込み	`<meta charset="UTF-8">`
`<body>`	ページの本文	コンテンツがここに入る

通常、テーマにより自動で挿入されるので手動で書くことは少ないです。

見出し・段落・文章関連

タグ	役割	例
`<h1>`〜`<h6>`	見出し（SEOに重要）	`<h2>サービス内容</h2>`
`<p>`	段落（文章を区切る）	`<p>こんにちは、これは段落です。</p>`
`<br>`	改行	`こんにちは<br>さようなら`
`<strong>` / `<b>`	重要・太字	`<strong>重要</strong>`
`<em>` / `<i>`	強調・斜体	`<em>要チェック</em>`

リンク・画像

タグ	役割	例
`<a>`	リンク	`<a href="https://example.com">サイトへ</a>`
`<img>`	画像表示	`<img src="img.jpg" alt="説明">`

alt属性はSEOやアクセシビリティに重要です。

レイアウト・セクション

タグ	役割	例
`<div>`	ブロック要素のまとまり（汎用）	`<div class="box">内容</div>`
`<span>`	インライン要素（部分装飾）	`<span style="color:red;">赤字</span>`
`<section>`	コンテンツの区切り（セクション）	`<section>ここに紹介文</section>`
`<article>`	記事などの独立した内容	`<article>ブログ本文</article>`
`<header>` / `<footer>`	セクションの見出し・フッター	`<header>タイトル</header>`

テーブル（表）

タグ	役割	例
`<table>`	表全体	`<table>...</table>`
`<tr>`	行（row）	`<tr>...</tr>`
`<th>`	見出しセル	`<th>項目</th>`
`<td>`	データセル	`<td>内容</td>`

フォーム関連（使う場合）

タグ	役割	例
`<form>`	入力フォーム全体	`<form action="送信先">...</form>`
`<input>`	入力欄（テキスト・ボタンなど）	`<input type="text">`
`<textarea>`	複数行テキスト入力	`<textarea></textarea>`
`<button>`	ボタン	`<button>送信</button>`

SEOやアクセシビリティに影響するタグ

タグ	用途
`<meta>`	検索エンジン向けの情報（head内）
`<title>`	タブや検索結果のタイトル
`alt`属性	画像に代替テキスト（視覚障害者向けにも）

WordPress特有のポイント

クラシックエディターでも、HTMLタグはそのまま使用できます。
ブロックエディターでは「カスタムHTML」ブロックを使えば自由にタグが使えます。
タグの使いすぎや間違いはデザイン崩れやSEOのマイナスになるので注意。

<h1>〜<h6>「見出し」について

<h1>〜<h6>は、HTMLで「見出し」を表すタグです。WordPressの記事構成やSEO対策にとって非常に重要なタグです。

基本の役割

タグ	意味	使い道
`<h1>`	最上位の見出し	ページや記事のタイトル
`<h2>`	セクションの見出し	見出しの大項目（章）
`<h3>`	サブセクション	中項目（節）
`<h4>`〜`<h6>`	詳細な小項目	小見出し、補足など

使い方の例（WordPress投稿での構造）

<h1>ブログタイトル</h1>
<p>はじめに</p>

<h2>1. サービスの特徴</h2>
<p>特徴の説明</p>

<h3>1-1. 料金について</h3>
<p>料金の詳細</p>

<h2>2. よくある質問</h2>
<h3>2-1. サポート体制は？</h3>

SEO上のポイント・注意点

注意点	詳細
`<h1>`は基本1ページに1つだけ	ページの「主題」を示すため、複数あると検索エンジンが混乱します。WordPressテーマが自動的に出力している場合は、記事内で使わないように注意。
見出しの順序を守る	`<h1>`→`<h2>`→`<h3>`のように「飛ばさず階層的」に使います（例：`<h2>`の後にいきなり`<h4>`はNG）。
見た目のために使わない	見た目を大きくしたいだけなら、CSSでスタイル調整。構造的な意味があるときに使うべきです。
キーワードを意識して書く	各見出しに検索キーワードを自然に含めるとSEOに効果的。
曖昧なタイトルを避ける	「まとめ」や「その他」などの抽象的な見出しより、「〇〇に関するよくある質問」のように具体的に書く方が効果的。

よくあるNG例

NG例	理由
`<h1>`を複数使う	SEOに悪影響。主題が複数あるように見える
見出しを使わずに `<div>`や `<p>`だけで構成	検索エンジンがページ構造を把握できず、SEOに弱い
順番を飛ばして使う（例：h2 → h4）	構造が不明瞭になる。画面リーダー利用者にも不親切
見た目の装飾目的で `<h4>`を使う	本来の意味を持たせずに使うと、SEOやアクセシビリティに悪影響

用途	タグ
記事タイトル	`<h1>`（テーマ側が出力していることが多い）
セクション（章）	`<h2>`
小見出し（節）	`<h3>`
さらに細かい補足	`<h4>`〜`<h6>`（あまり使いすぎない）

<a>タグについて

<a>タグは、HTMLでリンク（アンカー）を作成するためのタグです。
「他のページに移動」「ファイルをダウンロード」「電話やメールを起動」など、Webサイトにおいて非常に重要な役割を果たします。

基本構文

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

例：<a href=”https://example.com”>公式サイトはこちら</a>

主な属性と使い方

属性	説明	例
`href`	リンク先のURL（必須）	`href="https://example.com"`
`target`	リンクを開く場所	`target="_blank"`（新しいタブ）
`rel`	リンクの関係性（セキュリティ・SEO）	`rel="noopener noreferrer"`
`title`	ホバー時に表示される説明	`title="詳細を見る"`
`download`	クリックでファイルをダウンロード	`download="ファイル名.pdf"`
`name` / `id`	ページ内リンクのターゲットとして使用	`id="section1"` にリンクするなら `href="#section1"`

target=”_blank” の注意点

外部リンクを新しいタブで開く場合、target=”_blank”を使いますが、セキュリティ対策として必ず rel=”noopener noreferrer” を追加しましょう。

例：<a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>外部リンク</a>

noopener：リンク先から元ページの操作を防ぐ
noreferrer：リファラー（参照元）情報を渡さない

特殊な使い方

ページ内リンク

<a href=”#section1″>このページ内のセクションへ</a>
.
<h2 id=”section1″>目的のセクション</h2>

電話リンク（スマホ用）

メールリンク

<a href=”mailto:info@example.com”>メールを送る</a>

ファイルダウンロード

<a href=”/files/manual.pdf” download>マニュアルをダウンロード</a>

よくある注意点

ミス例	内容
`href="#"` のまま	実際にリンクが機能しない（仮リンクに注意）
`target="_blank"` だけ使う	セキュリティ上のリスク（必ず rel 属性も）
`リンクテキストが曖昧`	「こちら」「ここをクリック」ではなく、内容が分かるテキストにすることがSEO・アクセシビリティ上も重要

「内部リンク」と「外部リンク」の違い

内部リンクと外部リンクでは、<a>タグの使い方に少し違いがあります。
SEO・ユーザー体験・セキュリティの観点から、それぞれ正しい使い方を知っておくことが大切です。

内部リンク（同じサイト内へのリンク）

内部リンクとは、同じサイト内での「別のページ」へのリンクを指します。

基本構文

<a href=”/about”>会社概要はこちら</a>
または

<a href=”https://example.com/about”>会社概要はこちら</a>

example.com が自分のサイトのURLであれば、これも内部リンクです。

特徴とポイント

項目	内容
開き方	基本は「同じタブ」で開く
`target`属性	不要（または `target="_self"`）
`rel`属性	通常は不要
SEOへの効果	高い。内部リンクでページ同士の関連性を伝えられる
アクセシビリティ	見出しや本文の中で意味のあるリンクテキストにする（例：`こちら` ではなく `サービス一覧はこちら`）

外部リンク（他サイトへのリンク）

外部リンクとは、自分のWEBサイトではない「外部のサイト」へのリンクを指します。

基本構文

<a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>提携先サイトを見る</a>

特徴とポイント

項目	内容
開き方	基本は「新しいタブ」で開くのが親切
`target="_blank"`	新しいタブで開く（ユーザーが戻りやすい）
`rel="noopener noreferrer"`	セキュリティ対策：リンク先から元ページの操作を防止
SEO対策	信頼できないサイトへリンクする場合は `rel="nofollow"` を追加するとよい
UX	外部と分かるように、リンクに説明を添えると親切（例：「新しいタブで開きます」など）

違いまとめ

項目	内部リンク	外部リンク
URL	`/about`や`https://自分のドメイン/〇〇`	`https://他のドメイン.com`
`target`	省略（＝同じタブ）	`_blank`（新しいタブ）
`rel`	原則不要	`noopener noreferrer`（+`nofollow`も必要に応じて）
SEOへの影響	自サイトの構造強化に有効	信頼性によりけり。nofollowで制御可
WordPressでの設定	ビジュアルエディタで簡単に追加可能	チェックボックスで「新しいタブで開く」設定が可能

補足：SEO強化に役立つリンク設計

内部リンクを多用し、関連ページへ自然に誘導すると、Googleにとって「構造が分かりやすいサイト」として評価されやすくなります。

外部リンクでも、信頼性の高いページへのリンクは「参考文献」としてプラスになることもあります。

Lesson. 03｜WordPress（ワードプレス）編

3-10｜ワードプレスで使う「HTMLタグ」の基礎