[html] span と p の使い分けがわからん

Question

w3cに以下のようなサンプルコードがありました（わかりやすくするため、一部省略しました）。

<article>

  <header>
    <!-- 記事タイトルとか -->
  </header>

  <div>
    <!-- 記事本文 -->
  </div>

  <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
  </footer>

</article>

上のコードの

<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>

というところは、

<span>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</span>

でもよくないですか（つまり、pタグではなくspanタグで囲んでもよくね）？

htmlにあまり詳しくないので、なぜ段落を表すpタグを、段落でないところでつかってるのかわからないのですが、何か理由があったり？

Comments

[think49]

どういう意図で<span>で良いと考えたのでしょう。「一文しかないので<p>は不要ではないですか」というのなら、まだわかりますが、<span>に置き換える意図が分かりません。

Answer 1

段落を表すpタグを、段落でないところでつかってるのかわからない

HTMLにおけるpタグの意味は「段落」とされていますが、日本語で言うところの厳密な意味での段落（本文テキストの段落等）だけでなく、
実際のところ**「テキストのかたまり」という程度のふんわりした意味付け**で各所で使われます。
「Posted Tursday」というテキストは、その前後のテキストコンテンツの一部ではなく、
それ自体がひとつの意味をもつテキストの固まりですので、「（前後の文章の一部ではなく）ひとつのテキストの固まりですよ」という意味でp要素でマークアップしています。
「投稿日」という意味合いのHTML要素があればよいのですがそういうHTML要素はありませんので、
汎用的なテキストブロックを意味するp要素が選択されていると思ってください。

それ以外のマークアップ案としてdiv要素・span要素といったものが候補にあがるかと思いますが、
div要素・span要素というもは文書構造的な意味を持たない汎用的なグルーピング要素ですので、
divやspanでマークアップしてもそのことにより文書構造に何らかの意味をもたせることは出来ません。
これらは文書の意味ではなく、レイアウト・デザインといった見た目をCSSで再現する際に必要に応じて
使用するものなので、文書に構造的な意味付けを行うセマンティック対応という観点では
この場合望ましい選択ではありません。

なお、div要素とspan要素はいずれも意味を持たない範囲指定するためだけの要素ですが、
div要素はブロック単位での範囲指定、span要素はテキストの範囲指定をするためのものになります。

Comments

[N---------]

なるほど！回答ありです！

Answer 2

HTMLタグの意味についてはMDNのHTML要素リファレンスに
詳細が記載されていますので、こちらの熟読をオススメします。
https://developer.mozilla.org/ja/docs/Web/HTML/Element

段落を辞書で調べると「長い文章の中の、一つの主題をもってまとまった部分。」と
書かれているため、1行でも段落になります。

span

記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。

p

テキストの段落を表します。

Answer 3

CSSによる装飾がない場合、<span>だと、<footer>内に何か別の要素を追加した際に、横並びで一つの文字列として表示されます。

Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.

という部分の左右には何も含めたくない、上下にわけて別ブロックとさせたいという理由かと思います。

ブロックレベル要素とインライン要素の違いになるので、このあたりを調べてみてください。

Answer 4

HTMLタグには、「ここに表示するテキスト（等）は、このような意味合いですよ」と、宣言するためなので、<p>の代わりに<span>でも<div>でも、何も無くても、用途によって使い分ければ良いです。

このあたりをキチンと使い分ける事が、最近のセマンティック対応であるHTML5の特徴のひとつです。