Making sense of HTML5 - Build Windows 8 Apps with HTML5 and JavaScript - page 30

<ul>
<li> Article #1 </li>
<li> Article #2 </li>
<li> Article #3 </li>
</ul>
</aside>
<article>
<h1>Article #1</h1>
<hr />
<section> Introduction </section>
<section> First section </section>
<section> Second section </section>
</article>
<aside>
Right sidebar
</aside>
</article>
<footer>
<hr />
Footer of the page
</footer>
You can insert header and footer using specific elements with a very simple syntax, as below:
<header> Markup </header>
<footer> Markup </footer>
It is interesting to notice that you can have multiple header and footer elements in a HTML5 page.
The most common use is to give the page a header and footer. However, you should consider these
elements as blocks meant to represent heading content of a page or a section of a page and footers.
Section and article elements
HTML5 defines two similar-looking elements to represent the content of a page. The <section>
element is slightly more generic, as it is meant to delimit a logical section of a HTML page. A logical
section can be the content of a tab in a page designed as a collection of tabs.
At the same time, a logical section can also be a portion of the main content being displayed in
the page. In this case, the section element is likely embedded in an <article> element.
<article>
<h1>Article #1</h1>
<hr />
<section> Introduction </section>
<section> First section </section>
<section> Second section </section>
</article>