<span>タグの使い方について

Question

分からない事

下の画像のように
背景色が緑のさっそく開発するという部分があるのですが
答えを見ると、<span>タグから始まります。
どうして、<span>タグを用いるのでしょうか？

実際の画像

答えのコード

<div class="message-wrapper">
    <div class="container">
      <div class="heading">
        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
        <h3>Let's learn to code, learn to be creative!</h3>
      </div>
      <span class="btn message">さっそく開発する</span>
    </div>
  </div>

.message-wrapper {
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

Answer 1

この系の「なぜ」の真意を得ようすると「作った人に聞いて」となります。
同じ結果を出すための道は１つではないからです。
他者には想像できたとしても、実装の意図と一致するとは限りません。
それなら「同じ結果を出す別コード」を自分で考えたほうが幾らか成長に繋がります。

Answer 2

なぜ<div>ではなく<span>を使うのかという質問でしょうか？
このケースでの用途の答えになるかはわかりませんが、

<div>は最初からdisplay:blockが指定されています。 それに対して<span>はdisplay:inlineが指定されています。 これらは表示の仕方に違いがあります。 [https://saruwakakun.com/html-css/basic/display](https://saruwakakun.com/html-css/basic/display) こちらの記事が大変分かりやすく説明されているので、 参考になるかと思います。

Answer 3

こんにちは。

span要素は「記述（フレージング）コンテンツ」というカテゴリに該当します。

記述コンテンツ | コンテンツカテゴリー - 開発者ガイド | MDN

これは段落の中の文章に対して用いられるカテゴリです。
ですので、

さぁ、あなたもProgateでプログラミングを学んでみませんか?
Let's learn to code, learn to be creative!
さっそく開発する

という文章でひとつの段落が形成されると考えるのであれば、そして、「さっそく開発する」に意味論的に他の要素を使う理由がなければ、spanが適切なマークアップです。

---

個人的には、「さっそく開発する」をクリックするとページ移動しそうなので、a要素が適切なように思えます。

Answer 4

どうして、<span>タグを用いるのでしょうか？

「勘」だと思います。

もちろん、spanタグ以外にも、aタグやらdivタグやらありますが、それらのメリットなどを総合的に考えて上で、「勘」で決めたのだと思います。

Answer 5

span（もしくは適当なHTML要素）でかっこまないと
その箇所だけに反映するCSSの指定ができないからです