HTML Sections
The section tags in HTML5 are used as containers for various parts of a web page within the body.
<header>
The <header> tag can either be used as a container for navigation, or, introductory content such as a logo and page heading. It is possible to have more than one <header> tag within a web page, however you can't place a <header> tag inside another <header> tag, or within section tags such as <footer> and <address>.
<body> <header> <img src="logo.jpg" alt="logo" width="100" height="100"> <h1>Example Site Name</h1> </header> <article> <header> <h1>Article Heading</h1> </header> <p>Example paragraph of text.</p> <p>Another example paragraph of text.</p> </article> <aside> <header> <h1>Aside Heading</h1> </header> <p>Some content here.</p> </aside> </body>
Further Reading
<nav>
The <nav> tag can be used as the container for the main navigational links on a web page, such as an unordered, or bulleted list, as show below. If this is top level navigation, it would be placed within the <header> tag as described above.
<nav> <ul> <li>Information Technology</li> <li>Web Design & Development</li> <li>Music</li> </ul> </nav>
Further Reading
<article>
The <article> tag is a container for items such as forum or blog posts, news items, interactive widgets and user submitted comments. It should be independent from other areas of a web page and therefore easily reusable in other areas of a website.
<article> <h1>Example Heading</h1> <p>Example paragraph of text.</p> <p>Another example paragraph of text.</p> </article>
Further Reading
<aside>
The <aside> tag has two distinct uses. Firstly, it can be used within an article, as defined above, as a container for a pull quote, for example, which is directly related to the article. This might be styled in such a way so that it stands out from the rest of the text, with a bigger font, or emphasised in italics. It's second use is as a container for secondary content in a sidebar. This is still related to the main article, but not as closely as in the first example. If the main article is about say, Europe, then the sidebar could be a newsfeed containing European news.
<article> <h1>Example Heading</h1> <p>Example paragraph of text.</p> <aside>Some content here.</aside> <p>Another example paragraph of text.</p> </article> <aside>Some content here.</aside>
Further Reading
<div>
The <div> tag is used to separate a web page into divisions or sections for styling purposes, to layout a web page, for example. It is useful for grouping items together, in order to apply a single style to all that it contains. The example below shows a <div> with all the text within it aligned to the right.
<div style="text-align:right;"> <h1>Example Heading</h1> <p>Example paragraph of text.</p> </div>
Further Reading
<section>
The <section> tag is used to split the contents of a web page into sections, for example, if the contents of a page is split into chapters, then each chapter would be contained within its own set of <section> tags. The <section> tag should only be used if there is a heading at the top and it shouldn't be used as a container purely for styling purposes, as this is the job of the <div> tag defined above.
<section> <h1>Chapter 1 Heading</h1> <p>Example paragraph of text.</p> </section> <section> <h1>Chapter 2 Heading</h1> <p>Example paragraph of text.</p> </section>
Further Reading
<footer>
The <footer> tag is a container for footer information, such as contact or copyright information, sitemap or links to related documents. A web page can contain more than one <footer>, so as well as providing a footer for the <body> as a whole, a <footer> can be used within <nav>, <article>, <section> and <aside>, for example.
<body> <article> <h1>Example Heading</h1> <p>Example paragraph of text.</p> <p>Another example paragraph of text.</p> <footer>Article footer content.</footer> </article> <aside> <p>Some content here.</p> <footer>Aside footer content.</footer> </aside> <footer>Body footer content.</footer> </body>
Further Reading
<address>
The <address> tag provides contact information relating to the author of a web page, <article>, <section> or <blockquote>, and can reside in the <footer> for that area.
<article> <h1>Example Heading</h1> <p>Example paragraph of text.</p> <p>Another example paragraph of text.</p> <footer> <p> Some Article footer content. </p> <address> by Fred Bloggs. </address> </footer> </article>