HTML 5.
As you would imagine, HTML 5 is the successor of HTML 4. However, this doesn’t mean that it’ll replace HTML 4, just as XHTML 1 did not replace HTML 4. HTML 5 is still the same old language that you know and love, just with a few more bells and whistle on it than before. Some of the features that have been added are pretty badass, and I thought they’d be incredibly useful when it comes to coding.
HTML 5 really simplifies the process of making web applications, to help developers get the most from their code.
It’s the little things that really matter
The Doctype
The HTML 5 doctype is incredibly simplified. In HTML 4 and XHTML the doctype was notoriously known to be very complicated and hard to remember, meaning you often had to google it before you could get stuck into coding your HTML document.
The HTML 5 doctype looks something like this:
<!DOCTYPE html>
Compared to that of HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
See the difference? That’s a bit easier to remember. This isn’t an accident; the W3 want it to be easy for you to code your documents. This is echoed through HTML 5, with tiny things that help to simplify the process of coding in HTML.
No Quotes
Yeah that’s right, quotes are no longer mandatory in HTML 5. This is a really tiny thing, but I can see how it could speed you up if your document was long enough. Of course, there are some situations where you’re going to have to still use a quote (multiple classes, for instance), but otherwise you can expect a quote free language.
Don’t worry, if you are somehow attached to the idea of quotation marks, you can still use them.
More Defined
In HTML 4 usually you would have a bunch of divs put together with a little bit of CSS to glue it all together. Often these divs were given IDs or classes in order to function correctly in your little HTML society.
In HTML 5 however, there’s a bunch of new an lovely elements, all with names, instead of just using that vague old div tag. Here’s a few of those elements:
- <nav> – For navigational elements
- <aside> – A side of a layout, for more than one column designs
- <section> – A section, perhaps of text
- <header> – For the title of an article or something along those lines
- <footer> – For the footer
- <address> – The address of something, maybe an email, or author details.
There are piles of new tags in html, and a bunch of new attributes too. The tags above work the same as divs in that they are block elements that define a section of a page.
A HTML 5 page might look something like this:
HTML 5 Forms (Web Forms 2.0)
One of the most impressive parts of HTML 5 (and one that will most certainly help us developer folk) is the new way it handles forms. It’s the same basic idea as it always was, only it has a boat load of new features that you can add to it. Currently Opera 9+ (and safari in some cases) is the only browser that supports these features.
Different Input Types
There are a bunch of different input types that HTML 5 allows you to use. No longer are you restrained by the “text” input type, but you can define exactly what type of input this is. Lets say you have a form and you want to put in a form element which allows the user to select their birthday. Back in HTML 4 you would’ve had to either make 3 fields, or let the user enter it into one field and validate it. Not only this but there is the headache that different countries set out their dates differently. Well, worry no longer HTML 5 user! In HTML 5 you can apply a date type to an input like so:
<form>
<input type=date>
</form>
This will create a nice popup calandar as you can see below:
There are a bunch of different types which go as follows:
<form>
<input type=date>
<input type=url>
<input type=email>
<input type=range min=1 max=20>
<input type=number>
<input type=text>
<input type=submit>
<input type=file>
</form>
Each of these do add a little extra functionality to forms which makes it so much easier for developers to code.
- When type is date – creates calandar that pops out of form.
- When type is url – defines the field as a url. This allows for url specific validation.
- When type is email – defines the field as an email field. Allows email specific validation.
- When type is range – makes a nice little slider to pick a range. Don’t forget to set a min and max value!
- When type is number – Makes two little arrows so the user can increase or decrease the number. You can use “min” and “max” here if you want to.
- When type is text – regular text field.
- When type is submit – regular submit button.
- When type is file – it allows you to upload files.
Other Awesome Elements
There are a bunch of other awesome form additions, which I’ll outline below.
- required – add the word required to your input to make it, well.. required.
<input type=text required>
- datalist – allows you to add a drop down list to text inputs
<input type=text list=options>
<datalist id=options>
<option label="HTML 5 Rocks" value="HTML 5 Rocks">
<option label="I love HTML 5" value="I loev HTML 5">
</datalist>
- multiple – if you have a file input, you can add the word multiple to it, to allow multiple file uploads.
<input type=file multiple>
- pattern – you can define an input to follow a pattern, for instance, if you want the input to only contain one number from 0-9 you would do this:
<input type=text pattern="[0-9]">
Working Example (For Opera 9 Users)
Canvas Element
The canvas element is a way to draw graphics or interactive objects with a bit of javascript and the <canvas> tag. You can think of it as a sort of flash or silverlight type tag, only not privately owned (which is a good thing). Canvas has already been put to good use throughout the web, but of course the whole idea isn’t mainstream yet.
Canvas is a pretty straight forward tag that works like any other:
<canvas>
</canvas>
Most of the manipulation of the canvas tag is done through javascript, allowing you to make awesome animations or imagery without special software. The possibilities are nearly endless.
Examples of <canvas> in action
All of these examples are pretty awesome, and show what canvas can do for users.
Web Storage
HTML 5 promises the idea of Web Storage. Web Storage is basically adds the functionality of a SQL database to your web application. A simple API then lets you manipulate or display rows of data.
You’ll notice that a lot of applications on the web are now becoming avaliable offline. Local database storage like the Web Storage idea presented by the W3C will allow more and more apps to become avaliable when you don’t have internet access. As the net has come to represent a lot more of our computer usage, offline applications has became more important, and this will really help users.
There have been some arguments against Web Storage, mainly directed at the SQLite API that HTML will be using. I’m sure however, with the length of time the W3C plans to spend on HTML 5, they’ll sort something out.
Embedded Videos
Embedding videos has always been somewhat of a laborious task, in most cases depending on flash to display the video, because there was no real alternative.
HTML 5 presents an easy to use way to display videos, which all comes down to the <video> tag, and heck, even youtube and daily motion are getting in on the action.
It’ll probably be a few years before we can safely use the video tag around the web, without having to worry about incompatibility with browsers, and all that, but in the end it will result in a quick and easy to use way to get videos on the web, without dependance on a 3rd party entity (Adobe).
Other Useful Resources
Comments
big thanks for this info.
This is a great non-techical list of what HTML 5 will offer. I’ve been looking for a post like this for some time. All the others that I’ve come across have been fairly technical and wordy.
Great Post!!
It’s really helpful information. Thx much!