Two anchor tags inside a single heading

Question

I am working on a new blog's design and markup right now and I have found a place where I'm tempted to nest two anchor tags within a single heading tag:

<h3><a>Popular<a/>|<a>Recent</a></h3>

Which looks like this:

_{(source: autochemky.com)}

The purpose of doing this would (obviously) be to enable "POPULAR" as a link to display popular articles and "RECENT" a link to display recent articles. . . clicking one or the other would only change the visible content (article list) on the sidebar and not link to a new page (either via ajax or having them both already loaded and one being a hidden div).

Doing this is a measure to avoid additional potentially unnecessary code involving more than one h3 element or more than one visible list of articles.

I suppose my questions to go along with this are (in order of importance and assuming HTML5):

Is the markup valid/acceptable?

Would this have any realistic/noticeable effect on SEO?

Would you prefer to achieve the same result in a different way?

Answer 1

Assuming HTML5 - it's acceptable, HTML5 introduced that any element can be inside an <a> tag (pretty sure)

Changes in HTML5 Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.

Not a noticeable effect on SEO, it's a minor detail, as minor as you probably should be using a <h1> tag if that is the header of a section seeing as that is the base in the new HTML5 semantics.

I'd stick to what you have there definitely.

Answer 2

Well, yes, it's valid to have several a elements inside a heading (as long as you don't nest the a elements).

But I think your heading doesn't make sense. It's either "Popular" or "Recent", not both at the same time, right? So your heading is missing its purpose: describing the content of its section.

You should use a content toggler that is not part of the heading:

<section>
  <h1>Popular</h1>
  <nav>Or see <a href="#recent">recent content</a></nav>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</section>

(If you wish, you could change the wording and style it that way that it looks like your example, by positioning the link to the other content next to the heading.)

Clicking at "recent content" should change the heading from "Popular" to "Recent", and changing the link to <a href="#popular">popular content</a>

If you don't use the URL anchor + CSS to hide/show the corresponding content, and you don't have a fallback for users/bots without JS, you should display both at the same time, popular and recent content, for users with disabled JavaScript.

---

Regarding:

The h3 is because it is one of the sections in the sidebar and my sidebar sections are all headed by h3. I have seen some sites that use h2 and some that use h3, I chose h3.

Just to get sure: You are not free to use any heading level you like. You need to follow your document outline. If the use of h3 is correct depends on your whole page structure.