Winnipeg Web Design

HTML5 Overview

What is new with HTML5 you ask?

A lot of people are wanting to look into the future as to what the possibilities will be with HTML5. I am not sure how long it will take for these techniques to become the standard, but it can’t hurt getting yourself ahead of the curve.

HTML 5

HTML 5 is the next version of HTML that will come out. It adds a bunch of new semantic elements to help us code our websites. HTML 5 is also said to include a drawing API (canvas), as well as dragging and dropping of elements.

Let’s take a brief look at some of the new HTML5 elements.

Structural Elements

<header>
	<h1>Page title</h1>
</header>
<nav>
	<!-- Navigation -->
</nav>
<section>
        <!-- Section -->
</section>
<aside>
	<!-- Sidebar -->
</aside>
<footer>
	<!-- Footer -->
</footer>

All the above are pretty self explanatory. They describe the structural elements that one would use to layout a page. This elements would replace the divs we normally use in their place.

<div id="header">
</div> <!-- end header -->

Another thing to note is that the “header” tag does not necessarily mean the page header. It can be used as follows:

<section>
    <header>
        <h2>My Heading</h2>
    </header>
</section>

Another important tag to note is the “article” tag. In general terms this would wrap a blog post, portfolio item, service listing etc.. There are all essentially articles even though we might not think of them that way.

Form Elements

HTML 5 has introduced a slew of new form elements that will make things so much more semantic.

<form action="#" method="post">
		<input name="name" id="name" type="text" />
		<input name="email" id="email" type="email "/>
		<input name="website" id="website" type="url" />
</form>

Notice that our “type” attributes have new values that can be assigned.

Miscellaneous Elements

There are two more tags I should quickly touch on and those are the “canvas” and “time” tags.

Time is self-explanatory. It allows you to control how a date and time are displayed:

<time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time>

A more complex tag is the “canvas” tag. This tag represents an area that you can draw on using JavaScript. It has some neat functionality which I will not dive into yet. Below is a neat sideshow on its use.

Related posts:

1. Top 4 HTML5 Features

Written by brenelz

Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently run my own business called Brenelz Web Solutions which focuses primary on winnipeg website design. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to follow me on twitter.