informationPC

サイト作成で使うHTMLの基本まとめ｜タグの意味・書き方・WordPress記事での使い方






サイト作成で使うHTMLの基本まとめ｜タグの意味・書き方・WordPress記事での使い方


サイト作成で使うHTMLの基本まとめ
タグの意味・書き方・WordPress記事での使い方

最終更新日：2026年6月26日

HTMLは、Webページの文章・見出し・画像・リンク・表などを配置するための基本言語です。
この記事では、実際にサイトやWordPress記事を作ることを想定して、よく使うHTMLタグの意味と使い方をまとめます。

この記事で分かること

  1. HTMLの基本構造
  2. WordPress記事で使うHTMLの考え方
  3. 見出し・段落・リンク・画像・表の作り方
  4. よく使うHTMLタグの意味一覧
  5. SEOを意識したタグの使い方
  6. 記事作成で避けたいHTMLの書き方
  7. そのまま使える記事テンプレート

1. HTMLとは？

HTMLは、Webページの「骨組み」を作るための言語です。
文章を段落にしたり、見出しを付けたり、画像を表示したり、リンクを貼ったりする役割があります。 

<h2>見出しです</h2>
<p>これは本文です。</p>
<a href="https://example.com">リンクはこちら</a>

<h2> は見出し、<p> は段落、<a> はリンクを表します。
HTMLでは文章の意味をタグで囲んでいきます。

2. HTMLの基本構造

1つのHTMLページは、基本的に次のような形で作られます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明文">
</head>
<body>
  <h1>ページの大見出し</h1>
  <p>本文を書きます。</p>
</body>
</html>
部分 意味
<!DOCTYPE html> このファイルがHTML5で書かれていることを示します。
<html lang="ja"> ページ全体がHTMLで、日本語ページであることを示します。
<head> ページの設定情報を書きます。画面には直接表示されません。
<body> 実際に画面に表示される本文部分です。
WordPressの場合：
WordPressの記事編集画面では、通常 <!DOCTYPE html>、<html>、<head>、<body> は自分で書きません。
投稿本文には、<h2>、<p>、<ul>、<table> など、記事本文に必要なタグだけを書くのが基本です。

3. WordPress記事で使うHTMLの考え方

WordPressでは、テーマ側がページ全体のHTML構造を作っています。
そのため、記事本文に貼るHTMLは「本文の中身」だけで十分です。

WordPress記事本文に貼る例

<h2>記事の見出し</h2>

<p>
ここに本文を書きます。読みやすいように段落ごとに分けます。
</p>

<ul>
  <li>ポイント1</li>
  <li>ポイント2</li>
  <li>ポイント3</li>
</ul>
おすすめ：
WordPressに貼る場合は、<article> や <body> まで入れず、記事本文部分だけを貼ると扱いやすいです。
デザインはCocoonの「追加CSS」でまとめて管理すると、複数記事で統一しやすくなります。

4. 見出しタグ：h1〜h6

見出しタグは、記事の構造を作るために使います。

タグ 意味 使い方
<h1> ページの大見出し 基本的に1ページに1つ。WordPressでは記事タイトルがh1になることが多いです。
<h2> 大きな章の見出し 記事本文の主要見出しに使います。
<h3> h2の中の小見出し 詳しい説明や補足の見出しに使います。
<h4>〜<h6> さらに細かい見出し 深い階層が必要なときに使います。

見出しの正しい順番

<h2>1. 大きな章</h2>
<h3>1-1. 小見出し</h3>
<h3>1-2. 小見出し</h3>

<h2>2. 次の大きな章</h2>
<h3>2-1. 小見出し</h3>
避けたい例：
デザイン上の見た目だけで、<h2> の次にいきなり <h5> を使うなど、見出し階層を飛ばすのは避けた方がよいです。

5. 段落・改行・強調

タグ 意味 例
<p> 段落 <p>本文です。</p>
<br> 改行 1行目<br>2行目
<strong> 重要な強調 <strong>重要です</strong>
<em> ニュアンス上の強調 <em>特に注意</em>
<span> 一部だけ装飾するための範囲 <span class="red">赤文字</span>

段落の例

<p>
HTMLでは、文章のまとまりをpタグで囲みます。
長い文章は、読みやすいように段落ごとに分けます。
</p>

<p>
別の話題に移るときは、新しいpタグを使います。
</p>
ポイント：
見た目のためだけに <br> を連発するより、段落は <p> で分けた方が読みやすく、HTMLとしても自然です。

6. リストタグ：ul・ol・li

箇条書きにはリストタグを使います。

順番のないリスト

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

順番のあるリスト

<ol>
  <li>アプリを開く</li>
  <li>設定画面を開く</li>
  <li>保存ボタンを押す</li>
</ol>

7. リンクタグ：a

リンクを作るには <a> タグを使います。

<a href="https://example.com">公式サイトを見る</a>

別タブで開くリンク

<a href="https://example.com" target="_blank" rel="noopener">
  公式サイトを別タブで開く
</a>
属性 意味
href リンク先のURLを指定します。
target="_blank" リンクを別タブで開きます。
rel="noopener" 別タブリンクの安全対策として付けます。
SEO的にも大事：
リンク文字は「こちら」だけでなく、AdMob公式ヘルプを見る のように、リンク先の内容が分かる文字にすると親切です。

8. 画像タグ：img

画像を表示するには <img> タグを使います。

<img src="sample.jpg" alt="サンプル画像の説明">
属性 意味
src 画像ファイルのURLやパスを指定します。
alt 画像の代替テキストです。画像が表示されない場合や読み上げ機能で使われます。
width / height 画像の幅と高さを指定します。レイアウトのガタつき防止にも役立ちます。
loading="lazy" 画像の遅延読み込みを指定します。ページ表示を軽くできます。

実用的な画像タグの例

<img
  src="admob-policy-center.jpg"
  alt="AdMobポリシーセンターの詳細画面"
  width="800"
  height="450"
  loading="lazy">

9. 表タグ：table

比較表や一覧表を作るには <table> を使います。

<table>
  <tr>
    <th>タグ</th>
    <th>意味</th>
  </tr>
  <tr>
    <td>&lt;p&gt;</td>
    <td>段落を表します</td>
  </tr>
</table>
タグ 意味
<table> 表全体を表します。
<tr> 表の1行を表します。
<th> 見出しセルを表します。
<td> 通常のセルを表します。
スマホ表示の注意：
表はスマホで横幅が足りなくなりやすいです。
長い表を使う場合は、横スクロールできるCSSを追加すると見やすくなります。

10. 補足・注意書き・引用

記事では、注意点や補足情報を分かりやすく見せるために、<div> や <blockquote> を使います。

補足ボックス

<div class="note">
  <strong>補足：</strong><br>
  ここに補足説明を書きます。
</div>

引用

<blockquote>
  引用文をここに書きます。
</blockquote>

11. コード表示：code・pre

プログラムコードやHTML例を記事に載せる場合は、<pre> と <code> を組み合わせます。 

<pre><code>
ここにコードを書きます
</code></pre>
HTMLタグをコードとして表示する場合：
< は &lt;、> は &gt; と書く必要があります。
そのまま書くと、ブラウザがHTMLタグとして解釈してしまいます。

12. SEOで重要なHTMLタグ

SEOでは、HTMLの構造が分かりやすいことが重要です。
特にタイトル、説明文、見出し、画像のalt、リンク文字は意識しましょう。

タグ・属性 意味 ポイント
<title> 検索結果やブラウザタブに表示されるタイトル ページ内容が分かるタイトルにする
meta description 検索結果に表示される説明文 記事の内容を短く説明する
<h1>〜<h3> 記事構造を示す見出し キーワードを自然に含める
alt 画像の説明 画像の内容を具体的に書く
<a> リンク リンク先が分かる文字にする

13. よく使うHTMLタグ一覧

タグ 読み方・意味 主な用途
<h1> 大見出し ページタイトル
<h2> 見出し 記事の大きな章
<h3> 小見出し 章の中の細かい項目
<p> 段落 本文
<br> 改行 住所や詩など、意味のある改行
<strong> 重要な強調 重要な言葉を強調
<em> 強調 ニュアンスを強める
<ul> 順不同リスト 箇条書き
<ol> 順序付きリスト 手順説明
<li> リスト項目 箇条書きの1項目
<a> リンク 別ページや外部サイトへのリンク
<img> 画像 画像表示
<table> 表 比較表・一覧表
<tr> 表の行 表の1行
<th> 表の見出しセル 表の項目名
<td> 表の通常セル 表の内容
<div> 汎用の箱 複数要素をまとめる
<span> 文章中の範囲 一部だけ装飾する
<blockquote> 引用 他サイトや資料からの引用
<pre> 整形済みテキスト コードブロック
<code> コード プログラムやHTMLタグの表示

14. よく使う属性一覧

属性 意味 例
class CSSで装飾するための名前 <div class="note">
id ページ内で1つだけ使う識別名 <h2 id="summary">
href リンク先URL <a href="https://example.com">
src 画像やファイルの場所 <img src="image.jpg">
alt 画像の説明 <img alt="説明文">
target リンクの開き方 target="_blank"
rel リンク先との関係 rel="noopener"
width 幅 width="800"
height 高さ height="450"
loading 画像の読み込み方法 loading="lazy"

15. CSSとの関係

HTMLは文章や構造を作り、CSSは見た目を整えます。
たとえば、次のHTMLにCSSを指定すると、補足ボックスのような見た目を作れます。

HTML

<div class="note">
  <strong>補足：</strong><br>
  ここに補足説明を書きます。
</div>

CSS

.note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 16px;
}
Cocoonでの使い方：
Cocoonなら、記事本文にHTMLを書き、共通デザインは「外観」→「カスタマイズ」→「追加CSS」に書いておくと管理しやすいです。

16. WordPress記事で避けたいHTML

避けたい書き方：

  • 記事本文に <html>、<head>、<body> まで貼る
  • 見出しの順番をバラバラにする
  • <br> を大量に使って余白を作る
  • 画像に alt を入れない
  • リンク文字を「こちら」だけにする
  • 表をスマホで確認しない
  • CSSを記事ごとにバラバラに書きすぎる

17. そのまま使える記事本文テンプレート

WordPressの記事本文に貼る場合は、次のような構成が使いやすいです。

<p>
この記事では、〇〇について分かりやすく解説します。
</p>

<div class="toc">
  <strong>この記事で分かること</strong>
  <ol>
    <li>〇〇の基本</li>
    <li>〇〇の使い方</li>
    <li>注意点と対策</li>
  </ol>
</div>

<h2>1. 〇〇とは？</h2>

<p>
ここに説明を書きます。
</p>

<h2>2. 〇〇の使い方</h2>

<ul>
  <li>ポイント1</li>
  <li>ポイント2</li>
  <li>ポイント3</li>
</ul>

<h2>3. 注意点</h2>

<div class="note">
  <strong>注意：</strong><br>
  ここに注意点を書きます。
</div>

<h2>まとめ</h2>

<p>
この記事のまとめを書きます。
</p>

18. 最低限覚えるタグ

まずは、次のタグだけ覚えれば、かなりの記事が作れます。

見出し： <h2>、<h3>
本文： <p>、<strong>
箇条書き： <ul>、<ol>、<li>
リンク・画像： <a>、<img>
表： <table>、<tr>、<th>、<td>

19. まとめ

HTMLは、Webページの見た目を作るものというより、文章や画像、リンク、表などに「意味」を与えるためのものです。
正しいタグを使うことで、読みやすい記事になり、検索エンジンにも内容が伝わりやすくなります。

HTML記事作成の基本方針：

  • 見出しは <h2>、<h3> を中心に整理する
  • 本文は <p> で段落に分ける
  • 箇条書きは <ul> や <ol> を使う
  • 画像には必ず alt を入れる
  • 表はスマホ表示も確認する
  • デザインはCSSで共通化する
  • WordPress記事本文には、ページ全体ではなく本文部分だけを書く

※この記事は、サイト作成やWordPress記事編集でHTMLを使う方向けの基本メモです。
実際の表示は、使用しているWordPressテーマや追加CSSによって変わります。


スポンサーリンク