1. Computing

Discuss in my forum

Build Your First HTML5 Document

Learn the Steps to Build an HTML5 Document from Scratch

By

HTML5 doesn’t change how you build web pages very much, but it can be helpful to go through the design of a well-written HTML5 document so that you can understand how to build an HTML5 page and why you need various elements and features.

This article will walk you through an HTML5 document and explain all the new and different features.

Starting at the Top

The first thing that distinguishes an HTML5 from an HTML 4.01 page is the DOCTYPE. This is the first line in the document:

<!doctype html>

But after that it is the same as HTML 4, you put an HTML element and then a HEAD element.

<html>
<head>

It’s very important that the first element inside your HEAD element is the META charset. This helps keep your page more secure.

<meta charset=utf-8>

The TITLE element is the same as HTML 4.01. Describe the name and purpose of the page here. Remember that the TITLE is used by search engines in the results and by web browsers in the bookmarks, so it should be well written.

<title>Sample HTML5 Document</title>

Putting a LINK element to one external style sheet right after the TITLE element helps your pages load more quickly. And then you can list any other META tags you want to include. The only one that is really important is the META description tag. This is used by search engines to describe the page. But you can also include META keywords if you like.

<link rel=stylesheet href=styles.css>
<meta name=description value="And this describes the page">
<meta name=keywords value="keywords, go, here">

The last thing in your HEAD element should be any scripts you might need to load, like jQuery and the HTML5Shiv to help IE 8 and lower view your HTML5 pages as well as they can.

<script src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Start Building Your Document

The BODY element is where you start using all the new HTML5 sectioning elements. This divides your page up into sections that can be outlined and viewed semantically.

<body>

Typically, the first part of your page is a header section for the entire page. In it you might find a logo, page title, tag line and possibly main navigation. You can use the HEADER element to define the header section.

<header>
<img src="logo.png" alt="My Company">

This example page places the page title and sub-title into an HGROUP so that they are seen as one heading by any outlining functions, and they do not create separate implied sections.

<hgroup>
<h1>Page Title</h1>
<h2>Page Sub-Title</h2>
</hgroup>

There is also navigation indicated by the NAV element.

<nav>
<h1>Main Navigation</h1>
<ul>
<li><a>Link</a>
<li><a>Link</a>
</ul>
</nav>
</header>

The Meat of Your Document

I like to think of the ARTICLE element as the meat of your page, but it really is any content on the page that might be syndicated. It is unlikely that you wouldn't use the ARTICLE element on a page, as most pages you want your readers to find something of value in it, and this example page is no exception.

<article>
<h1>Main Page Contents</h1>
<p>... Main contents go here

If your article contains a table, image, or pull-quote that you want to include with the article but it doesn't have to be in a specific place in the article, then you can put these elements in a FIGURE element.

<figure>
<img src=image.png alt="An image that can remain out of the flow">
<figcaption>
<p>This is a figure for the article
</figcaption>
</figure>

Any section of your page can have a HEADER or a FOOTER. This article doesn’t have a HEADER, but it does have a FOOTER.

<footer>
<p>Footer text</p>
</footer>
</article>

Include details about the article contents in the footer like by-line, date written, or related articles. You can also put these in an ASIDE element if it seems more ancillary to the article contents.

Extra Information

Nearly every web page has information that lies outside the main point of the page. This content can be stored in an ASIDE element. Because this ASIDE is outside the ARTICLE, this tells the browser that the contents are tangentially related to the site as a whole rather than the specific article.

<aside>

Remember that every section must have a headline. I have written them in this document as all H1 elements, but this can be difficult for screen readers to interpret. So you might want to build them in a hierarchy (H1 then H2, then H3, etc.) as you did in HTML 4.01 documents.

<h1>Site Ancillary Information</h1>

This sidebar has three separate elements inside it. These elements aren't semantically an article, aside, or navigation, so I used the most generic of the sectioning elements, SECTION.

<section>
<h1>Blogroll</h1>
<p>...
</section>
<section>
<h1>Twitter Feed</h1>
<p>...
</section>
<section>
<h1>Advertisements</h1>
<p>...
</section>
</aside>

The Bottom of the Page

The last thing you will probably see on an HTML5 document is the FOOTER. This contains information that is normally found in the footer of most web pages like supplemental navigation, copyright information, and contact links.

<footer>
<h1>Page Footer</h1> <p>Copyright &copy;2011 Jennifer Kyrnin

This footer contains extra navigation which I surrounded with the NAV element. You don’t need to surround every aspect of navigation with the NAV element, just the navigation areas that are the most important.

<nav>
<h1>Footer Navigation</h1>
<ul>
<li><a>Link</a>
<li><a>Link</a>
</ul>
</nav>
</footer>

And an HTML5 document ends like any other HTML document, with the closing BODY and HTML tags.

</body>
</html>

You can see the complete HTML document here.

What About How the Page Looks?

One thing you’ll notice if you build this page exactly as I’ve written it is that it’s very plain looking. The sectioning elements do not add any extra styles to the page, you need to decide how your page is going to look using style sheets.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. HTML 5
  6. HTML 5 Tutorials
  7. Build Your First HTML5 Document

©2014 About.com. All rights reserved.