HTMLでWebページを作るとき、div・p・spanはとてもよく使うタグです。どれも画面に文字や要素を表示するために使えますが、目的や使う場所が異なります。違いを理解すると、HTMLの構造が読みやすくなり、CSSで見た目を整えるときにも扱いやすくなります。
HTMLのdiv・p・spanの違いの基本
divはまとまりを作るためのタグです
divは、複数の要素をひとつのグループとしてまとめるためによく使われるタグです。たとえば、見出し、文章、画像、ボタンなどをまとめて「この部分は1つのエリアです」と示したいときに使います。
div自体には、文章としての意味は強くありません。HTMLでは、このようなタグを「汎用的なタグ」と呼ぶことがあります。汎用的とは、特定の意味に限定されず、いろいろな目的で使えるという意味です。
たとえば、次のようにカード型の表示を作るときに使えます。
<div class="card">
<h3>おすすめ商品</h3>
<p>初心者にも使いやすい商品です。</p>
</div>この例では、h3とpをdivで包んでいます。これにより、「おすすめ商品」というひとまとまりの部品として扱えます。CSSで背景色を付けたり、余白を調整したりするときにも便利です。
pは文章の段落を表すタグです
pは、文章の段落を表すためのタグです。段落とは、ひとまとまりの文章のことです。ブログ記事、説明文、ニュース本文、商品説明など、文章として読ませたい内容にはpを使うのが基本です。
pは単なる表示用の箱ではなく、「ここは文章の段落です」という意味をHTMLに持たせます。HTMLでは、タグの意味を正しく使うことが大切です。これは「セマンティック」と呼ばれる考え方に関係します。セマンティックとは、見た目だけでなく、内容の意味が伝わるように書くことです。
たとえば、次のように使います。
<p>HTMLは、Webページの構造を作るための言語です。</p>
<p>タグを正しく使うことで、読みやすいページを作れます。</p>このように、文章が複数の段落に分かれる場合は、段落ごとにpを使います。すべての文章を1つのdivに入れるよりも、内容の意味が伝わりやすくなります。
spanは文章の一部分を指定するタグです
spanは、文章や要素の一部分だけを指定したいときに使うタグです。divやpと違い、文章の中に自然に入れて使える点が特徴です。
たとえば、文章の中の一部だけ色を変えたい場合や、特定の言葉だけCSSで装飾したい場合に使います。
<p>この商品は<span class="important">本日限定</span>で割引中です。</p>この例では、「本日限定」という部分だけをspanで囲んでいます。これにより、その部分だけ文字色を変えたり、太字にしたりできます。
spanもdivと同じく、タグ自体に強い意味はありません。しかし、divが大きなまとまりを作るために使われるのに対して、spanは小さな範囲、特に文章中の一部分を扱うために使われます。
ブロック要素とインライン要素の違いを知ると理解しやすいです
div・p・spanの違いを理解するうえで、「ブロック要素」と「インライン要素」という考え方も役立ちます。ブロック要素とは、基本的に横幅いっぱいに広がり、前後で改行される要素のことです。インライン要素とは、文章の流れの中に入り、必要な幅だけを使う要素のことです。
divとpは、基本的にブロック要素として扱われます。そのため、HTMLに書くと前後で改行され、1つのまとまりとして表示されます。一方、spanはインライン要素として扱われるため、文章の途中に入れても自然に続いて表示されます。
<div>これはdivです</div>
<p>これはpです</p>
<p>これは<span>spanを含む</span>文章です。</p>この例では、divとpはそれぞれ独立した行のように扱われます。spanは文章の中の一部として扱われるため、文の流れを壊さずに使えます。
目的に合わせてタグを選ぶことが大切です
div・p・spanは、どれも便利なタグですが、見た目だけで選ぶとHTMLがわかりにくくなります。大きなエリアをまとめたいならdiv、文章の段落を書きたいならp、文章中の一部分だけを指定したいならspanを使うと整理しやすくなります。
たとえば、文章全体を囲むだけならpが適していますが、ページのヘッダーや商品カードのようなまとまりを作るならdivが向いています。文章の中で特定の言葉だけ強調したい場合は、spanが扱いやすいです。
それぞれの役割を混同しないことが、読みやすいHTMLを書くための第一歩です。最初は「まとまりはdiv」「文章はp」「一部分はspan」と覚えると、使い分けがしやすくなります。
divタグの特徴と使いどころ
divタグは、HTMLの中で複数の要素をまとめるためによく使われるタグです。見出し、文章、画像、ボタンなどをひとつのグループとして扱いたいときに便利です。divそのものは特別な意味を持たないため、ページの構造を整理したり、CSSで見た目を調整したりするときに使われます。
divタグは要素をグループ化するために使います
divは「division」の略で、分割や区分という意味があります。HTMLでは、ページ内の一部をひとつのまとまりとして区切るために使います。たとえば、商品情報、プロフィール欄、お知らせエリア、ナビゲーション周辺のまとまりなどを作るときに役立ちます。
divは、文章そのものを表すタグではありません。そのため、単にテキストを書くだけならpタグを使うほうが自然です。一方で、複数の要素をまとめて「この部分をひとつの部品として扱いたい」という場合には、divが向いています。
<div class="profile">
<h3>山田太郎</h3>
<p>HTMLとCSSを学習中です。</p>
<p>Web制作に興味があります。</p>
</div>この例では、名前の見出しと2つの文章をdivでまとめています。これにより、プロフィール全体に背景色を付けたり、枠線を付けたり、余白を設定したりしやすくなります。CSSを書くときにも、profileというクラス名を指定して、まとまり全体にスタイルを当てられます。
.profile {
padding: 20px;
border: 1px solid #ccc;
}このように、divはHTMLの内容を整理するための箱のような役割を持っています。ただし、箱というイメージだけで何でもdivに入れてしまうと、あとから見たときに何のためのまとまりなのか分かりにくくなることがあります。
divタグはレイアウト調整でよく使われます
Webページでは、要素を横並びにしたり、中央に配置したり、カードのような見た目にしたりする場面が多くあります。そのようなレイアウト調整では、divがよく使われます。レイアウトとは、画面上で要素をどの位置に、どのような大きさで配置するかを決めることです。
たとえば、複数の商品カードを並べたい場合、それぞれの商品情報をdivで囲むと扱いやすくなります。
<div class="item">
<h3>商品A</h3>
<p>使いやすい定番の商品です。</p>
</div>
<div class="item">
<h3>商品B</h3>
<p>軽くて持ち運びやすい商品です。</p>
</div>それぞれのdivに同じitemというクラスを付けておけば、CSSで同じ見た目をまとめて指定できます。クラスとは、HTML要素に名前を付けて、CSSやJavaScriptから指定しやすくするための仕組みです。
divは、ページ全体の大きな構成にも使えます。たとえば、ヘッダー部分、メインコンテンツ部分、サイドバー部分、フッター部分などを分けるときにも使われます。ただし、HTML5ではheader、main、section、footerのように意味を持つタグもあります。意味がはっきりしている場合は、それらのタグを使ったほうが内容が伝わりやすくなります。
divタグは意味を持たないため使いすぎに注意します
divは便利ですが、使いすぎるとHTMLが読みにくくなります。特に、すべての要素をdivだけで作ってしまうと、どこが見出しで、どこが文章で、どこが重要な内容なのか分かりにくくなります。
たとえば、次のような書き方はおすすめしにくいです。
<div>HTMLの学習</div>
<div>HTMLはWebページの構造を作るための言語です。</div>見た目上は表示できますが、最初のdivが見出しなのか、次のdivが文章なのか、HTMLだけを見ると判断しにくくなります。この場合は、見出しにはh2やh3、文章にはpを使うほうが適しています。
<h2>HTMLの学習</h2>
<p>HTMLはWebページの構造を作るための言語です。</p>HTMLでは、見た目だけでなく、内容の意味が伝わるようにタグを選ぶことが大切です。この考え方を「セマンティック」と呼びます。セマンティックとは、タグの役割や意味を意識してHTMLを書く考え方です。
divは意味を持たない汎用的なタグです。汎用的とは、特定の用途に限定されず、さまざまな目的で使えるという意味です。そのため、他に適したタグがある場合は、まず意味のあるタグを選び、それでもまとまりを作りたい場合にdivを使うとよいです。
divタグを使う判断基準
divを使うかどうか迷ったときは、「複数の要素をひとつのまとまりとして扱いたいか」を考えると判断しやすくなります。文章だけならp、文章中の一部分だけならspan、複数の要素をまとめたいならdivが基本です。
たとえば、次のような場面ではdivが向いています。
- 商品カード全体をまとめたいとき
- プロフィール欄をひとつの部品として扱いたいとき
- 画像と説明文をセットにしたいとき
- CSSで背景色や余白をまとめて指定したいとき
- JavaScriptで特定のエリア全体を操作したいとき
JavaScriptとは、Webページに動きを付けるためによく使われるプログラミング言語です。たとえば、ボタンを押したらメニューを開く、入力内容に応じて表示を変える、といった処理に使われます。divでまとまりを作っておくと、その範囲全体をJavaScriptで操作しやすくなります。
<div id="message-box">
<p>お知らせがあります。</p>
<button>閉じる</button>
</div>この例では、お知らせ文とボタンをdivでまとめています。idは、HTML要素に固有の名前を付けるための属性です。属性とは、タグに追加情報を持たせるための書き方です。id="message-box"と付けることで、このお知らせエリアをCSSやJavaScriptから指定しやすくなります。
pタグの特徴と文章での使い方
pタグは、HTMLで文章の段落を表すために使うタグです。段落とは、ひとまとまりになった文章のことです。Webページで説明文、本文、紹介文、注意書きなどを書くときは、ただ文字を置くのではなく、pタグを使って「ここは文章です」とHTML上で示すことが大切です。
pタグは文章の段落を表します
pは「paragraph」の略で、段落という意味があります。HTMLでは、文章を意味のまとまりごとに分けるために使います。たとえば、ブログ記事の本文、サービス説明、商品説明、プロフィール文など、読ませるための文章にはpタグが適しています。
<p>HTMLは、Webページの構造を作るための言語です。見出しや文章、画像、リンクなどをタグで指定して、ページの内容を組み立てます。</p>
<p>タグの意味を意識して書くことで、あとからコードを見返したときにも内容を理解しやすくなります。</p>この例では、2つの文章のまとまりをそれぞれpタグで囲んでいます。1つ目はHTMLの説明、2つ目はタグを正しく使うメリットについて書いているため、別々の段落として分けると読みやすくなります。
pタグを使うと、ブラウザでは通常、段落の前後に余白が入ります。ブラウザとは、Webページを表示するためのソフトのことです。余白の見た目はCSSで調整できますが、HTMLではまず「これは文章の段落である」と正しく表すことが重要です。
divタグとの違いは文章としての意味があることです
divタグも文字を表示できますが、divは文章の段落を表すタグではありません。divは複数の要素をまとめるための汎用的なタグです。汎用的とは、特定の意味に限定されず、いろいろな目的に使えるという意味です。
たとえば、次のように文章をdivだけで書くことも画面上は可能です。
<div>HTMLはWebページの構造を作るための言語です。</div>
<div>タグの意味を理解すると、コードが読みやすくなります。</div>しかし、この書き方では、それぞれが文章の段落であることがHTMLの意味として伝わりにくくなります。文章として読ませたい内容であれば、次のようにpタグを使うほうが自然です。
<p>HTMLはWebページの構造を作るための言語です。</p>
<p>タグの意味を理解すると、コードが読みやすくなります。</p>HTMLでは、見た目だけでなく内容の意味に合ったタグを選ぶ考え方が大切です。この考え方を「セマンティック」と呼びます。セマンティックとは、タグの意味を意識して、コンピューターや他の開発者にも内容が伝わりやすいように書くことです。
pタグは、「これは文章の段落です」と伝える役割があります。そのため、単なる配置やデザインのためではなく、文章の意味を表すために使うと理解すると分かりやすいです。
pタグの中に入れられる内容に注意します
pタグは文章の段落を表すタグなので、基本的には文章や、文章の中に自然に入る要素を含めます。たとえば、spanタグやaタグは文章中に入れて使いやすいタグです。aタグはリンクを作るためのタグです。
<p>この講座では、<span class="point">HTMLの基本</span>から学習できます。</p>この例では、文章の一部である「HTMLの基本」だけをspanで囲んでいます。spanは文章の一部分を指定するためのタグなので、pタグの中で使いやすいです。
一方で、pタグの中に大きなまとまりを作るdivタグを入れる書き方は避けるべきです。divはブロック要素として扱われるタグで、ブロック要素とは、基本的に1つの大きなまとまりとして表示され、前後で改行される要素のことです。段落の中にさらに大きな箱を入れるような形になるため、HTMLの構造として不自然になります。
<p>
これは文章です。
<div>補足情報です。</div>
</p>このような書き方は、初心者が間違えやすい例です。補足情報を別のまとまりとして表示したい場合は、pタグの外にdivを置くほうが適しています。
<p>これは文章です。</p>
<div class="note">
<p>補足情報です。</p>
</div>このように、文章はpで表し、複数の要素をまとめる場合は外側にdivを使うと、HTMLの構造が整理されます。
pタグは段落ごとに分けて使います
長い文章をすべて1つのpタグに入れると、読みづらくなることがあります。文章の内容が変わるところや、話題が切り替わるところでは、段落を分けて別のpタグにすると読みやすくなります。
<p>HTMLでは、ページの構造をタグで表します。見出し、文章、画像、リストなど、それぞれに合ったタグを使うことが大切です。</p>
<p>特に文章を書くときは、段落ごとにpタグを使うと、内容のまとまりが分かりやすくなります。</p>
<p>あとからCSSで余白や文字サイズを調整するときにも、段落が分かれているほうが管理しやすくなります。</p>この例では、内容のまとまりごとにpタグを分けています。1つ目はHTML全体の説明、2つ目はpタグの使い方、3つ目はCSSで調整するときの利点について書いています。
CSSとは、HTMLで作った構造に対して、色、余白、文字サイズ、配置などの見た目を指定するための言語です。pタグで段落を分けておくと、CSSで段落同士の間隔を整えたり、本文全体の読みやすさを調整したりしやすくなります。
pタグは、ただ文字を囲むためのタグではありません。文章を意味のある段落として整理し、読み手にもコードを見る人にも分かりやすくするための基本的なタグです。
spanタグの特徴と部分的な装飾
spanタグは、文章や要素の一部分だけを指定したいときに使うタグです。divやpのように大きなまとまりを作るのではなく、文の流れの中で特定の文字や語句だけを扱いたい場面に向いています。見た目を少し変えたい場合や、JavaScriptで一部分だけ操作したい場合にも使われます。
spanタグは文章の一部を囲むために使います
spanタグは、文章の中に自然に入れて使えるタグです。たとえば、文章全体ではなく、特定の単語だけ色を変えたい場合や、注意して読んでほしい言葉だけ装飾したい場合に役立ちます。
<p>この講座は<span class="highlight">初心者向け</span>の内容です。</p>この例では、「初心者向け」という部分だけをspanで囲んでいます。pタグは段落全体を表し、spanタグはその段落の中の一部分を指定しています。このように、spanは文章全体ではなく、文章中の小さな範囲を扱うために使うと理解しやすいです。
span自体には、強い意味はありません。HTMLでは、このようなタグを汎用的なタグと呼ぶことがあります。汎用的とは、特定の意味に限定されず、さまざまな目的に使えるという意味です。そのため、spanを使っただけでは、画面上の表示が大きく変わるわけではありません。
見た目を変えるには、CSSを組み合わせます。CSSとは、HTMLで作った構造に色、サイズ、余白、配置などの見た目を指定するための言語です。
.highlight {
font-weight: bold;
color: red;
}このCSSを使うと、class="highlight"が付いた部分だけを太字にし、文字色を赤にできます。classとは、HTML要素に名前を付けて、CSSやJavaScriptから指定しやすくするための属性です。属性とは、タグに追加情報を与える書き方です。
spanタグはインライン要素として扱われます
spanタグは、インライン要素として扱われます。インライン要素とは、文章の流れの中に入り、必要な幅だけを使って表示される要素のことです。文章の途中に入れても、基本的には前後で改行されません。
<p>HTMLでは、<span>タグ</span>を使って構造を作ります。</p>この例では、spanで囲まれた「タグ」という文字は、文章の一部として自然に表示されます。divのように前後で大きく改行されることはありません。
一方、divやpは基本的にブロック要素として扱われます。ブロック要素とは、1つの大きなまとまりとして表示され、通常は前後で改行される要素のことです。たとえば、divはカードやエリアなどのまとまりを作るときに使われ、pは文章の段落を表すために使われます。
spanは、こうしたブロック要素とは違い、文章の中の小さな範囲を指定するために適しています。つまり、大きな箱を作りたいときはdiv、文章の段落を作りたいときはp、文章中の一部だけを指定したいときはspanを選ぶと整理しやすいです。
spanタグは意味を追加するタグではありません
spanタグは便利ですが、意味を持たないタグであることを理解しておく必要があります。たとえば、「重要な文章」を表したい場合に、単にspanで囲むだけでは、HTMLとして重要であることは伝わりません。
<p><span>重要なお知らせ</span>があります。</p>この書き方でも画面には表示されますが、spanだけでは「重要」という意味はHTML上では表現されません。見た目だけを変えたい場合には使えますが、意味も伝えたい場合は、目的に合ったタグを考える必要があります。
たとえば、強い重要性を示したい場合はstrongタグを使います。strongタグは、内容が重要であることを表すタグです。
<p><strong>重要なお知らせ</strong>があります。</p>このように、意味を持つタグがある場合は、先にそのタグを使うことを検討します。spanは、意味を表すよりも、CSSやJavaScriptで一部分を扱うために使うタグだと考えるとよいです。
JavaScriptとは、Webページに動きを付けるためによく使われるプログラミング言語です。たとえば、特定の文字をクリックしたときに説明を表示する、入力内容に応じて文字を変更する、といった処理に使われます。
<p>現在の状態：<span id="status">未完了</span></p>この例では、id="status"を付けたspanの中身をJavaScriptで変更することができます。idとは、HTML要素に固有の名前を付けるための属性です。ページ内で特定の要素を1つだけ指定したいときによく使われます。
spanタグを使う場面を具体的に考えます
spanタグは、文章や表示の一部だけを細かく扱いたいときに便利です。特に、文章の流れを崩さずに一部だけ装飾したい場合に向いています。
たとえば、次のような場面で使えます。
- 文章中の一部だけ文字色を変えたいとき
- 商品価格の数字だけ目立たせたいとき
- 入力エラーの該当部分だけ装飾したいとき
- JavaScriptで一部の文字だけ変更したいとき
- アイコンや短いラベルを文章内に入れたいとき
<p>価格は<span class="price">3,000円</span>です。</p>この例では、「3,000円」という価格部分だけをspanで囲んでいます。あとからCSSで価格だけを大きくしたり、色を変えたりできます。
ただし、見た目を整える目的だけで、何でもspanにするのはおすすめできません。文章全体を囲む場合はp、複数の要素をまとめる場合はdiv、一部分だけを扱う場合はspanという基準を持つと、HTMLが読みやすくなります。
div・p・spanの使い分けをコード例で確認
div・p・spanの違いは、実際のHTMLコードで確認すると理解しやすくなります。大きなまとまりを作るときはdiv、文章の段落を書くときはp、文章中の一部分だけを指定するときはspanを使います。それぞれの役割を意識して書くことで、HTMLの構造が整理され、CSSでの装飾もしやすくなります。
商品カードの例で使い分けを確認します
Webページでは、商品やサービスの情報をカードのように表示することがあります。このような場合は、カード全体をdivで囲み、その中に見出しや文章を配置します。文章として読ませたい説明文にはpを使い、説明文の一部だけ目立たせたい場合にはspanを使います。
<div class="card">
<h3>HTML入門講座</h3>
<p>この講座は<span class="emphasis">未経験者にも分かりやすい</span>内容です。</p>
<p>基本のタグから、ページ構造の考え方まで学べます。</p>
</div>この例では、div class="card"がカード全体のまとまりを作っています。h3はカードの見出し、pは説明文の段落、spanは説明文の一部分を指定するために使っています。
classとは、HTML要素に名前を付けて、CSSやJavaScriptから指定しやすくするための属性です。属性とは、タグに追加情報を与える書き方です。この例では、cardというクラス名を使ってカード全体を装飾でき、emphasisというクラス名を使って文章の一部だけを装飾できます。
.card {
padding: 16px;
border: 1px solid #cccccc;
}
.emphasis {
font-weight: bold;
}CSSとは、HTMLで作った構造に対して、色、余白、文字サイズ、配置などの見た目を指定するための言語です。divでまとまりを作っておくとカード全体に枠線や余白を付けやすくなり、spanを使うと文章の一部分だけを太字にできます。
お知らせ文の例で使い分けを確認します
お知らせエリアを作る場合も、div・p・spanを役割ごとに使い分けます。お知らせ全体はひとつの部品として扱えるためdivで囲み、本文は文章なのでpで表します。日付や注意語句だけを装飾したい場合にはspanを使います。
<div class="notice">
<p><span class="date">2026年6月16日</span>にメンテナンスを実施します。</p>
<p>作業中は一部の機能が利用できません。</p>
</div>この例では、noticeというdivが、お知らせ全体のまとまりです。その中に2つのpタグがあり、それぞれが文章の段落になっています。さらに、日付部分だけをspanで囲むことで、日付だけに装飾を指定できます。
このように書くと、HTMLを読んだときに「ここはお知らせのまとまり」「ここは文章」「ここは日付部分」と役割を判断しやすくなります。見た目だけを考えてすべてをdivにするよりも、内容の意味に合ったタグを使うほうが、あとから修正しやすいコードになります。
<div class="notice">
<div>2026年6月16日にメンテナンスを実施します。</div>
<div>作業中は一部の機能が利用できません。</div>
</div>この書き方でも画面には文字が表示されますが、内側のdivが文章の段落であることは伝わりにくくなります。文章として読ませたい内容なら、pを使うほうが適しています。
プロフィール欄の例で構造を整理します
プロフィール欄のように、名前、説明文、補足情報などをまとめて表示する場合は、外側にdivを使うと整理しやすくなります。その中で、文章のまとまりにはpを使い、文章中の一部だけを扱いたいときにspanを使います。
<div class="profile">
<h3>山田太郎</h3>
<p>フロントエンドを学習している受講生です。</p>
<p>現在は<span class="learning">HTMLとCSS</span>を中心に学んでいます。</p>
</div>フロントエンドとは、WebサイトやWebアプリケーションで、ユーザーが直接見る画面側の部分を指す言葉です。この例では、プロフィール欄全体をdivで囲み、自己紹介の文章をpで分けています。
span class="learning"は、「HTMLとCSS」という一部分だけを指定しています。この部分だけ色を変えたり、下線を付けたりできます。文章全体ではなく、特定の語句だけを指定したい場合にspanが役立ちます。
同じプロフィール欄でも、次のようにすべてをspanで囲むのは適切ではありません。
<span class="profile">
<span>山田太郎</span>
<span>フロントエンドを学習している受講生です。</span>
</span>spanは文章中の一部分を扱うためのタグなので、プロフィール欄全体のような大きなまとまりには向いていません。大きな構造を作る場合はdivを使うと、HTMLの役割が分かりやすくなります。
判断に迷ったときの考え方
div・p・spanのどれを使うか迷ったときは、まず「何を表したいのか」を考えると判断しやすくなります。見た目ではなく、内容の意味や範囲を基準に選ぶことが大切です。
次のように考えると、初心者でも使い分けやすくなります。
- 複数の要素をまとめたい場合は
div - 文章の段落を書きたい場合は
p - 文章や要素の一部分だけを指定したい場合は
span - 見出しなら
h2やh3 - 重要な意味を持たせたいなら
strongなど意味のあるタグ
HTMLでは、見た目だけでなく、タグの意味を意識して書くことが大切です。この考え方を「セマンティック」と呼びます。セマンティックとは、内容に合ったタグを選び、HTMLを読む人やコンピューターにも意味が伝わるようにする考え方です。
たとえば、文章を中央に配置したいからといって、すべてをdivにする必要はありません。文章ならpで書き、そのpにCSSを指定すればよいです。装飾のためにタグを選ぶのではなく、HTMLでは意味に合ったタグを選び、見た目はCSSで調整するという分担を意識すると、きれいなコードを書きやすくなります。
よくある間違いと正しい書き方
div・p・spanは使いやすいタグですが、初心者のうちは役割を混同しやすいです。画面に表示できるかどうかだけで判断すると、HTMLの意味が分かりにくくなったり、CSSで調整しづらくなったりします。ここでは、よくある間違いを確認しながら、より自然な書き方を見ていきます。
すべてをdivで書いてしまう間違い
divは便利なタグなので、HTMLを書き始めたばかりのころは、見出しも文章もボタン周りもすべてdivで作ってしまうことがあります。確かに、divを使っても文字は表示できます。しかし、HTMLとして見たときに、その内容が見出しなのか、文章なのか、補足情報なのかが分かりにくくなります。
<div>HTMLの学習</div>
<div>HTMLではタグの意味を理解することが大切です。</div>
<div>まずはdiv・p・spanの違いを確認しましょう。</div>この例では、最初の行がタイトルのように見えますが、HTML上はただのdivです。次の2行も文章のように見えますが、段落として表されているわけではありません。人が見れば何となく意味を推測できますが、コードとしては役割があいまいです。
より自然に書くなら、見出しには見出しタグ、文章にはpタグを使います。
<h2>HTMLの学習</h2>
<p>HTMLではタグの意味を理解することが大切です。</p>
<p>まずはdiv・p・spanの違いを確認しましょう。</p>見出しタグとは、ページ内のタイトルや小見出しを表すためのタグです。h2やh3などがあり、数字によって見出しの階層を表します。文章はpタグで書くことで、段落としての意味が伝わります。
pタグの中にdivを入れてしまう間違い
pタグは文章の段落を表すタグです。そのため、文章の中に自然に入る要素は入れられますが、大きなまとまりを作るdivを入れる書き方は避ける必要があります。divは基本的にブロック要素として扱われます。ブロック要素とは、ひとつの大きなまとまりとして表示され、通常は前後で改行される要素のことです。
<p>
商品の説明文です。
<div class="note">送料無料の対象商品です。</div>
</p>この書き方は、段落の中に別の大きな箱を入れているような構造になります。見た目を整える目的でこのように書きたくなることがありますが、HTMLの構造としては不自然です。
正しく整理するなら、文章はpで書き、補足情報のまとまりはpの外に出します。
<p>商品の説明文です。</p>
<div class="note">
<p>送料無料の対象商品です。</p>
</div>この書き方では、商品の説明文は段落として表され、補足情報はdivでひとまとまりにされています。さらに、補足情報の中の文章もpで表されているため、役割が分かりやすくなります。
spanを大きなレイアウトに使ってしまう間違い
spanは、文章の一部分だけを指定するためのタグです。文章中の特定の語句だけ色を変える、価格だけ強調する、状態表示の文字だけ変更するといった場面に向いています。一方で、ページの大きな構造やカード全体を作る目的には向いていません。
<span class="card">
<span>おすすめ講座</span>
<span>HTMLとCSSを基礎から学べます。</span>
</span>この例では、カード全体をspanで作ろうとしています。しかし、spanはインライン要素として扱われます。インライン要素とは、文章の流れの中に入り、必要な幅だけを使って表示される要素のことです。大きなまとまりを作るためのタグではないため、レイアウトを調整しようとすると扱いづらくなります。
カード全体のようなまとまりには、divを使うほうが適しています。
<div class="card">
<h3>おすすめ講座</h3>
<p>HTMLとCSSを基礎から学べます。</p>
</div>この書き方であれば、カード全体をdivでまとめ、見出しはh3、説明文はpで表せます。CSSでカードに背景色や余白、枠線を付けるときも管理しやすくなります。
装飾のためだけに意味を無視してしまう間違い
HTMLを書くときに、見た目を先に考えすぎると、タグの意味を無視した書き方になりやすいです。たとえば、文章を横並びにしたいからspanを使う、余白を付けたいからdivを増やす、太字にしたいから意味を考えずにタグを選ぶ、といった書き方です。
HTMLは構造を作るための言語で、CSSは見た目を整えるための言語です。この2つの役割を分けて考えると、タグ選びで迷いにくくなります。
<p class="center">この文章は中央に表示したい文章です。</p>.center {
text-align: center;
}この例では、文章はpタグで正しく段落として表し、中央寄せはCSSで指定しています。text-alignは、文字の横方向の配置を指定するCSSのプロパティです。プロパティとは、CSSで「何を変えるか」を指定する項目のことです。
装飾したいからといって、文章をdivに変える必要はありません。文章であればpを使い、その見た目をCSSで変えるのが自然です。
タグの役割を基準にした正しい考え方
div・p・spanを正しく使うには、まず表示結果ではなく、内容の役割を考えることが大切です。画面に同じように表示できる場合でも、HTMLとして適切なタグを選ぶことで、読みやすく保守しやすいコードになります。保守しやすいとは、あとから修正や追加をするときに、内容を理解しやすく作業しやすいという意味です。
判断するときは、次のように考えると整理しやすいです。
- 複数の要素をまとめるなら
div - 文章の段落なら
p - 文章中の一部分なら
span - 見出しなら
h2やh3 - 重要性を表すなら
strong - リンクなら
a
たとえば、次のように書くと、それぞれの役割がはっきりします。
<div class="message">
<h3>お知らせ</h3>
<p>次回の授業では、<span class="keyword">HTMLの構造</span>について学習します。</p>
</div>この例では、divがお知らせ全体、h3が見出し、pが文章、spanが文章中の一部分を表しています。タグの役割が分かれているため、HTMLを読む人にも内容が伝わりやすくなります。
HTML構造をきれいにするための考え方
HTML構造をきれいにするには、見た目だけでタグを選ぶのではなく、「その内容が何を表しているのか」を考えて書くことが大切です。div・p・spanは便利なタグですが、それぞれの役割を意識せずに使うと、あとから読みにくいHTMLになりやすいです。内容の意味に合ったタグを選び、必要な場所だけにdivやspanを使うことで、整理されたコードになります。
HTMLは見た目ではなく構造を表します
HTMLは、Webページの見た目を細かく整えるための言語ではなく、ページの構造を作るための言語です。構造とは、見出し、文章、画像、リスト、リンク、まとまりなど、ページ内の情報がどのように組み立てられているかを表すものです。
たとえば、文字を大きく表示したいからといって、何でも見出しタグにするのは適切ではありません。反対に、見出しとして扱うべき内容をdivだけで書いてしまうと、HTML上では見出しであることが伝わりにくくなります。
<div>学習内容</div>
<div>HTMLではタグの意味を意識することが大切です。</div>この書き方でも画面には表示されますが、最初のdivが見出しなのか、次のdivが文章なのかが分かりにくいです。より自然に書くなら、見出しにはh2やh3、文章にはpを使います。
<h2>学習内容</h2>
<p>HTMLではタグの意味を意識することが大切です。</p>このように書くと、HTMLを読む人にも、ブラウザにも、内容の役割が伝わりやすくなります。ブラウザとは、Webページを表示するためのソフトのことです。HTMLはブラウザに対して「この部分は見出しです」「この部分は文章です」と伝える役割を持っています。
divは必要なまとまりにだけ使います
divは、複数の要素をひとつのまとまりとして扱いたいときに使います。便利なタグですが、意味を持たない汎用的なタグです。汎用的とは、特定の意味に限定されず、いろいろな目的で使えるという意味です。
そのため、divを使いすぎると、HTMLが箱だらけになり、どの部分が何を表しているのか分かりにくくなります。特に、文章や見出しまでdivで置き換えてしまうと、コードの意味が弱くなります。
<div class="box">
<div>お知らせ</div>
<div>次回の授業ではCSSの基本を学びます。</div>
</div>この例では、外側のdivはお知らせ全体のまとまりとして使われているため自然です。しかし、内側の「お知らせ」は見出し、「次回の授業ではCSSの基本を学びます。」は文章なので、それぞれに合ったタグを使うほうが分かりやすくなります。
<div class="box">
<h3>お知らせ</h3>
<p>次回の授業ではCSSの基本を学びます。</p>
</div>外側のdivは、お知らせ全体をひとつの部品として扱うために使っています。内側では、見出しと文章に適したタグを使っています。このように、divは必要なまとまりを作る場所にだけ使うと、HTML構造が整理されます。
pとspanは文章の範囲を意識して使います
文章を書くときは、段落全体にはpを使い、文章中の一部分だけを指定したい場合にはspanを使います。pは段落を表すタグで、段落とは、ひとまとまりの文章のことです。説明文、紹介文、注意文など、文章として読ませたい内容にはpが向いています。
<p>HTMLでは、タグの意味を理解して使うことが大切です。</p>一方、spanは文章の一部だけを囲むためのタグです。たとえば、文章の中の特定の語句だけ色を変えたり、JavaScriptで文字を変更したりしたい場合に使います。JavaScriptとは、Webページに動きを付けるためによく使われるプログラミング言語です。
<p>今回の重要ポイントは<span class="point">タグの使い分け</span>です。</p>この例では、文章全体はpで表し、「タグの使い分け」という一部分だけをspanで指定しています。spanはインライン要素として扱われます。インライン要素とは、文章の流れの中に入り、必要な幅だけを使って表示される要素のことです。
文章全体をspanで囲んだり、文章の一部分をわざわざdivで囲んだりすると、構造が分かりにくくなります。文章の範囲が大きいのか小さいのかを考えると、pとspanの使い分けがしやすくなります。
CSSとHTMLの役割を分けて考えます
HTML構造をきれいにするためには、HTMLとCSSの役割を分けて考えることも大切です。HTMLは内容の構造を表し、CSSは見た目を整えます。CSSとは、文字色、背景色、余白、配置、文字サイズなどを指定するための言語です。
初心者のうちは、見た目を変えるためにHTMLタグを選んでしまうことがあります。たとえば、文字を横並びにしたいからspanを使う、余白を付けたいから不要なdivを増やす、といった書き方です。しかし、見た目の調整はCSSで行うのが基本です。
<p class="center">この文章は中央に表示したい文章です。</p>.center {
text-align: center;
}この例では、文章そのものはpで正しく段落として表しています。中央寄せという見た目の指定はCSSで行っています。text-alignは、文字の横方向の位置を指定するCSSのプロパティです。プロパティとは、CSSで「何を変更するか」を示す項目です。
このように、HTMLでは意味に合ったタグを選び、見た目はCSSで調整すると、コードの役割が明確になります。あとからデザインを変更するときも、HTMLを大きく書き換えずにCSSだけを修正しやすくなります。
読み返しやすいHTMLを意識します
きれいなHTML構造は、書いた本人だけでなく、ほかの人が読んでも理解しやすい状態を目指します。プログラミング学習では、画面に表示できたら終わりではなく、あとから見直したときに内容を理解できるかも重要です。
たとえば、次のように役割ごとにタグを分けて書くと、HTMLの意味が分かりやすくなります。
<div class="lesson">
<h3>HTMLタグの使い分け</h3>
<p>大きなまとまりにはdiv、文章の段落にはp、文章の一部分にはspanを使います。</p>
<p>特に<span class="keyword">タグの意味</span>を意識すると、構造が整理されます。</p>
</div>この例では、divが学習内容全体のまとまり、h3が見出し、pが文章の段落、spanが文章中の一部分を表しています。それぞれの役割がはっきりしているため、コードを読むだけで内容の構成をイメージしやすいです。
読み返しやすいHTMLを書くためには、次の点を意識するとよいです。
- 文章はできるだけ
pで段落として書く - 大きなまとまりだけを
divで囲む - 一部分の装飾や操作には
spanを使う - 見出しには
h2やh3などの見出しタグを使う - 見た目の調整はCSSに任せる
- クラス名は内容や役割が分かる名前にする
クラス名とは、class="lesson"のようにHTML要素へ名前を付けるためのものです。CSSで指定しやすくなるだけでなく、コードを読んだときに「この部分は何のまとまりなのか」を理解する助けにもなります。
まとめ
div・p・spanは、HTMLでよく使われる基本的なタグです。どれも画面に内容を表示できますが、役割はそれぞれ異なります。大きなまとまりを作るときはdiv、文章の段落を表すときはp、文章や要素の一部分だけを指定するときはspanを使います。タグの意味を意識して使い分けることで、読みやすく管理しやすいHTMLになります。
divはまとまりを作るために使います
divは、複数の要素をひとつのグループとしてまとめたいときに使います。たとえば、商品カード、プロフィール欄、お知らせエリア、レイアウト用の箱などを作る場面で役立ちます。
div自体には、文章や見出しのような具体的な意味はありません。このようなタグは、汎用的なタグと呼ばれることがあります。汎用的とは、特定の目的だけに限定されず、さまざまな場面で使えるという意味です。
<div class="card">
<h3>おすすめ講座</h3>
<p>HTMLとCSSを基礎から学べます。</p>
</div>この例では、見出しと文章をdivで囲み、カード全体として扱えるようにしています。CSSで背景色や余白、枠線を付けたい場合も、外側にdivがあると指定しやすくなります。ただし、文章や見出しまで何でもdivにしてしまうと、HTMLの意味が分かりにくくなるため注意が必要です。
pは文章の段落を表します
pは、文章の段落を表すタグです。段落とは、ひとまとまりの文章のことです。説明文、本文、紹介文、注意書きなど、読ませるための文章にはpを使うのが基本です。
<p>HTMLは、Webページの構造を作るための言語です。</p>
<p>タグの意味を理解すると、読みやすいコードを書きやすくなります。</p>このように、話題や意味のまとまりごとにpを分けると、文章が読みやすくなります。ブラウザでは、pタグの前後に余白が付くことが多いですが、これは見た目の結果です。大切なのは、pが「ここは文章の段落です」とHTML上で示す役割を持っている点です。
文章をdivで書いても表示はできますが、段落としての意味は伝わりにくくなります。HTMLでは、見た目だけでなく内容の意味に合ったタグを選ぶことが大切です。
spanは一部分だけを指定するときに使います
spanは、文章や要素の一部分だけを指定したいときに使います。文章全体ではなく、特定の単語や短い範囲だけを装飾したい場合に便利です。
<p>重要なポイントは<span class="keyword">タグの使い分け</span>です。</p>この例では、「タグの使い分け」という一部分だけをspanで囲んでいます。CSSを使えば、この部分だけ文字色を変えたり、太字にしたりできます。CSSとは、HTMLで作った構造に対して、色、余白、文字サイズ、配置などの見た目を指定するための言語です。
spanはインライン要素として扱われます。インライン要素とは、文章の流れの中に入り、必要な幅だけを使って表示される要素のことです。そのため、文章の途中に入れても自然に表示されます。大きなまとまりを作りたい場合にはspanではなく、divを使うほうが適しています。
タグの意味を意識して使い分けます
div・p・spanを使い分けるときは、まず「その内容が何を表しているのか」を考えることが大切です。見た目だけでタグを選ぶと、あとから修正しにくいHTMLになりやすいです。
判断に迷ったときは、次のように考えると整理しやすくなります。
- 複数の要素をまとめたい場合は
div - 文章の段落を書きたい場合は
p - 文章中の一部分だけを指定したい場合は
span - 見出しを書きたい場合は
h2やh3 - 重要な意味を示したい場合は
strong - リンクを作りたい場合は
a
HTMLでは、内容の意味に合ったタグを選ぶ考え方を「セマンティック」と呼びます。セマンティックとは、タグの意味を意識して、HTMLを読む人やコンピューターにも内容が伝わりやすいように書くことです。
たとえば、文章を中央寄せにしたい場合でも、文章であればpを使い、中央寄せはCSSで指定します。HTMLは構造を作り、CSSは見た目を整えるという役割分担を意識すると、コードが整理されます。
<p class="center">この文章は中央に表示したい文章です。</p>.center {
text-align: center;
}div・p・spanは、HTML学習の早い段階で何度も使うタグです。最初は「まとまりはdiv」「文章はp」「一部分はspan」と覚えると、実際のコードでも迷いにくくなります。役割に合ったタグを選べるようになると、Webページの構造が分かりやすくなり、CSSやJavaScriptを組み合わせるときにも扱いやすくなります。
