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

前提・実現したいこと

ボタン設置したい

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

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;
}

m.ts10806

2019/02/08 07:58

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

m.ts10806

2019/02/08 08:00

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

azuapricot

2019/02/08 08:11

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

azuapricot

2019/02/08 08:12

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

m.ts10806

2019/02/08 08:47

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

iof

2019/02/08 08:49

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

m.ts10806

2019/02/08 08:56

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

azuapricot

2019/02/08 08:57

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

azuapricot

2019/02/08 08:58

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

回答2件

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

HTML
1<button>本物</button>

投稿2019/02/08 07:57

x_x

総合スコア13738

回答へのコメント

x_x

2019/02/08 08:07

btnクラスがあることからおそらくBootstrapで見た目をボタンのようにしていると思います。 role="button" という WAI-ARIA の属性もありますが、アクセシビリティから言えば本物以上のものはありません。よさそうな記事があったので挙げておきます。ボタンは<button>で実装しよう https://qiita.com/sukoyakarizumu/items/978df93755c4720d5cdc

iof

2019/02/08 08:44

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

ベストアンサー

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

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

CSS
1.message {
2  padding: 15px 40px;
3  background-color: #5dca88;
4  cursor: pointer;
5  box-shadow: 0 7px #1a7940;
6}
7
8.message:active {
9  position: relative;
10  top: 7px;
11  box-shadow: none;
12}

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

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

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

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

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

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

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

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

となります。

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

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

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

投稿2019/02/08 08:56

azuapricot

総合スコア2341

回答へのコメント

iof

2019/02/08 09:00

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

azuapricot

2019/02/08 12:58

<span>だけでボタンをつくったことはないので、なんともいえませんが実際にやるとしたら<a>タグと<span>タグを組み合わせるなどが一般的でしょうか。 http://phpjavascriptroom.com/?t=css&p=cssdesign_button 基本的にはHTMLのタグは組み合わせてなんぼですし、 <span>タグ自体には範囲指定・・・？みたいな意味しかないので、<span>タグだけでボタンは厳しいかもしれませんね。やろうとしたら今より大分知識が必要になってしまいます。(javaScriptとか）

あなたの回答