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 inside of

elements?

Or the ot

Answer 1

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.