Button (Button) inside an A (Link)? Is this a bad practice?

Question

Button (Button) inside an A (Link)? Is this a bad practice?

Asked 8 years, 7 months ago

Viewed 31,180 times

3

I was using a library of Scaffold for automatic HTML code generation. It was specifically for generating forms in Boostrap 3.

Then I noticed that the links of actions that are being generated are like this:

<a href="url_da_pagina">
     <button class="btn btn-primary"></button>
</a>

Looks like the scaffold from that library was generating the code from Anchor (The famous Link) with a Button inside just to format the Link to be the same as the button.

But you don’t have to, in the bootstrap you can wear it like this:

<a href="" class="btn btn-primary">Tipo como se fosse um botão</a>

The question that came to me is: The automatic code generation library did this as if it were "something normal". It’s really "normal"?

Is there a problem in using a Button within a A, or vice versa?

I don’t know, but institively (no one told me anything or any article I read taught me that), I have a small impression that this is a bad practice (or gambiarra).

Is doing this valid? These lifetime html code validators would approve of putting a button inside a link ?

Not, just paste your code here and ask to validate.

– Renan Gomes

2016/05/13 at 14:22
What is wrong with the question? Could you provide a suggested improvement

– Wallace Maxters

2016/05/13 at 14:47
1

Related: It is acceptable to use <H2>, <H3>, <p>, <div> tags within links/anchors (<a></a>)?

– Guilherme Nascimento

2016/09/08 at 19:03

1 answer

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.

by Randrade • **21,612** points · Answer 1 · 2016-05-13T14:21:18+00:00

That question has already been answered on Soen, and it was very well answered. So I will just translate this answer.

This is not valid!

Just because it works doesn’t mean something is valid.

Content template: transparent (both the phrasing content or flow content) but there should be no descending interactive content.
The element can be wrapped around whole paragraphs, lists, tables, and so on, up to whole sections, as long as there is no interactive content inside (e.g., buttons or other links).

According to the W3C, the tag a (<a>) can receive any element except these:

<a>
<div>
<audio>
<button>
<details>
<embed>
<iframe>
<img> (If the attribute usemap be present)
<input>
<keygen>
<label>
<menu>
<object>
<select>
<textarea>
<video> (If the attribute controls be present)

From the show, it happened to me...

In a code I was developing I had a input within a tag <a>. When using Chrome and Firefox it was "working" normally, but using IE (which is the best validator, rsrs) it presented a different effect than the one presented, in my case a X, by not finding the elements.
It was only after a while that I realized that "different" behavior was due to the fact that I was not using the HTML correctly.

And as stated by @Renan in the comments, just use a code validator, which will see the reason for not being valid explained in more detail.

Note

In the HTML5 some things have been changed. For example, the tag a may contain the tag img. If not believe, in min, use the validator for W3 with the following example:

<!DOCTYPE html>
<html>
<head>
  <title>Estou testando</title>
</head>
<body>

<a href="form_action.asp">
  <img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>

<p>Click the image, and the click coordinates will be sent to the server as a URL query string.</p>

</body>
</html>