HTML - How to place an anchor tag correctly?

Question

What is the correct way to place an anchor tag? Is it inside or outside a button tag?

HTML

 <button>
    <a href="#"> CLICK </a>
 </button>


<a ref="#">
   <button> CLICK
   </button>
</a>

Answer 1

Neither. Anchors are forbidden from containing buttons and buttons are forbidden from containing anchors.

If you want a link, then use an anchor and style it to look how you want.

If you want a button (i.e. a control that does nothing other than trigger JavaScript) then use a button and style it to look how you want.

Answer 2

This is what I would do:

HTML

<div style="margin:5px;">
   <a href="#" class="button">Click</a>
</div>

CSS

.button {
  display: block;
  width: 115px;
  height: 25px;
  background: #AABBAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}

FIDDLE