Can the <header> tag be contained within the <aside> tag in HTML5?

I'm wondering if this construction would be semantically correct in HTML5.

<html>
<head></head>
<body>
    <aside>
        <header>
            <h1></h1>
        </header>
        <div>

        </div>
    </aside>
    <section id="content">

    </section>
</body>
</html>

What I want is a left bar taking the 30% of the screen, with the logo and some stuff below it, and then the content taking the other 70% on the right side.

Thanks a lot.

Solution

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.