HTML5 Page Structure

The way of developing the web pages in HTML4 is all well and good but semantically it could be much better.

HTML5 includes a set of markup elements (listed below) that overcome from limitations of web page design. These semantic tags include <article> , <section>, <header> ,<footer>, <aside>, <nav> and <figure> tags. These new tages have meaningful names so that just by looking at these tags you get a clear idea about their contents. These semantic tags of HTML5 are listed below:

  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <nav>
  • <figure>

You can see that above elements are more expressive and just by looking at them, you will get an idea of their intended purpose.


Typical page layout with semantic HTML5 sectioning tags

Above image shows a structure of HTML5 document with various tags. Here important thing is that the document's tag arrangement depends on how and where you want to add them on the document. For example, the <aside> element can be placed on the left hand side of the <section> or even above or below it.

HTML5 Page Structure Example

<!DOCTYPE HTML>
<html>
<head>
	<meta charset=UTF-8" />
	<title>The Best HTML5 Page Structure</title>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li>Left Menu</li>
			</ul>
		</nav>
	</header>
	<section>
		<header>
			<article>
				<h2>Article Title</h2>
			</article>
		</header>
	</section>
	<aside>
		<h2>About Section</h2>
	</aside>
	<footer>
		<p>Copyright 2015 Your site name</p>
	</footer>
</body>
</html>

HTML5 Doctype

HTML5 Doctype is much simplified. The Doctype declaration for an HTML page will tell the browser to render the page in standard mode no matter what type of DTD specified, it just switches to standard mode to render the page, the browser never actually download DTD and validate the HTML document, it only works for HTML editor at design time.

<!DOCTYPE html>

HTML5 Simplifies Tags

In HTML5 some meta tags and the common scripting tags are simplified.

<!--namespace is not needed in HTML5 root element-->
<html lang="en">
<!--long UTF-8 charset meta tag, absent from HTML5 -->
<meta charset="UTF-8">
<!--type attribute in script tag is not required in HTML5-->
<script src="jquery-1.4.4.min.js"></script>
<!--type attribute in link tag is not required in HTML5 -->
<link rel="stylesheet" href="stylefile.css">

Here is a complete list of HTML5 Elements.

Header Element

The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading, but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

<header>
  <h1>This is page heading</h1>
</header>

Nav Element

The <nav> section can contain links to the other pages from the website or to other parts of the same web page.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Section Element

The <section> element represents a generic section of a document or application.A section can also have its own <header> elements as well as a <footer> element.

<section>
  <h1>This is a section heading</h1>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</section>

Article Element

The <article> element represents an independent item section of content such as a blog post, forum post or a comment. You can use <section> and <article> together or use nested <article> elements.

<article>
  <h1>This is article heading</h1>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</article>

Aside Element

The <aside> element is intended to house content that is related to the surrounding content but at the same time is a standalone piece of content in itself. The <aside> element can house any type of content including textual information and images.

<aside>
  <figure>
    <img src="images/laptop.png" height="100px" width="100px" />
    <figcaption>Figure caption goes here</figcaption>
  </figure>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</aside>

Footer Element

The <footer> element represents the footer of the whole page or a <section> element. It is intended to contain footer information such as copyright notice.

<footer>
  <hr />
  Copyright (C) 2013. All rights reserved.
</footer>