Can the <header> tag be contained within the <aside> tag in HTML5?_问答_开发者

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

开发者 https://www.devze.com 2023-03-08 04:29 出处：网络

I\'m wondering if this construction would be semantically correct in HTML5. <html> <head></head>

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 bel开发者_开发问答ow it, and then the content taking the other 70% on the right side.

Thanks a lot.

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.