ボタン設置におけるspanタグとaタグの違い

Question

前提・実現したいこと

ボタン設置したい

発生している問題・エラーメッセージ

progateでボタン設置のコードを書いています。
前の章ではaタグでボタンを設置していました。
ですが今の章ではspanで設置しています。
この二つは何が違うのでしょうか？

該当のソースコード

お答えしようとしてくださった方々、申し訳ございません。
昨日から勉強を始めた身で　右も左もわからず、藁にも縋る思いで投稿させていただいておりました。
補足でcssを載せます。

aﾀｸﾞの場合

<div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>

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>

試したこと

補足情報（FW/ツールのバージョンなど）

下記がaのcssです

  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

下記がspanのcssです

.message-wrapper {
  border-bottom: 1px solid #eee;
  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;
}

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください（例え1行でも見易さのためには必要です）

[m.ts10806]

あとこれだけでは的確な回答は得られません。
btnというクラスから何かしらCSSフレームワークをご利用でしょうか。
回答者になる人が全員progateを通っているとは限りません（おそらく少ないでしょうし、少なくとも私は通っていません）
出せる情報はなるべく多く出してください。

[azuapricot]

回答しようかと思いましたが、情報が少なすぎて無理でした。
スクリーンショットを撮ってもらえると非常に助かるのですが
<a>タグもリンクにはなりますがCSSなしではボタンにはなりませんし、
<span>タグも、CSSなしではただの範囲指定にすぎません。

提示されている情報では回答は不可能です。
何が違うんですか？と言われましても、困ってしまいます。

[azuapricot]

本当にそれはボタンですか？

[m.ts10806]

btnってクラスつけると大体のフレームワークは小綺麗なボタン装飾してくれますからね…

[iof]

つまりどういうことでしょうか？

[m.ts10806]

cssが途中から始まっているので追記していただきたいのと、利用しているCSSフレームワークを記載してください。質問タグにも追加してもらった方が良いですね

[azuapricot]

フレームワークは使っていませんね、
CSSで頑張って指定しているだけです

[azuapricot]

（頑張って指定してボタンに見せかけているだけ）

Answer 1

どちらもボタンではありませんし、spanに至っては機能しないでしょう。
本物はこちらです。

<button>本物</button>

Comments

[x_x]

btnクラスがあることからおそらくBootstrapで見た目をボタンのようにしていると思います。
role="button" という WAI-ARIA の属性もありますが、アクセシビリティから言えば本物以上のものはありません。

よさそうな記事があったので挙げておきます。
ボタンは<button>で実装しよう
https://qiita.com/sukoyakarizumu/items/978df93755c4720d5cdc

[iof]

見た目をぼたんのようにするものと、実際ボタンを実装するのは別ということなのですね！ありがとうございます。

Answer 2

質問の編集ありがとうございます。
CSSを見て初めて仰りたいことが理解できました。

ですが、違いというものを回答できるか、と言われるとそうでもありません。

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

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

↑のCSSは、お分かりかと思いますが<span>タグの方のスタイルを設定しているCSSです。

:active と書かれている方のCSSで、ボタンを押したようにみせかけているだけです。

今の状態では<span>タグには先に進むための力はなく、
ただぽちぽちできるだけです。

<a>タグも同様です。
CSSで回りに四角く枠を付けただけで、

<a href="#" class="btn signup">新規登録はこちら</a>

↑の href部分にURLを設定しないと、ただの下線が引かれた文字です。

・・・結論、といっていいのでしょうか、難しいのですが、

aタグ：href部分にURLを設定したら、リンク先に飛べるボタンになる
spanタグ：ただ押せる（押しているように見える）だけ

となります。

progateで勉強中とのことなので、今はタグの使い方やスタイルの設定の仕方を覚えよう~!といった感じでしょうか。
ボタンでリンク先に飛べるようにしよう～！という章は後々出てくるのではないでしょうか。

本当にボタンを実装したいのであれば、他にもタグはあります。(buttonなど）

・・・・回答になっているでしょうか

Comments

[iof]

なるほど！まだ中級なのでいろいろ省略されて説明されている部分が多く理解が追い付けないままでした！
この後実際にやるのかもしれませんが、もしこの<span>タグのほうで実際にボタンとして稼働させようとすると、具体的にどのようなコードにすればいいのでしょうか？（ちなみに<button>もやってみました。納得しました！）

[azuapricot]

<span>だけでボタンをつくったことはないので、なんともいえませんが
実際にやるとしたら<a>タグと<span>タグを組み合わせるなどが一般的でしょうか。
http://phpjavascriptroom.com/?t=css&p=cssdesign_button

基本的にはHTMLのタグは組み合わせてなんぼですし、
<span>タグ自体には範囲指定・・・？みたいな意味しかないので、<span>タグだけでボタンは厳しいかもしれませんね。
やろうとしたら今より大分知識が必要になってしまいます。(javaScriptとか）