<p>と<span>について

Question

HTML、CSS初心者です。勉強中のテキスト内に以下のようなサンプルコードがあるのですが、なぜ「<p class="card__btn"><span>詳しく</span>」のような書き方をするのか理解できなかったため、質問させていただきました。<p>のみでは、cssでレイアウトをする際に不都合なのでしょうか。
初歩的な質問で申し訳ございませんが、アドバイスいただけますと幸いです。よろしくお願いいたします。

<section class="cardList__item">
          <a href="#" class="card">
            <h3 class="card__ttl">サービス名</h3>
            <p class="card__txt">この文章はダミーです。</p>
            <p class="card__btn"><span>詳しく</span></p>
          </a>
        </section>

.card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card:hover {
  color: inherit;
}
.card__ttl {
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #509422;
  font-size: 1.2em;
}
.card__txt {
  line-height: 1.7;
}
.card__btn {
  text-align: right;
}
.card__btn > span {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid;
  font-size: 0.85em;
  transition: background-color 0.3s, color 0.3s;
}
.card:hover .card__btn > span {
  background: #509422;
  color: #fff;
}

Comments

[yuma.inaura]

CSS割り当ての学習用だからじゃないでしょうか
そういう割り当て方もできるという例で

.card__btn > span

[m.ts10806]

サンプルでダミーだとあまり要件や本来の目的、アプリケーションの全容が見えてこないと思いますし、
「意図」となると、やはり書いた人にしか分かりません（ここで得られるアドバイスも「想像」に過ぎません）
本質的な回答にはなりにくいと思います。

Answer 1

たとえばspanを置くことによって:beforeなどでアイコンをつけることができたりします。
構造が違うということはCSSで修飾できる幅が広がります

<style>
p span::before{
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><circle cx="8" cy="8" r="8" fill="red" /></svg>');
}
</style>
<p>test</p>
<p><span>test</span></p>
<p><span>test</span></p>
<p>test</p>

Comments

[kame2]

ご回答頂きありがとうございます✨とても勉強になりました！

Answer 2

<section></section> にしろ、 <p></p> にしても。 タグは、要素（エレメント）として意味があります。たとえば、視覚障碍者がホームページを読むときに、要素が適切に書かれていないと、読めないそうです。これらをマークアップと言います。 <span></span> を、わたしは、「空タグ」と呼んでいます。なんの意味ももたない要素という意味だと理解しています。

ご質問のコードをプレビューすると下の図のようになりますが

<p></p>（paragraph-文節）そのものをボタンにしてしまうと、マークアップとして問題があるとテキストの筆者が考えたのでしょう。空タグでボタンに見えるようにCSSをかけて　HTML文章全体のマークアップを整えているのだと思います。

Comments

[kame2]

詳しく説明してくださり有難うございます！理解できました✨