Having a problem with a button being a descendant of an element

HTML & CSS
1

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

2

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.

  1. It’s not good practice to have links inside or around your buttons.
  2. 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.

3

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).

4

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

5

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).