Two anchor tags inside a single heading
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?
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.