blockにしたspanとdivの差は？？

Question

たとえば

<div></div> <span<></span>

があったとして

<div style="inline"></div> <span></span>

にすればdivは横に並びますが
これはspanとdivに名前以外の違いはありますか?

友人と開発している際に同じじゃないといわれたのですが
理由を尋ねてもイマイチ理解できなくかったので
こちらで質問させて頂くことになりました

ご教授の程よろしくお願い致します

Comments

[m.ts10806]

どういう理由が得られたのでしょうか。その内容を提示されないと同じ内容が回答してつく可能性もあります

[s8_chu]

タイトルでは「ブロックレベルにした `span` 要素と `div` 要素」を比較しており、本文では「インラインレベルにした `div` 要素と `span` 要素」を比較しています。回答として書くことはあまり変わりませんが、どちらかに統一したほうがわかりやすいと思います。

[think49]

<div style="inline"> は不正なので正しい記述に修正して下さい。```で

Answer 1

CSS として見たとき、 display プロパティ以外が適用されていなければ、以下の二つの要素間に違いはありません。しかし、 HTML として見たとき、その二つの要素は異なります。

<div style="display: inline"></div>
<span></span>

質問文のコードでは、恐らく div 要素に対して display: inline を設定した状態なのだと思いますが、この状態では span 要素と div 要素に CSS としての違いはありません。セマンティクスに関係なく、要素に装飾を適用することが出来ます。

ここで、 CSS は装飾を行うもので、要素の性質自体を変化させるものではないことに注意する必要があります。つまり、 div 要素や span 要素は HTML として見たとき、どのような装飾が適用されていても、異なる要素になります。div 要素と span 要素は、どちらも特別な意味を持ちませんが、これらの要素ではカテゴリとコンテンツモデルが異なります (参考)。簡単に言えば、以下のようなコードは有効な HTML ではないということです。このことから、この二つは CSS としては同じ、 HTML としては異なるものだといえます。

<span style="display: block">
  <div style="display: inline"></div>
</span>

恐らく、一方は「装飾によらず要素の性質が変化していないこと」を話していて、もう一方は「CSS の整形としては違いがないこと」を話していたため、会話が噛み合わなかったのではないかと思います。

Answer 2

コンテンツモデルを意識すると分かりやすいと思います。

例えばdivにはフローコンテンツを子要素にする事が出来るので、ほぼ全ての要素を入れ子に出来ます。
しかし、spanはフレージングコンテンツしか子要素にとる事が出来ません。

例えば、

<div>
  <div></div>
</div>

は可能ですが、

<span>
  <div><div>
<span>

はコンテンツモデルに反しています。
divをインライン要素にしようとこのルールは変わりません。

ここら辺の情報については以下の記事が理解しやすいかと思います。
https://webliker.info/46840/