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.