Can the <header> tag be contained within the <aside> tag in HTML5?
Question
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.
2 answers
solution1
13 2011-05-24 10:31:27
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:
solution2
12 ACCPTED 2011-05-24 10:38:52
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.