CODEWITHSUNDEEP
csshtmlxhtml
br3w5
br3w5

Reputation: 4593

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

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

Upvotes: 8

Views: 2010

Answers (4)

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 2

Alexander Schimpf
Alexander Schimpf

Reputation: 2392

In HTML 4.01 and XHTML, an h3 tag may contain a a tag, but not the other way around.

In HTML5, both ways are valid. If an a tag contains an h3 tag though, the a tag must NOT be nested in an element that cannot contain an h3 element.

Upvotes: 1

Narendra
Narendra

Reputation: 3117

Both are ok

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


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

But I will use 1st one if I don't care whatever there is in the anchor and I just want it to look like <h3>

And I will use 2nd one if I am concerned about a particular part of anchor needs <h3>. For

example below I need the 2nd one.

<a href="/"> check normal text <h3>check large text</h3></a>

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 237855

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...

Upvotes: 9

Related Questions