Can I nest a

Question

I am doing the following:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.

Can anyone give me advice on what I should do?

The validator already answered your question for you, and even told you why it's not valid in that error message. — Useless Code, Jun 18 '11 at 04:43
But is there an alternative if I want Google to be able to see that as a link. As an example of button usage I have buttons called "<<" and ">>" for next record and previous record. I believe these should be buttons but the functionality is that they link to new pages. — Marie, Jun 18 '11 at 04:52
my question is DOES it matter..if you make this one well Deserved exception. — Muhammad Umer, Jul 17 '14 at 02:11
actually, if you want to have a button that links to an html page just create a button and have it call a js function that redirects to where you want to go — DCR, Mar 18 '22 at 22:52

score 325 · Accepted Answer · edited Jun 20 '20 at 09:12

325

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

In other words, you can nest any elements inside an <a> except the following:

<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)

If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 18 '11 at 04:26

Andrew Moore

93,497
30
163
175

1

@Andrew Moore - Is there another way. I believe this gave problems and that was why it was changed to be inside of an link. Not sure what the problem was but we have many of these buttons like this on a page. Maybe it was because we wanted to improve SEO by using links. – Marie Jun 18 '11 at 04:46
2

@Marie: There is no other way other than styling your links to look like buttons. – Andrew Moore Jun 18 '11 at 04:47
@Marie: No. That's why you are better off using a link, and styling the link to look like a button. Why do you want the system widget look anyway? – Andrew Moore Jun 18 '11 at 04:50
Styling a link to look like a button and making it look good in all browsers is I believe impossible. I tried for a long time. Nothing came close to the real buttons and I had many variations of CSS. – Marie Jun 18 '11 at 04:54
@Andrew Moore, @Useless code - Just to clarify. Do you think Google will notice the link if it is a button within a form? – Marie Jun 18 '11 at 05:01
@Marie: Will follow, MAYBE. Will rank, NO. – Andrew Moore Jun 18 '11 at 06:14
it's better to use method="post" to get rid of question mark - "?" – user25 Aug 26 '15 at 16:13
3

user25 not is is not better to use method="post" because the browser asks for resending a post form when navigating back and forth. As GET is the default method of a form one can leave method="get" out for brevity. – Bijan Sep 05 '15 at 12:58
3

Why is there a
in the list of elements which you can't nest inside an ?
isn't interactive and I'm pretty sure that it is valid in HTML5 to nest a
inside an tag?
– johnnydoe82 Mar 16 '16 at 16:44
How about opening link in a new tab? can you bind target attribute to form element? – Kunok May 16 '16 at 14:37
4

@AndrewMoore: styling a link to look like a button creates its own set of problems, such as for accessibility. A button should execute when it has focus and you hit spacebar. A link does not. If you care about ADA (or are required to pretend to care) then this may bite you. – iconoclast May 20 '16 at 19:38
4

As @jonaspas suggested, a `
` inside an `` is absolutely valid in HTML5: https://validator.w3.org/nu/?showsource=yes&doc=data%3Atext%2Fhtml%3Bcharset%3DUTF-8%2C%253C%21DOCTYPE%2520html%253E%250A%253Chtml%253E%250A%253Chead%253E%253Ctitle%253ETitle%253C%252Ftitle%253E%253C%252Fhead%253E%250A%253Cbody%253E%250A%253Ca%2520href%253D%2522%2523%2522%253E%253Cdiv%253ETesting%2520a%2520div%2520in%2520an%2520a%253C%252Fdiv%253E%253C%252Fa%253E%250A%253C%252Fbody%253E%250A%253C%252Fhtml%253E
– Socob Aug 14 '16 at 23:49
1

If using a form to act like a button, please don't forget that you won't have the "follow through" features like right click + copy URL or open in new tab. – JP DeVries Aug 27 '16 at 18:52
1

I am trying to understand why is it a rule to not have nested interactive elements? Are there any usability issues? – gaurav5430 May 29 '20 at 18:14

score 46 · Answer 2 · edited Mar 31 '16 at 12:53

46

If you're using Bootstrap 3, this works quite well

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

edited Mar 31 '16 at 12:53

Siyual

16,415
8
44
58

answered Dec 17 '14 at 20:43

user2197018

593
4
2

doesn't work well with a round button font awesome icon inside – Toolkit May 28 '15 at 02:41
Using class='btn btn-default' matched the other buttons (MVC6). – crokusek Mar 23 '16 at 23:45

score 17 · Answer 3 · answered Oct 06 '14 at 13:59

17

I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a>

answered Oct 06 '14 at 13:59

gobeltri

329
3
10

7

You don't need the span at all with bootstrap. Just move the whole class part to the and you will have a link button. eg Subscribe – Ryan Buddicom Dec 26 '14 at 09:03
The original poster asked if it's possible to place a button _inside_ an anchor tag. The accepted answer notes that it goes against W3C specs to place an inside an . I think that's why golbeltri was demonstrating styling a as a button. – StackOverflowUser May 03 '15 at 07:49
This makes sense if there is other content inside the ``, which is part of the link, but not styled like a button. For example, any click within a `div` (image, background, text, etc) goes to a link, but only the `span` looks like a button. – Josiah Sep 03 '15 at 19:23

score 14 · Answer 4 · answered Feb 23 '15 at 01:51

14

No.

The following solution relies on JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

If the button is to be placed inside an existing <form> with method="post", then ensure the button has the attribute type="button" otherwise the button will submit the POST operation. In this way you can have a <form> that contains a mixture of GET and POST operation buttons.

answered Feb 23 '15 at 01:51

Peter Wilson

377
3
5

onclick will not work on file protocol, so it is'nt useful for static presentation, in example. in this case form action propety is the way to go. – netalex May 10 '17 at 15:00
1

If the button is linked to a page, then it's not a button, it's an anchor – Capsule Nov 14 '18 at 04:11
@Capsule it's so common to see these days. Just look at the landing page for every web development framework in existence. I'm all for the purist argument usually, but even I'm having to admit that a big rectangular button has better, more obvious affordance than a link, even if it links to a page instead of initiating a true form action. – TheDudeAbides Feb 19 '20 at 05:11
Right now I have an `` inside the ` – TheDudeAbides Feb 19 '20 at 05:13
@TheDudeAbides I'm not talking about the aspect of it, I'm taking about the markup you want to use. What prevents you from styling this link as a big rectangular button? Unless your site doesn't use any styles at all? btw the answer above the one we're commenting about is a perfect example of it. It's an anchor tag, styled as a button. – Capsule Feb 19 '20 at 05:52

Steve Jorgensen · Answer 5 · 2011-06-18T05:47:46.487

8

It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?

edited Jun 18 '11 at 05:47

answered Jun 18 '11 at 04:27

Steve Jorgensen

11,725
1
33
43

Thanks Steve. This was a method suggested to me by a team-worker. The method does work. Is there some better way I could do this? – Marie Jun 18 '11 at 04:34
1

@Marie If you want to make a link look like a button it is easy to use CSS styles to make it look as such. Add a border style similar to this: `border: 2px outset`. If you want to round the corners a bit you could use a [border-radius](http://www.css3.info/preview/rounded-border/) on it as well. A simple `` tag would work well too. – Useless Code Jun 18 '11 at 04:50

score 6 · Answer 6 · answered Oct 21 '17 at 21:44

6

These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a> tag, FWIW...

answered Oct 21 '17 at 21:44

rogerdpack

62,887
36
269
388

4

This works when the ` – bishop Mar 24 '18 at 04:19
1

@bishop it works fine in a form, just specify the type: – Matthew Jun 27 '22 at 00:05

score 3 · Answer 7 · answered Nov 11 '14 at 14:30

Another option is to use the onclick attribute of the button:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

This works, however, the user won't see the link displayed on hover as they would if it were inside the element.

score 0 · Answer 8 · answered Dec 05 '15 at 20:20

0

You can add a class to the button and put some script redirecting it.

I do it this way:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

answered Dec 05 '15 at 20:20

divHelper11

2,090
3
22
37

score 0 · Answer 9 · answered Dec 16 '15 at 12:02

0

why not..you can also embeded picture on button as well

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM>

answered Dec 16 '15 at 12:02

Tapasit Suesasiton

89
4

3

The problem is that as the OP asked back then is a bit restrictive in what it allows to be within its boundaries. See the accepted question there. – Thomas Dec 16 '15 at 13:43

score -1 · Answer 10 · answered Jul 10 '17 at 08:47

Explanation and working solution here: Howto: div with onclick inside another div with onclick javascript

by executing this script in your inner click handler:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

score -7 · Answer 11 · answered Sep 16 '13 at 16:27

-7

Use formaction attribute inside the button

PS! It only works if your button type="submit"

<button type="submit" formaction="www.youraddress.com">Submit</button>

answered Sep 16 '13 at 16:27

Moonfly

11
4

you also need to put the button in a
tag.
– acolchagoff May 24 '16 at 15:34

Can I nest a

11 Answers11

Linked

Related

Can I nest a element inside an using HTML5?

11 Answers11

Linked

Related

Can I nest a