<span> | HTML5タグ辞典

span要素はコンテンツをひとまとめにする要素です。span要素でコンテンツをひとまとめにする事に特別な意味付けは無く、主にレイアウトやCSSでのデザインを付与する目的で使用されます。

同じようにコンテンツをひとまとめにする要素に div要素がありますが、div要素はコンテンツ全般に使用されるのに対し、span要素は段落内のテキストの一部などより狭い範囲で使用します。

div要素とspan要素の使用範囲について

HTMLの全ての要素には分類があり、div要素は一番範囲の広いフロー・コンテンツ(Flow content)、span要素はその中の一部であるフレージング・コンテンツ(Phrasing content)に分類されています。

div要素のフロー・コンテンツは用途や範囲を問わず、span要素のフレージング・コンテンツはフレーズ(phrase＝句・熟語など)の意味通り、段落内のテキストの一部などより狭い範囲で使用します。

他にも分類がありますがここでは割愛します。

span要素で囲っただけでは表示に変化はありません。

赤いきつねと緑のたぬきのどちらが好き？

赤いきつねと緑のたぬきのどちらが好き？

span要素にCSSで装飾してみます。

赤いきつねと緑のたぬきのどちらが好き？

赤いきつねと緑のたぬきのどちらが好き？

div要素が用途を問わないのなら全てdiv要素で良いのでは？と思いますが、文章内でdiv要素を使用すると下記のように改行されてしまいます。

これは、フロー・コンテンツとフレージング・コンテンツの仕様の違いによるものです。

<p>赤いきつね
と緑のたぬきのどちらが好き？<p>

赤いきつね

と

緑のたぬき

のどちらが好き？