HTML5 Document Structure

Essential Guide to HTML5 Document Structure

HTML5 is certainly one of the latest buzzwords in the web community. It is not something new anymore and we have already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you would like to use a HTML5 tags.

Other useful HTML articles:

Let’s have a look at the document structure of a HTML4 and HTML5 with 2 column web page.

HTML4 Document Structure:

HTML4 Document Structure

HTML4 Document Structure

HTML5 Document Structure:

HTML5 Document Structure

HTML5 Document Structure

As you can notice above the HTML5 page is very simple yet also very clean, HTML5 has plenty of new elements which effectively make it easier to structure pages and also helps browsers have more control as to how the web pages are displayed. Once all the big named browsers are compatible with HTML5 you should notice faster loading times, easier navigation and much richer content. HTML5 introduces a set of new elements that makes it easy to structure your page through the use of tags like: <header>, <nav>, <article>, <aside>, <footer>, etc.

Basic Components of HTML5 Document

Example:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="description" content="document description">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<title>Title of the page</title>
<link rel="stylesheet" href="docstylesheet.css">
</head>

<body>

<header>
<h1>Main title of the site</h1>
</header>

<nav>
<ul>
<li>home</li>
<li>profile</li>
<li>images</li>
<li>about</li>
</ul>
</nav>

<section>

<article>
<header>
<hgroup>
<h2>Post 1 title</h2>
<h3>Subtitle of the post 1</h3>
</hgroup>
<p>posted 16-05-2012</p>
</header>
text of my post 1
<figure>
<img src="mypic.jpg">
<figcaption>
This is the photo of the first post
</figcaption>
</figure>
<footer>
<p>comments (0)</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h2>Post 2 title</h2>
<h3>Subtitle of the post 2</h3>
</hgroup>
<p>posted 16-05-2012</p>
</header>
This is the text of the second post
<footer>
<p>comments (0)</p>
</footer>
</article>

</section>

<aside>
<blockquote>Post One</blockquote>
<blockquote>Post Two</blockquote>
</aside>

<footer>
Copyright &copy; 2011-2012
</footer>

</body>
</html>

Here is the list of what we consider the most relevant:

<header> – This element represents a set of introductory aids and can be applied to different sections of the document. It is intended to contain the section’s headings, but also could be used to wrap indexes, search forms, logos, etc.

<nav> – This element indicates a section of links that have navigational purposes, such as menus or indexes. Not all the links in a web page have to be inside a <nav> element; only those parts of major navigation blocks must be.

<section> – This element represents a generic section in the document. It is usually used to build several blocks of content (for example, columns) in order to group content that shares a specific theme, such as chapters or pages of a book, groups of news articles, a set of articles, etc.

<aside> – This element represents content that is related to the main content but not part of it. Examples might be quotations, information on side bar,advertising, etc.

<footer> – This element represents additional information related to its parent element. For example, a footer inserted at the end of the body will provide additional information about the document, like a regular footer of a page. The element can be used not only for the <body> but also inside different sections in the body, providing additional information about those specific sections.

<article> – This element represents a self-contained portion of relevant information; for example, every article of a newspaper or every entry of a blog. The <article> element can be nested and used to show a list within a list of related items; for example, users’ comments in a blog entry.

<hgroup> – This element is used to group a set of H elements when the heading has multiple levels; for example, a heading with a title and a subtitle.

<figure> – This element represents an independent portion of content (for example, images, diagrams or videos) that is referred to in the main content. This is information that could be removed from the main content without affecting its normal flow.

<figcaption> – This element is to show a caption or legend to be used along with the <figure> element. An example is the description of an image.

<mark> – This element highlights a text that has relevance in a particular situation or that is shown in response to user’s input.

<small> – This element represents side comments, such a small print (for example, disclaimers, legal restrictions, copyrights).

<cite> – This element is used to show the title of a work (book, movie, poem, etc).

<address> – This element encloses contact information for an <article> or the entire document. It should be inserted within a <footer>.

In Closing

New sections and headings elements introduced in HTML5 bring the ability to describe the structure and bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page. The purpose of this article is to encourage you to use these new web technologies. If you liked this article, and I hope you did, please spread the world.

email

Related Posts

SmartStart
Inline Elements List
HTML5-Audio-Element
HTML5 Header Element

Interesting Posts

About dreammaker

I am Najam - A Developer, Designer, Blogger and Photographer. I always love to share my knowledge and research about Technology, Blogging, Tutorials, Software's and Quick Tips.