Home/ Questions/Q 8221117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T13:47:24+00:00

In HTML, should block level elements always wrap <a> tags? What if it’s necessary

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0