Welcome to WebmasterWorld Guest from 54.164.198.240

Forum Moderators: ergophobe

Message Too Old, No Replies

Descendant of the 'a' element

     
9:21 am on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


The element 'button' must not appear as a descendant of the 'a' element.
How to solve this HTML code?
<a href=""><button class="button1">SUBMIT</button></a>
10:11 am on Mar 28, 2018 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:11465
votes: 174


the problem is that both the button and anchor elements are "interactive content":
https://www.w3.org/TR/html50/dom.html#interactive-content-0

for example, when you click on a submit button it should submit the parent form and if you click on an anchor element it should send a request for that url.
or suppose one or both have onClick attributes specified?
if one element contains the other, which one gets the click event?

what do you want to happen when the visitor clicks on that button/anchor?
11:39 am on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2259
votes: 597


<a href="" class="button1">SUBMIT</a>
12:16 pm on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


So, if I like to keep <button class="button1">Link to products</button> and just as a link it is wrong?

Is this in the right direction?
<button type="button"><a href="https://www.example.com/">My products</a></button>
without notice:
Descendant of the 'a' element

From Mozilla:
Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

[edited by: toplisek at 12:19 pm (utc) on Mar 28, 2018]

12:19 pm on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2259
votes: 597


What are you using the button/link for exactly?
12:20 pm on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


I use links to all subpages like product pages.
12:43 pm on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2259
votes: 597


Then I strongly recommend using <a> tag. A link is link use a link tag. There no guarantee that Google will crawl or assign the same value to a link in a button.(speculation on my part)

If you want the link to look like a button then use CSS to style the link like a button. That is use your class ".button1".
12:51 pm on Mar 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


It is interesting that known validators use IE11 validation. Strange is that even tel: value is as a warning. I guess 99% of websites do not meet old validations and search engines should post their official reports.