Semantically, which is more correct: a in h2, or h2 in a?

Question

I'm stuck deciding which to use as both seem to work.

Should I be placing links <a> inside of <h2> elements?

Or the other way around?

What is the correct standard?

Solution 1

You can only place <h2> elements within <a> elements if you're working with HTML5, which allows any other elements within <a> elements. Previous specifications (or current ones however you want to look at them) never allowed this.

The usual way of doing this is to place <a> within <h2>. This works, has always worked, and has been the only valid way to do it before HTML5, for heading links, as the link refers to the text in that heading. You rarely need to place <h2> within <a> unless that <h2> is part of some more complex structure which functions as a hyperlink as a whole.

Solution 2

Also its not functioning same, there is one big difference.

If you put <h2> into <a> the whole block (for example line) of heading will work like link.

However if you put <a> into <h2>, only visible text will work as link. (you can test it with cursor change)

Solution 3

HTML allows things inside <a> tags

I have this...

<header>
  <a href="/home">
    <h1>Main heading</h1>
    <h2>Sub heading</h2>
  </a>
</header>

And it works for me.

The whole heading text including the subheading is clickable as I want. I don't know of a better way to do this with html 5.

Solution 4

The answer is that it depends...

From the W3C website, more specifically in the HTML5 semantics page, it is clear that h2 elements (as all other heading tags) have as content model "Phrasing content".

Now, following the Phrasing content link, you get the following description:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

and in the following list you have that phrasing content include:

a (if it contains only phrasing content)

So, if the a tag includes only phrasing content, HTML5 allows it to be contained within a h2 tag.

Viceversa, the text level semantics page describes the a element content model as follows:

Transparent, but there must be no interactive content descendant.

Following the Transparent link, at the end of the description is found the following:

When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content.

Since in the h2 tag description it is said:

Contexts in which this element may be used: Where flow content is expected.

an h2 tag may the considered as flow content.

So, if the a tag has no parent, in HTML5 it must be treated as accepting any flow content, including h2 tags.

View more solutions

Comments

[BoltClock]

What is meant by "Heading has higher importance"?

[Kyborek]

Sorry, when i just thought about it more it did not make any sense.

[1nfiniti]

dude... forget about "valid" in the pedantic sense...it's all about display level. If a is set to display:block it is fine, html4, xhtml1, html5... Whatever.

[BoltClock]

@mikeyUX: Why are you telling me and not the OP this?

[Frederik Krautwald]

"So, if the a tag has no parent" - No parent what? Element? Another heading tag?

[Frederik Krautwald]

Voted your answer up because of the extra info, though it doesn’t really answer the question of which is semantically more correct.

[clami219]

The same reported in the Transparent Link quotation from the W3C website (dev.w3.org/html5/pf-summary/dom.html#transparent)... it is a parent element

[Frederik Krautwald]

Sorry, I should have connected it with your quote above.