Sections in an HTML Document

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>

Next: Style Tags 

Home > Sections

Viewing mobile website page. Switch to WML or Full HTML