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

Question

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

Navigation

#1 by (9 votes)

3

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

Then I noticed that the action links that were being generated were like this:

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

It seems that the Scaffold of that library was generating the code of Anchor (The famous Link) with a Button inside just for the Link formatting to be equal to the button.

But you do not need to, in bootstrap you can use this way:

<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". Is it really "normal"?

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

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

Is this valid? These html code validators of life would approve putting a button within a link?

html

asked by anonymous 13.05.2016 / 16:13

1 answer

Error trying to remove a temporary table [closed] Protecting data in memory

score 9 · Accepted Answer

This question has already been answered in SOen, and was very well answered. So I'll just translate this answer .

This is not valid!

Just because it works does not mean something is valid.

Content template: transparent (either the wording content or flow content), but there should not be any < a href="http://w3c.github.io/html/#interactive-content"> interactive interactive content . The element can be wrapped around whole paragraphs, lists, tables, and so on, up to entire sections, as long as there is no interactive content inside (eg buttons or other links).

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

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

From the series, it happened to me ...

In a code I was developing I had a input inside a <a> tag. When using Chrome and Firefox it was "working" normally, but using IE (which is the best validator, rsrs) it had an effect different from that shown, in my case a X , for not finding the elements. br> Only after a while did I realize that this "different" behavior was due to the fact that I was not using HTML properly.

And # in the comments, just use a code validator . , which will see the reason for not being explained in more detail.

Note

In%% of% some things have been changed. For example, the HTML5 tag may contain the a tag. If you do not believe, in min, use the W3 validator 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>