19

I'm wondering which of the following two orders is semantically correct in HTML:

1. <h1><a>Header</a></h1>
2. <a><h1>Header</h1></a>
Mohamad
  • 32,727
  • 31
  • 131
  • 208

6 Answers6

25
<h1><a>Header</a></h1>

<h1> is a block-level element and <a> is not, it is syntactically invalid HTML to have block level elements inside inline elements (at least until HTML5) which is how the other way would be.

Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261
Paolo Bergantino
  • 449,396
  • 76
  • 509
  • 431
  • 8
    Anyone reading this at the time I comment should know that either is acceptable in HTML5. Source: http://webmasters.stackexchange.com/questions/20446/anchor-tag-inside-h1-or-h1-inside-achor-tag-which-is-better – Jared Jul 16 '13 at 07:36
9

This answer on a duplicate question is better than mine: https://stackoverflow.com/a/7023551/20578

But, for posterity:

Semantically, there’s no difference. Remember, “semantic” just means “related to meaning”, and meaning is just something agreed between humans (because computers don’t natively do meaning, that’s a human brain thing). No-one’s got time to agree that one of these virtually identical options means something different to the other :)

Surprisingly, they’re actually both valid as well, as of the current HTML spec, because <a>’s content model is defined as “transparent”, i.e. the same as its parent.

See:

And:

(That assumes that <a>’s parent can have an <h1> as its child)

However, it’s not valid under previous versions of HTML:

Community
  • 1
  • 1
Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261
3

From a semantic perspective: both (or neither).

(From a structural perspective, OTOH, before HTML 5 an anchor cannot contain a heading, and since browsers aren't all HTML 5 capable yet you should avoid the new form of the construct where possible)

If you are creating a link target, then <h1 id="target_name"> is preferred to <h1><a name="target_name"> anyway.

If you are creating a hyperlink, then having the most important heading on the page link somewhere else is somewhat dubious from a semantic point of view.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • “since browsers aren't all HTML 5 capable yet you should avoid the new form of the construct where possible” — isn’t this one of those areas like the doctype where the HTML5 spec has codified existing browser behaviour, meaning you can happily use this construct wherever you want? – Paul D. Waite Mar 17 '11 at 16:05
  • I've seen browsers breaking on block elements inside anchors. I haven't done an in depth check to see what circumstances this is under though. – Quentin Mar 17 '11 at 16:07
1

I'd say <h1><a>, because <h*> are block elements and <a> is inline element, so it seems more natural to keep the inline element inside a div block, not the other way round.

Maurycy
  • 1,316
  • 11
  • 32
1

The header should be first in my opinion but I doubt that search engines would really mind what way round they are, inside the H1 just seems cleaner to me...

Myles Gray
  • 8,055
  • 7
  • 46
  • 69
1

Since h1 does not directly correspond to a viewable object they both are correct.

Vincent Vancalbergh
  • 3,167
  • 2
  • 20
  • 24