HTML Hierarchy. Here, what is the "correct" form?

Lets say I want the header of my site done with HTML5 in a semantic way that will also be good for SEO. What's the correct hierarchy of elements? Here's what I've got, tell me if you see anything wrong, thanks.

<header>
    <hgroup>
        <a href="/"><h1>My Site Title</h1></a>
    </hgroup>
</header>

Or should the tag be on the OUTSIDE and the anchor on the inside? What's best for styling, and just being semantic in general, thanks.

ETA: Also, try and g开发者_如何学运维o in depth, I'd love to understand more about hierarchy in headers. Also, this is assuming I have more content in there, I included group just to add to the question.

---

No search engine uses header or hgroup at the moment. hgroup is under constant threat of being dropped from the spec and is ignored by everything. I use it because I build TOCs and outlines for my posts, but unless you are planning to do processing with it yourself, forget about it. hgroup even as specc'ed it only there if you have multiple hn elts inside it. header might be worth including if you are worried about future-proofing your template for future screen-readers.

Regarding a on the outside or inside of the h1, that depends mainly on how you want your users to browse. a on the outside is called a block level link, and users can click on the entire box the text is in to navigate; a on the outside inside means you have to actually click on the text itself. Apart from that, no real difference.

---

If you only have one <h1> tag, you don't need the <hgroup> element, plus, one could argue about placing the <a> inside the <h1> rather then the oppsite, it won't affect semantics, but putting it outside does have some styling default advantages (such as greater click area). So the semantically correct code (in my opinion) would be:

<header>

    <a href="/"><h1>Site Title</h1></a>

</header>

Why no <hgroup>?

Because <hgroup>'s purpose is to group together headers which serve the same purpose, for example:

<h1>Site Title</h1>
<h2>Longer Site Description</h2>

Would yield unexpected results for screen readers and search engines, so <hgroup> is here to solve that issue:

<hgroup>
    <h1>Site Title</h1>
    <h2>Longer Site Description</h2>
</hgroup

---

Along with all you've already been told, Mr. Gariety, I urge you to read up on HTML5 validators and "linters". If this area is new to you, start by feeding a sample page to http://validator.w3.org/; you're likely to learn a lot.