In HTML, should block level elements always wrap <a> tags?

Question

In HTML, should block level elements always wrap <a> tags? What if it's necessary for the tag to wrap the block level element to ensure the correct styles are applied? For example can this

<h3><a href="/">Your Header</a></h3>

be this

<a href="/"><h3>Your Header</h3></a>

NB: I'm going for the latter approach to ensure the correct styles are applied (I'm working with legacy code that is just not worth re-working for this one element), but while doing this I was interested to know what the community's views are.

And yes I have read this question In HTML which way round should a and h1 be nested? but I'm not sure if a different or more flexible rule applies for <h3> tags.

Taking in the comments below and looking again at the code, I have two possible solutions:

1. Wrap the <h3> elements with <a> elements (ok in HTML5)
2. Add .class a to the CSS so that it inherits parent div styles as follows:

HTML

<div class="class">
    <h3><a href="/">Your Header</a></h3>
</div>

CSS

.class, .class a {
    width:296px;
    height:46px;
    overflow:hidden;
    color:#FE5815;
}

Answer 1

In this context, it is absolutely allowed for the a element to contain the h3 element, at least according to HTML5.

An a element is known as a "transparent" element: it may contain whatever its parent element may contain. The only criterion is that it may not contain any other "interactive" content, e.g. other a elements, button elements, iframe elements. In this case, presuming that the first version is allowed, the second version is also allowed under HTML5.

This is the page in the HTML5 spec that specifies this. It takes a little interpretation to understand, unfortunately...

Answer 2

Note that there is one case in HTML5 where

<h3><a href="/">Your Header</a></h3>

would be valid, but

<a href="/"><h3>Your Header</h3></a>

would not, and that's when the parent of the <h3> element is an <hgroup> element.

The <hgroup> element can only have <h?> children, so while the transparent content model of the <a> element allows an <h3> to be its child, the <a> element remains invalid as a child of <hgroup>.

In this case

<hgroup>
  <h3>
    <a href="/">Your Header</a>
  </h3>
</hgroup> 

and

<a href="/">
  <hgroup>
    <h3>Your Header</h3>
  </hgroup>
</a>

are the only valid arrangements.