Evil people put ids to nearly every element on their pages and make everything rigid and ugly. Moreover, there was hardly any semantic structure around the front-end code.
Thankfully HTML5 puts an end to much of this 'evilery'. Well, at least it tries to. Let's talk about what's new with HTML5 and how it makes more sense.
Let's start with starting of comment:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
DOCTYPEs can't get simpler than this!
The Changes in the Sections
Read this brilliant post on Smashing Magazine Coding on The Document Outlining Algorithm.
It will help you understand the importance of using headings and the
hgroup element and enclose the post with a class like "
You can later use the
hgroup to club your headings and create an outline which is actually related to the way you write it and show it.
hgroup is like a wrapper for your headings ranging from
h6. You can make a list of these inside a
hgroup according to title, subtitle and the rest.
The use of
hgroup is to create an effective document outline. Almost every (sane) front-end developer uses similar ids and classes with the same logic.
...and so on.
We have tags like header, footer, nav, article, section and aside, which bring clarity to your code and make it more sane. Isn't it simple to have more meaningful tags like these to structure your content.
You can use header as many times as you want anywhere on your page. Usually it is used to enclose an
hgroup or some headings or relevant content like a table of contents or something like these things.
You must be used to seeing things like:
header is a substitute to this.
The footer is similar to
header. Replace your...
...with a simple
footer tag. You can use it as many times as you want to!
You can group together your links in the nav element. This is the way we code as of now:
<div id="main-nav" class="navigation">
Change your primitive code to this:
Article and Section
The spec defines section as:
section element represents a generic section of a document or application. A
section, in this context, is a thematic grouping of content, typically with a heading.
Authors are encouraged to use the
article element instead of the
section element when it would make sense to syndicate the contents of the element.
The next line makes the use of
sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into
sections for an introduction, news items, and contact information.
element should not be used for styling. A
should be preferred.
There is a great post by Louis Lazaris (Impressive Webs
) on When to Use the HTML5 "section" element
You can read about the article
element from HTML5 Doctor.
From what I have read and understood about aside, it can be used to relate content to the element it is enclosed inside.
For example, if an aside is contained inside an article, it means that the content of the aside is related to the article but not to the page. Whereas, if the aside is outside the article, then it means that it is not as closely related to the article but related to the page.
Another addition to the new elements is an address tag! Yes, we have an
address tag. Imagine that you can actually get the address from a webpage more easily now, by just looking for this simple tag.
Here is an example:
- A simple blog post of yours. Put the title of the post and the post information in the header.
- Move on to the actual post and place in an article. Put the tags and maybe a "tweet my post" link in the footer.
- These simple tags make things more logical unlike the earlier method to use ids like "
header" and "
footer" to do the job.
figure tag has been introduced for your images and other illustrations. As of now, we did this by making
divs or by associating different classes, but soon we will begin to enclose them with the
See this fiddle, I made to demonstrate the use!
Form elements were changed the most in HTML5.
placeholders. Well, it's as easy as eating cheese!
placeholders and the text you need inside your
<input name="user-name" type="email"
placeholder="Your username is your email address">
Apart from this, we have
The draft says:
keygen element represents a key pair generator control. When the control's form is submitted, the
private key is stored in the local
keystore, and the
public key is packaged and sent to the server.
It will help in improving security by verification, I think. I need to study more about it! According to the draft, the
output element represents the result of a calculation.
See the following code:
Result: <output name="result"></output>
document.forms.main.elements.result.value = 'Hello World';
I guess, now you understand the logic of this element. You can manipulate this to change things accordingly and display results in a more orderly fashion.
Other than the above mentioned elements, we have
Meter element is nothing big in terms of what it does, but it brings logic to your code.
My height is 5 feet and 10 inches.
My height is
<dt>Feet: <dd> <meter min=0 max=7 value=5>5ft</meter>
<dt>Inches: <dd> <meter min=0 max=12 value=11>11in</meter>
You can easily understand what all this means. Better than before, right?
The Interactive Elements
The elements under this category are ... wait for it ...
To be frank, I did not use the
details element but I saw an example a while back and it is pretty cool! It's like a mini-accordion. As of now, you can use it in webkit browsers. Won't work on Mozilla. And it will be soon available in Opera. So, what details does is that you can easily collapsible elements.
The code for it is like this:
<p>Hello! I am a paragraph element inside a details tag.</p>
It would look like this, a simple arrow before the summary text and when you click on the arrow, you will see the paragraph text. Demo for
Another good example with a collapsible table of contents.
The menu element seems very interesting.
context menu type allows the element to represent the commands of a context menu. The user will be only be able to interact with the commands if that context menu is activated.
If the attribute is in the toolbar state, then the element will represent a list of active commands which the user can immediately interact with.
In the case of the list state attribute, the element will represent an unordered list of items (each represented by an
li element), each of which represents a command that the user can perform or activate.
Fresh out of the oven, we have these 6 things.
Everyone is very much aware of
canvas for anything and everything. Build games using it, render graphs or play with images.
What all can you do with the nifty
- Draw shapes
- Fill colors
- Create pretty gradients and patterns
- Render text
- Get frames from other
- Play with pixels
- Export your
canvas to a file
A lot of demos and other articles are already there on how to interact with the
canvas. It is one of the very much loved introductions in HTML5.
Moving onto the map and area elements. It can be used to relate pixel coordinates to another element on any image or media.
A good example from HTML5 Doctor is this:
alt="Select a department to go to its page." usemap="#nav">
<area alt="Women" coords="0,0,100,50"
<area ALT="Men" coords="0,0,100,50"
<area alt="Food" coords="0,0,100,50"
These ones are the best.
Take a look at this ugly HTML code used for embedding a video from YouTube!
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
Don't even feel like reading what it says.
Let's do this the HTML5 way.
<video width="640" height="360"
src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
<p> Try this page in Safari 4!
Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a>
Oh, this is so neat! (This is what you said, right?) You can even add an autoplay to the video tag and you know what it means.
track element can be used with video and you will be able to link external files to your video. Code for it is quite easy to understand.
<track kind=subtitles src=abc.vtt srclang=en label="English">
There are other '
kind' for it like subtitles, captions, descriptions, chapters and metadata.
Video done, time for some audio.
audio tag defines 5 attributes.
<audio controls preload="auto" autobuffer>
<source src="track.mp3" />
<source src="track.ogg" />
This enables controls for the audio, enable auto buffering and loads the file beforehand.
The support for the filetypes vary from browsers as of now.
Read more on HTML5 Doctor - Native Audio in the browser.
The Final Say
The new elements introduced are effective over what we had earlier. At least, that's what I feel as a guy who loves to code. For a front-end guy, some of the changes won't make a difference like map, area, address and others like these. The minor things don't make that much of a difference in terms of the result. Code your pages the way you wish. But if someone doesn't see the result and checks your code, he will be able to make out the difference because of these minor things.
- Canvas Gradients
- The Loading Demo
- You can go through HTML5 Demos for more demos with great technologies.
- HTML5 Doctor is great for definitions and good explanations of the various elements.
Some examples mentioned above are inspired and taken from the draft and HTML5 Doctor.
I have included only those changes which I felt brought more clarity and made the code semantic.
If you are on HN, please upvote. The link to the discussion.