Sarah says, “I love this code!”

Jess says, “But it is awful..Are you sure?”

[/html]
It can also be used code snippets or reference in an article.

Screenshot of example.

4. Details & Summary

[html]

[/html]
The closest example that I could think of is the Show/Hide spoiler tab in forums. This is how it’s usually implemented.

[html]

[/html]
It can be achieved in HTML5 using the details and summary tags. The <summary> is expected to be the controller for showing the contents within the <details> element but it is not implemented yet so far.

Demo. Click on the yellow tab to see it in action.

5. Time

[html]
We are open from 8 am til 5 pm
[/html]
The old way of doing things

[html]
We are open from 8 am til late
[/html]
HTML5’s new time markup. Note that date/time must be included within the element OR in the datetime attribute.

We are open from 8 am til late

Demo

6. Mark

[html]
I can study better when I can highlight my notes.
I don’t mind highlighting the whole sentence.
[/html]
Highlighting words the old way involves calling a span, adding a style and defining the colour. The call for inline styling or classes doesn’t produce very pleasing source codes.

[html]
I can study better when I can highlight my notes.
I don’t mind highlighting the whole sentence.
[/html]
In HTML5, it is much easier and cleaner to do so.

I can study better when I can highlight my notes. 
I don't mind highlighting the whole sentence.

Demo.

7. Wbr

[html]

Iamaverylongwordlikeanreallyreallylongurlorsomethingitalwaysbreakmylayout

[/html]
Certain words like links can be really long and they destroy layouts. The word-wrap property in CSS3 can fix this.

[html]

Iamaverylongwordlikeanreallyreallylongurlorsomethingitalwaysbreakmylayout

[/html]
In HTML5, you can insert <wbr> between the letters to tell the browser that it is ok to break the word at that particular point. The example above will result in the following if the container is not wide enough for the word:

Iamaverylongwordlikeanreally
reallylongurlorsomethingit
alwaysbreakmylayou

8. Meter

[html]

Rating

3 out of 5 stars

[/html]
The old way of doing things.

[html]
3 stars
3 out of 5 stars
60%

[/html]
In HTML5, the <meter> tag is used for measurements such as ratings or counts. The value must be defined either in the attributes or within the elements. You can also define which value is regarded as high/low. For example, 1st prize til 5th prize would mean that the value “1” is the optimal high value.

9. Progress

[html]
The animation is loading :

76%


[/html]
Making a preloader involves making more divs, spans and putting in a script to run the thing.

[html]
The animation is loading :
[/html]
With HTML5, the syntax is cleaner when it comes to making a progress bar.

10. Command

[html]

Click me

Milk
Butter

Milk
Butter

[/html]
Sometimes when you have a form elsewhere in your website, like for example : your sidebar, you might want to control it from another section, like for example : one of the menu links. Once the code is built up and the website is launched, other people who sees the source code might not know that certain buttons are for controlling forms elsewhere in the page.

[html]

[/html]
The <command> solves the problem. Note that commands must be nested in <menu> in order for them to be visible. It gives alot more meaning to sourcecodes, for example if I have a article editor menu that have links to create headings, links, images, tags and paragraphs; using <command> is a more meaningful syntax than using <a>.

Ruby, rt & rp

When I first saw this, I thought it has something to do with the programming language, Ruby and I was ecstatic to see what they offer in HTML5. Turns out I was wrong. Ruby is actually a short annotation for some base text. It helps phonetic languages like Chinese, Japanese & Korean to have pronunciation guidance in the website.

Surprisingly, it was supported in IE 5+ before and also incorporated in XHTML 1.1 but no browser supported it yet since then.
[html]

The Grass mud horse — 草泥馬(Cǎo Ní Mǎ) — is … characterised as “lively, intelligent and tenacious”. However, their existence is said to be threatened by the “river crabs” — 河蟹 (héxiè) — which are invading their habitat.

[/html]
The way of implementing Ruby is like above. HTML5Doctor have more information on this topic.

The Grass mud horse — 草泥馬(Cǎo Ní Mǎ) — is … characterised as “lively, 
intelligent and tenacious”. However, their existence is said to be
threatened by the “river crabs” — 河蟹 (héxiè)  — which are invading
their habitat.

Demo

An article wouldn’t be complete without a disclaimer : I am listing the following to help myself learn and remember HTML5, there may be mistakes which you are welcomed to correct me. 🙂