Geek Answers Handbook

In HTML, should level elements be blocked by always wrapping <a> tags?

In HTML, should block level elements always wrap <a> tags? What if a tag needs to wrap a block-level element to provide the right styles? For example, can it

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

this is

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

NB: I use the latter approach to ensure that styles are applied correctly (I work with legacy code that just shouldn't be reworked for this one element), but I was curious to know what the views of the community are.

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

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

  • Wrap the <h3> elements with the <a> elements (ok in HTML5)
  • Add .class a in CSS so that it inherits the 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; }
+8
html css html5 xhtml
source share
4 answers

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

The a element is known as the "transparent" element: it can contain everything that its parent element can contain. The only criterion is that it may not contain any other “interactive” content, for example. other a elements, button elements, iframe elements. In this case, assuming the first version is allowed, the second version is also allowed in HTML5.

This is the page in the HTML5 specification that points this out. To understand, unfortunately, requires a little interpretation.

+8
source share

Note that in HTML5 there is one case where

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

will be valid but

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

will not, and that when the parent <h3> is an <hgroup> .

The <hgroup> element can only have <h?> <hgroup> , therefore, when the transparent content model of the <a> element allows <h3> be its child element, the <a> element remains invalid as a child element of <a> t23>.

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.

+2
source share

Both are fine

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

But I will use the first if I do not care what is in the anchor, and I just want it to look like <h3>

And I will use the second if a certain part of the <h3> binding needs bothers me. For

example below I need a second one.

 <a href="/"> check normal text <h3>check large text</h3></a>
+1
source share

In HTML 4.01 and XHTML, the h3 tag may contain the a tag, but not vice versa.

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

+1
source share

More articles:


All Articles