H3 and P tags inside anchor, impact on SEO?

Question

I'm working on our work site at the moment, just a quick question.

I'm listing articles, and to make each one clickable, I'm containing them within an anchor. Is this bad practice? Will this have any implications on SEO? I've googled and found differing opinions and no definitive answer...

Basically this is my structure:

<article id="article1">
  <a href="#linkToArticle" title="My Article Title">
    <h2>My Article Title</h2>
    <p>My article summary goes here</p>
  </a>
  <a class="button" href="#linkToArticle" title="My Article Title">
</article>

<article id="article2...... etc

Any advice would we welcomed, if someone could give a bit of an explanation why this would be fine/bad I'd appreciate it so I know for next time.

S

Answer 1

In HTML5, it's allowed.

Because you use a sectioning element (article in this case), it doesn't create a problem with your outline. If you'd omit the sectioning element, the start of the link would be still in scope of the previous section, which would not be what you want to say semantically.

So your example is fine. (except for the a element with the class button, because it is not closed, but I assume this is an error in your example).

You can't say in general if this would be problematic for search engines, as there are countless search engines and they all work differently. As this is valid markup for some time now, we could assume that all actively developed search engines are handling this fine.

Same for accessibility. Older tools might have problems with this, but I'd bet that most actively developed tools can handle this. Here you can find an older screenreader test: HTML5 block link tests. This blog posting might also be interesting: Block level links and accessibility

AFAIK various user-agents handled this markup even before it was valid, as some web authors used this pattern anyhow.