MENU

【CSS】空のaタグでボタンを作るCSSについて

とあるコーダーさんから上がってきたコードでこんなのがあった。※余計なクラスは省略
div全体がボタンになっているというUI。

HTMLはこんな感じ。

<div>
  <h3>ボタン</h3>
  <p>詳細はこちら</p>
  <a href=""></a>
</div>

CSS(SCSS)はこう。

div {
  height: 130px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
  h3 {
    font-size: 18px;
    text-align: center;
  }
  p {
    position: absolute;
    right: 4%;
    bottom: 5%;
    font-size: 12px;
  }
  a {
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

aタグで何も囲まずポジションabsoluteでdivの範囲いっぱいにかぶせてるっていうスタイル。
その人だけと思ってたけど意外と他の人もやってる。。

なんでaタグを空にしているんだろう?気になる。。

聞いてみたら「特にこだわっていないけど、aタグの中にblock要素や長い文章などはよろしくないっていう印象があるから。」とのこと。

それってhtml4までじゃなかったでしたっけ?
しかも空タグの方がよろしくないでしょ。

html5でaタグではblock要素、inline要素がなくなり、aタグでもdivなどを囲むことが出来る。

個人的にはこっちの方が気持ちいい。
というか構造的にもあってると思う。

<div>
  <a href="">
    <h3>ボタン</h3>
    <p>詳細はこちら</p>
  </a>
</div>
a {
  height: 130px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
  h3 {
    font-size: 18px;
    text-align: center;
  }
  p {
    position: absolute;
    right: 4%;
    bottom: 5%;
    font-size: 12px;
 }
}

他に理由があれば知りたい。

更新 : 空のaタグが必要になるかもしれない場合がありました。