Can the <header> tag be contained within the <aside> tag in HTML5?
Given that HTML5 is still a draft, the specs says
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
and
The [aside] element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
and the only "restriction" on the <aside /> tag is
It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document
event though there are no explicit examples with <header /> tags inside <aside /> tags, I would consider them OK.
Links:
- http://dev.w3.org/html5/spec/Overview.html#the-header-element
- http://dev.w3.org/html5/spec/Overview.html#the-aside-element
There’s nothing wrong per se with the code you’ve put there, but bear in mind that the <aside> tag is a sectioning content element, so the <header> and <h1> inside it will be treated as the heading just for the <aside>, rather than for the whole page (at least under the HTML5 outlining algorithm, which, sadly, seems to be dead in practice).
That might be what you intend. If not, then if everything in the left column is pretty much just introductory content for the page, you could put it all inside a <header> element and lose the <aside> completely:
<html>
<head></head>
<body>
<header>
<h1></h1>
<div>
</div>
</header>
<section id="content">
</section>
</body>
</html>
You might also consider replacing <section id="content"></section> with a <main> element.