spanをここで使う理由がわからない

Question

しかし、spanはinlineで、divはblockというのが違いであると認識していますが。
下記のようなHTMLにおいてのspanとdivの使い分けについて、悩んでいます。

<h2 class="heading">NEWS</h2>
  <ul class="scroll">
    <li class="scroll-item">
      <a href="#">
        <time class="date" datetime="2015-08-23">2019.08.23 SUN</time>
        <span class="cate news">新着</span>
        <span class="tit">こんにちは</span>
      </a>
     </li>
　　　<!---以下略->

以上のHTMLにCSSで少し装飾したのが以下の画像です。

.scroll .date {
  display: inline-block;
  width: 19%;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.0rem;
}
.scroll .cate {
  display: inline-block;
  width: 8%;
  border-radius: 5px;
  background-color: #d03c56;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.0rem;
  line-height: 16px;
}
.scroll .tit {
  display: inline-block;
  width: 73%;
  font-size: 1.2rem;
  padding-left: 15px;
  overflow: hidden;/*はみ出た部分を非表示*/
  text-overflow: ellipsis;/*はみ出た部分がある場合は、...が表示される*/
  white-space: nowrap;/*折り返し禁止*/
  /*上3つはセットで使用。p68参照*/
}
.scroll .cate.news {
  background-color: #2c3c53;
}

今回はspanをつかって要素を囲っています。
しかし、cssでdisplay:inline-blockに直しています。
それならdivでもいいと思うのですが、このシチュエーションでspanを使う理由とかがあれば教えていただけると幸いです。

mac 10.14.6
google chrome

Answer 1

spanもdivもinline-blockではないですから、どちらを利用してもよいのでは？
昔からの感覚から考えるとaの中にブロック要素の代表であるdivが入るのは
違和感あると思いますけど。

Comments

[miyabi_pudding]

> 昔からの感覚から考えるとaの中にブロック要素の代表であるdivが入るのは違和感

これめっちゃ禿同ですね。
HTML5から許可されるようになった時はけっこう驚きました。

[gunmed]

回答ありがとうございます。
そのような感覚がなく、勉強になりました。
ありがとうございました。

Answer 2

それならdivでもいいと思うのですが、

いえ、この<a>は<li>の中にありますが、<li>の中身はフローコンテンツでないといけませんので（MDN）、記述コンテンツである<div>は適切ではありません。

（なお、HTML 4.01では<a>の中身はインライン要素に限定されていましたが、HTML 5では<a>にフローコンテンツだけでなく記述コンテンツを入れることも許可されています）

Comments

[gunmed]

回答ありがとうございます。
maisumakunさんの説明の意図を汲み取れました。ありがとうございます。

まだ初学者ゆえ、色々と調べていたのですが、提示していただいたMSDのサイトから以下のサイトに飛ぶと、フローコンテンツと記述コンテンツの分類が見れたのですが、divはフローコンテンツの欄にあるのですが、どうでしょうか...？
記述コンテンツやフローコンテンツという言葉を初めて聞いたので、困惑してしまっています、すみません、、、。
ちなみにspanはフローコンテンツと記述コンテンツの両方に含まれていました。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Flow_content

[x_x]

フローコンテンツに div が含まれます。
逆に記述コンテンツ（フレージングコンテンツ）にはありません。

[gunmed]

回答ありがとうざいます。
もう少し考えてみます。