HTML Tutorial HTML 5 Tags HTML Attributes CSS Styles HTML Metatags Cheat Sheet HTML Examples Definitions HTML 5 Changes Things to Avoid HTML 5 FAQs Help About

You are currently using a web browser that does not support HTML 5 with style sheets. Please try the standard HTML 5, XHTML 1 or XHTML 1 Mobile version of this page instead.

Sections in an HTML Document

For an HTML 5 processor to tell the difference between site-wide headings and page headings, the child elements of the body tag may include only a specific subset of the valid tags that a >body< can contain:

  1. optional <hn > heading tags
  2. an optional <nav> tag
  3. a single <article> tag
  4. an optional <aisde> tag

This is an example of the structure of a page with a site-wide heading:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<h1>My Example Site</h1>
<nav>
...
</nav>
<article>
<header>
<h2>Page Heading</h2>
<nav>
...
</nav>
</header>
<p>This is the introduction to the article.
</p>
<section>
<hgroup>
<h3>Section Heading</h3>
<h4>Subheading for this section</h4>
</hgroup>
<p>This is the content of the section.
</p>
</section>
<footer>...</footer>
</article>
<aside>
...
</aside>
</body>
</html>

You can put the site-wide heading and navigation in a template to avoid having to code it on every page and to reduce page load times.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<article>
<header>
<h2>Page Heading</h2>
<nav>
...
</nav>
</header>
<p>This is the introduction to the article.
</p>
<section>
<hgroup>
<h3>Section Heading</h3>
<h4>Subheading for this section</h4>
</hgroup>
<p>This is the content of the section.
</p>
</section>
<footer>...</footer>
</article>
<aside>
...
</aside>
</body>
</html>

back to top

Last updated Sunday September 19, 2010

Printer-friendly PDF* format:

HTML 5 Tutorial

You are currently viewing this page in HTML 5 Style Sheet* format (* see Clicklets for more infomation). This document is also available in HTML 5 XML*HTML 5 non-XML*XHTML 1 Style Sheet*XHTML 1*XML* HTML 4* XHTML Mobile* WML Mobile* and printer-friendly PDF* formats. This is accomplished with Single Source Publishing, a content management system that uses templates in XSLT style sheets provided by XML Styles .com to transform the source content for various content delivery channels. There is also RDF* metadata that describes the content of this document.