Line 153, Column 44: The element button must not appear as a descendant of the a element.
<button class="btn primary readMore"><a href="">read more</button></a
not sure how to fix this.
has anyone run into this & how did you solve it please?
thx
D
Line 153, Column 44: The element button must not appear as a descendant of the a element.
I am not entirely sure what you mean as “appear”. elements are/are not decedents. But you have a couple of other issues in your code as well.
- It’s not good practice to have links inside or around your buttons.
- you didnt close your tags properly, that probably caused a bunch of unforeseen results.
<button class="btn primary readMore"><a href="#">read more</a></button>
hope that helps.
Don’t use a button. Just have the anchor and style the anchor like a button.
<button> is (mostly) for having a style-able thingie that when users click it, runs some script. If it goes somewhere then a plain link makes more sense.
While I personally don’t like loose inlines with block siblings, this is legal:
<hx>Article title</hx>
<p>article teaser…</p>
<a class=“button” aria-label=“Article title”>Read More »</a>
And set the .button { display: inline-block;} or float it or something.
I’ll bet that’s why the validator said something about descendents: the tags are not well-formed and the closing </a> is outside the closing </button> so it may have assumed the button was a descendent here somehow.
At work there was/is some crappy old code doing this
<a href=“somewhere”><input type=“button” value=“some text”></a>
and I’d like to note that unless you add an onclick event on the anchor, IE (not sure about 10) won’t work clicking on that thing. So I don’t know but it wouldn’t surprise me if there was a user agent who didn’t like anchors inside a button (but I don’t think there’s a spec reason why it wouldn’t work).
Dresden, Stomme, thank you both.
And Stomme thank you on the extra advice on fixing this. I was toying w/the idea of creating an div & styling for a button but will try your suggestion and style the <a href> first.
D
Using the anchor gives you automatially both the functionality of a link without extra scripting, and also it’s already accessible natively (except if your link text is bad like “read more” then the aria-label will help, at least for users of newer AT).