Semantic Html5

HTML5 Semantic Page Structure
Developing a fully semantic HTML5 website requires getting to know a number of new elements and how they fit into the structure of the site.
HTML5 introduces a host of new features such as canvas and video elements, support for local file storage and better form controls and validation, but most importantly it brings focus to semantic mark up. HTML5 lays the initial groundwork for a new HTML that will revolutionise application development both in traditional ‘webapps’ and desktop/mobile applications.

The concept is that a single HTML5 application, with the power to do the same things as a modern mobile app such as file storage, handle video, audio and advanced graphics will be able to provide a seemless experience, equivalent to native apps, on any device. The savings in development costs would be massive if this could be realised. There is currently a lot of debate about whether HTML5 can acheive this yet, with Mark Zuckerberg famously claiming it is not ready yet (see this blog for a great demonstration of what can be done with HTML5).

Whether HTML5 is ready yet is an article for another time, but there is not doubt that web developers can begin using another major aspact of HTML5 now: semantic markup.

“ Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation.

Wikipedia

CSS was designed to make separating the content of a web page from its styling easier. This improves accessibility through better interaction with screen readers and other text based web access which ignore any styling and improves the quality of design and ease of construction. Focusing on the content and what it means, before thinking about how an element should look helps to create clean code and a semantic web.

This is why we have (generally) seen a change from markup like this:

<div width="200px">
	<p><font size="12" color="red">Non-semantic html markup.</font></p>
</div>

To something more like this, usually with the CSS in a separate file (left out here):

<div class="header">
    <p>This is more semantic html markup.</p>
</div>

And now with HTML5:

<header>
    <p>This is even better semantic HTML5.</p>
</header>

With the new header, section, footer, aside, article, summary, nav, figure, figcaption and time elements HTML5 allows us to begin creating truly semantic website markup.

Basic page elements

HTML5 features a new doctype which is much cleaner and simpler than for previous version of HTML4 or XHTML. As usual it is included at the top of any HTML web page. A new meta tag contains all the other required information – the content type and charset in one meta tag instead of the usual two.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Page Title</title>
    </head>

    <body>
    </body>
</html>

Other than that the most basic structure is the same as any other HTML document with head, body and title elements. The good thing is that any browser that doesn’t yet support HTML5 or recognise the DOCTYPE will simply switch into standards mode ignoring any unknown elements. This means there is no reason not to start using HTML5 today and there are ways to ensure even new tags will be recognised and function in older browsers.

Older browsers will ignore any styling applied to unknown elements such as the new header tag. Luckily HTML5Shiv is a JavaScript workaround which when included in the header of a webpage causes old browsers to style the elements like any other element. This is particularly useful for all Internet Explorer browsers prior to version 9 and which are still in mainstream use, although already the vast majority of users will be using a browser which supports HTML5 fully.

Example semantic layout

Looking at the code below of a sample semantic site using HTML5 it is very easy to tell what is what and its likely purpose and importance.
If you were a search bot you can immediately assign importance to the links in the nav element, understand the significance of an article and even easily pick out important dates and names.

A full template for a semantic HTML5 page:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Website Title</title>
</head>

<body>
    <header>
        <h1>Logo</h1>
        <nav>
          <ul>
              <li>Menu 1</li>
              <li>Menu 2</li>
          </ul>
        </nav>
    </header>
	
    <section>
        <article>
            <header>
                <h3>Title</h3>
                <p>Posted on <time datetime="2015-01-09T13:19:20">09/01/2015</time></p>
            </header>
            <p>Lorum ipsum.</p>
        </article>
    </section>

    <aside>
        <h3>Sidebar</h3>
        <p>Lorum ipsum.</p>
    </aside>

    <footer>
        <p>Lorum ipsum.</p>
    </footer>
</body>
</html>

Even without using HTML5, it makes sense to use semantic principles when you can. When naming classes for CSS reference something like sidebar-headingis a lot better than red or large as it refers to the content and not the styling and will save you time as you create your site or when you come back to it in a few months time.

Although it may never be possible to get 100% semantic markup, there is no reason to not begin making use of HTML5, good naming conventions and coding practices for the benefit of users, search bots, future editors and yourself.