HTML5 includes a whole new load of tag elements that are more descriptive compared to HTML 4.01. I have been itching to try the new tag elements and see what it offers in our browsers today.
This is the first part of a three parts article, covering only the Structure Tag Elements.
So here are some examples of how HTML5 attempts to solve HTML 4.01 problems.
Structure Tag Elements
1. Header, Nav, Article, Section Aside, Footer
[html]
First chapter of the day!
Contents of chapter
Chapter 2
Contents of chapter
[/html]
Old way of doing things
[html]
First chapter of the day!
Contents of chapter
Chapter 2
Contents of chapter
[/html]
Cleaner and more descriptive approach in HTML5
2. Hgroup
[html]
Category
Clothes
Pants
[/html]
Old way of doing things
[html]
Category
Clothes
Pants
[/html]
Using the <hgroup>
is easier for styling when it comes to a group of headings. Interactive menus can also be made this way. For example, click on Category reveals Clothes.. etc
3. Figure, Figcaption
[html]

Figure 1 above shows a picture of a pretty girl
[/html]
Old way of doing things
[html]

[/html]
Figure and figcaption can be used for diagrams & illustrations.
[html]
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.
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]
Spoiler here : Click to show spoiler
Leaked photos of The Dark Knight
[/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.
Spoiler here : Click to show spoiler
Leaked photos of The Dark Knight
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 til
[/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 til
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]
Iamaverylongwordlikeanreally
[/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
[/html]
The old way of doing things.
[html]
[/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 — 草泥馬 — is … characterised as “lively, intelligent and tenacious”. However, their existence is said to be threatened by the “river crabs” — 河蟹 — 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 — 草泥馬 — is … characterised as “lively,
intelligent and tenacious”. However, their existence is said to be
threatened by the “river crabs” — 河蟹 — 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. 🙂
Comments (3)
will probably take another 2-3 years to have all major browsers fully support html 5 tho
Oh well CSS HTML have always been partially supported in various ways by various browsers. To expect them to fully support html5 might be a far fetched dream.
nice practical usage of html5. I was unable to check demo of datetime, should be given in more detail.