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>

Further Reading