HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説 – devsakaso

HTMLタグを使い分けるときは、最初に「見た目」ではなく「意味」で考えるとわかりやすいです。

たとえば、文章の段落なら p、意味のない大きな箱なら div、文章の一部だけを囲みたいなら span を使います。

見た目を横並びにしたい、改行させたい、中央寄せにしたい、という調整はHTMLタグではなくCSSで行います。

この記事では、HTMLで迷いやすい次のタグを中心に、使い分けを整理します。

div、p、span の違い
div を使いすぎないための考え方
h1、h2、h3 の使い分け
aside タグの使い方
p タグの中に div を入れてよいのか
HTMLタグとCSSの display の関係

HTMLタグの使い分けは意味で考える

HTMLタグは、文章やページ構造に意味をつけるために使います。

まずは、よく迷うタグの役割を一覧で見ておきましょう。

タグ	主な意味	使う場面
`p`	段落	文章のまとまりを書くとき
`div`	意味を持たない汎用コンテナ	CSSやJavaScriptのために範囲をまとめたいとき
`span`	意味を持たないインラインの範囲	文章の一部だけを囲みたいとき
`h1`	ページの主題	ページや記事のタイトル
`h2`	大きな見出し	記事内の主要な章
`h3`	h2の中の小見出し	章の中をさらに分けたいとき
`aside`	本文と間接的に関係する補足	サイドバー、補足、関連記事、注意書き

大事なのは、div は便利ですが、最初に選ぶタグではないということです。

文章なら p、リストなら ul や ol、見出しなら h2 や h3、補足なら aside のように、意味が合うタグを先に考えます。

意味が合うタグがないときに、最後に div や span を使います。

div・p・spanの違い

div、p、span は、どれもページ内の一部を囲むために使えます。

ただし、意味と使う範囲が違います。

pタグは文章の段落に使う

p タグは、文章の段落を表すタグです。

普通の説明文、本文、導入文、まとめ文など、文章としてひとまとまりになっている部分に使います。

<p>HTMLタグは、ページ内の文章や構造に意味をつけるために使います。</p>

p は「改行したいから使うタグ」ではありません。

見た目としては前後に余白がつくことが多いですが、本来の意味は段落です。

段落ではないものを余白目的で p に入れるのは避けた方がよいです。

pタグの中にdivを入れない

p タグの中に div を入れる書き方は避けます。

p は段落なので、文章の途中に大きなブロック構造を入れる用途には向いていません。

たとえば、次のような書き方はよくありません。

<p>
  説明文です。
  <div class="note">補足です。</div>
</p>

段落と補足の箱を分けたい場合は、次のように書きます。

<p>説明文です。</p>

<div class="note">
  <p>補足です。</p>
</div>

複数の段落やリストをまとめて装飾したい場合は、p ではなく div で外側を囲みます。

<div class="example">
  <p>最初の説明文です。</p>
  <ul>
    <li>ポイント1</li>
    <li>ポイント2</li>
  </ul>
</div>

divタグは意味を持たない大きな箱

div タグは、意味を持たない汎用的なコンテナです。

CSSで背景色をつけたい、複数の要素をまとめてレイアウトしたい、JavaScriptで操作する範囲を作りたい、というときに使います。

<div class="profile-card">
  <h2>プロフィール</h2>
  <p>Web制作を学習しています。</p>
</div>

上の例では、profile-card というまとまりを作るために div を使っています。

ただし、div は意味を持たないので、意味のあるタグで表せる場合はそちらを優先します。

たとえば、記事全体なら article、ページの主要コンテンツなら main、ナビゲーションなら nav、補足なら aside を検討します。

spanタグは文章の一部を囲む小さな箱

span タグは、文章の一部だけを囲むときに使います。

div と同じく意味は持ちませんが、span はインラインの範囲を囲むためのタグです。

<p>この文章の<span class="marker">重要な部分</span>だけ色を変えます。</p>

次のようにCSSを書くと、文章の一部だけを装飾できます。

.marker {
  background: #fff3a3;
  font-weight: bold;
}

文章全体や複数の要素をまとめるなら div、文章の一部だけなら span と考えるとわかりやすいです。

divを使いすぎないための判断基準

HTMLを書いていると、なんでも div で囲みたくなることがあります。

ただ、div ばかりになると、コードを見ても「これは何のまとまりなのか」がわかりにくくなります。

迷ったときは、次の順番で考えるのがおすすめです。

文章なら p
見出しなら h2 や h3
箇条書きなら ul や ol
表なら table
リンクなら a
補足やサイドバーなら aside
記事として独立しているなら article
意味のある範囲を作れない場合に div

div が悪いわけではありません。

意味のあるタグでは表せないまとまりを作るときには、div はとても便利です。

ただし、「レイアウトのためだけに全部 div」にするより、HTMLとして意味が伝わるタグを選ぶ方が、あとから修正しやすくなります。

h1・h2・h3タグの使い分け

h1、h2、h3 は、見出しを表すタグです。

文字を大きくするためのタグではなく、ページの構造を伝えるためのタグです。

タグ	役割	記事での使い方
`h1`	ページ全体の主題	記事タイトル
`h2`	大きな章	記事内の主要な見出し
`h3`	h2の中の小見出し	章の中をさらに分ける見出し

たとえば、記事本文では次のような構造にします。

<h1>HTMLタグの使い分け</h1>

<h2>div・p・spanの違い</h2>
<h3>pタグは段落に使う</h3>
<h3>divタグは大きな箱に使う</h3>
<h3>spanタグは文章の一部に使う</h3>

<h2>h1・h2・h3の使い分け</h2>

WordPressの記事では、記事タイトルがテーマ側で h1 として出力されることが多いです。

その場合、本文の中には新しく h1 を入れず、本文は h2 から始めるのが自然です。

h1タグは使わない方がよいのか

h1 タグを使わない方がよい、という意味ではありません。

ページには主題を表す見出しが必要なので、基本的には h1 は必要です。

ただし、WordPressやブログでは記事タイトルがすでに h1 になっていることがあります。

その状態で本文内にも h1 を何度も追加すると、ページ構造がわかりにくくなります。

そのため、記事編集画面で本文を書くときは、基本的に h2 から使うと考えておくとよいです。

h2とh3の違い

h2 は記事内の大きな章、h3 はその章の中の小見出しです。

たとえば「div・p・spanの違い」が h2 なら、「pタグは段落に使う」「divタグは大きな箱に使う」は h3 になります。

見た目のサイズで h2 と h3 を選ぶのではなく、文章の階層で選びます。

文字サイズを変えたい場合は、HTMLタグではなくCSSで調整します。

.post h2 {
  font-size: 2.4rem;
}

.post h3 {
  font-size: 2rem;
}

asideタグの使い方

aside タグは、本文と間接的に関係する補足を表すタグです。

よくある使い方は、サイドバー、関連記事、補足情報、注意書き、プロフィールなどです。

<article>
  <h1>HTMLタグの使い分け</h1>
  <p>本文が入ります。</p>

  <aside>
    <h2>関連記事</h2>
    <ul>
      <li><a href="/css-display/">displayプロパティの使い方</a></li>
    </ul>
  </aside>
</article>

aside は「左側に置くタグ」「右側に置くタグ」という意味ではありません。

左に置くか右に置くか、横幅をどうするかはCSSで決めます。

.layout {
  display: flex;
  gap: 24px;
}

.content {
  flex: 1;
}

.sidebar {
  width: 280px;
}

HTMLでは意味を表し、CSSで見た目を決める、と分けて考えると混乱しにくいです。

HTMLタグとCSSのdisplayは分けて考える

div や p は、初期状態では改行されるように表示されます。

一方で、span や a は、初期状態では文章の中に横並びで表示されます。

ただし、最終的な表示はCSSの display で変えられます。

.inline-box {
  display: inline-block;
}

.block-link {
  display: block;
}

つまり、タグの意味と表示は別です。

HTMLタグは「意味」を決める
CSSの display は「表示のされ方」を決める

div を改行させない方法や、span をブロックのように表示する方法は、インライン要素とブロック要素の違いで詳しく解説しています。

aタグとpタグの使い分け

文章の中にリンクを入れたい場合は、p の中に a を書くのが基本です。

<p>
  詳しくは<a href="/html-link/">HTMLのリンクの貼り方</a>を参考にしてください。
</p>

文章全体をリンクにしたい場合や、カード全体をリンクにしたい場合は、別の考え方が必要です。

詳しくは aタグをpタグで囲む？リンクと段落の正しい書き方で解説しています。

よくあるNG例

HTMLタグの使い分けで、よくあるNG例をまとめます。

見た目のためだけに見出しタグを使う

文字を大きくしたいだけで h2 や h3 を使うのは避けます。

見出しではない文章を大きくしたい場合は、CSSで調整します。

改行や余白のためだけにpタグを使う

p は段落を表すタグです。

余白を作りたいだけなら、CSSの margin や padding を使います。

なんでもdivで囲む

div は便利ですが、意味のあるタグで書ける場合はそちらを優先します。

意味のあるタグを使うと、コードを読んだときに構造がわかりやすくなります。

pタグの中に大きなブロックを入れる

段落の中に div、ul、table などを入れてまとめようとするより、外側の div や section で段落ごとまとめる方が自然です。

迷ったときの早見表

HTMLタグ選びで迷ったら、次の表を目安にしてください。

やりたいこと	使うタグ
文章の段落を書きたい	`p`
文章の一部だけ色を変えたい	`span`
複数の要素をまとめてCSSを当てたい	`div`
記事内の大きな章を作りたい	`h2`
章の中に小見出しを作りたい	`h3`
補足や関連記事を置きたい	`aside`
横並びや改行を調整したい	CSSの `display`

まとめ

HTMLタグは、見た目ではなく意味で選びます。

この記事のポイントをまとめると、次のようになります。

p は文章の段落に使う
div は意味を持たない大きな箱として使う
span は文章の一部だけを囲むときに使う
div を使う前に、意味のあるタグで書けないか考える
h1 はページの主題、h2 は大きな章、h3 は小見出し
WordPress本文では、記事タイトルが h1 になることが多いので本文は h2 から始める
aside はサイドバーや補足など、本文と間接的に関係する内容に使う
改行や横並びなどの見た目はCSSで調整する

HTMLタグの意味を整理しておくと、CSSやJavaScriptを書くときにも迷いにくくなります。