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

<div id="header">Header content here</div>
<div id="menu">My Menu
	<a href="home.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
</div>
<div id="article">Articles/Blog here
  <div class="chapters">
    <h3>First chapter of the day!</h3>
    <p>Contents of chapter</p>
  </div>
  <div class="chapters">
    <h3>Chapter 2</h3>
    <p>Contents of chapter</p>
  </div>
</div>
<div id="sidebar">Sidebar here</div>
<div id="footer">footer here</div>

Old way of doing things

<header>Header content here</header>
<nav>My Menu
	<menu>
		<a href="home.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
	</menu>
</nav>
<article>Articles/Blog here
 <section>
    <h3>First chapter of the day!</h3>
    <p>Contents of chapter</p>
  </section>
  <section>
    <h3>Chapter 2</h3>
    <p>Contents of chapter</p>
  </section>
</article>
<aside>Sidebar here</aside>
<footer>footer here</footer>

Cleaner and more descriptive approach in HTML5


Screenshot of example.

2. Hgroup

<h1>Category</h1>
  <h2>Clothes</h2>
    <h3>Pants</h3> 

Old way of doing things

<hgroup>
  <h1>Category</h1>
   <h2>Clothes</h2>
     <h3>Pants</h3>
</hgroup> 

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


Screenshot of Example

3. Figure, Figcaption

<div class="diagramContainer">
  <img src="diagram.jpg" alt="Pretty Girl"/>
  <span class="caption">Figure 1 above shows a picture of a pretty girl</span>
</div> 

Old way of doing things

<figure>
  <img src="diagram.jpg" alt="Pretty Girl"/><!--you can also insert more than one images-->
  <figcaption>Figure 1 above shows a picture of a pretty girl</figcaption>
</figure> 

Figure and figcaption can be used for diagrams & illustrations.

<figure>
  <blockquote>Sarah says, "I love this code!"</blockquote>
  <blockquote>Jess says, "But it is awful..Are you sure?"</blockquote>
  <figcaption>A dialogue between Sarah and Jessica.</figcaption
</figure> 

It can also be used code snippets or reference in an article.


Screenshot of example.

4. Details & Summary

<div class="details show hide">
	<h2>Spoiler here : Click to show spoiler</h2>
	<p>Leaked photos of The Dark Knight</p>
</div>
<!--insert script to enable show hide for the above element-->

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

<details>
	<summary>Spoiler here : Click to show spoiler</summary>
	<p>Leaked photos of The Dark Knight</p>
</details>
<!--insert script to enable show hide for the summary element-->

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

We are open from <span class="time">8 am</span> til <span class="time">5 pm</span>

The old way of doing things

We are open from <time>8 am</time> til <time datetime="5.00 pm">late</time>

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

I can study better when I can <span style="color:yellow">highlight</span> my notes. 
I don't mind <span class="highlight">highlighting the whole sentence.</span>

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.

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

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

<p style="word-wrap:break-word">Iamaverylongwordlikeanreallyreallylongurlorsomethingitalwaysbreakmylayout</p>

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

<p>Iamaverylongwordlikeanreally<wbr>reallylongurlorsomethingit<wbr>alwaysbreakmylayout</p>

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

<h2>Rating</h2>
<p class="rating">3 out of 5 stars</p>

The old way of doing things.

<meter min="0" max="5">3 stars</meter>
<meter>3 out of 5 stars</meter>
<meter>60%</meter>
<meter min="0" max="5" value="3"/>

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

The animation is loading :
<span class="preloader">
	76% 
</span>
<!--insert script for preloader-->

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

The animation is loading :
<progress max="100" value="65"/>
<!--script for preloader-->

With HTML5, the syntax is cleaner when it comes to making a progress bar.

10. Command

<!--link buttons-->
<a href="#" onclick="alert('This is a link button')" class="button">Click me</a>

<!--radiogroup buttons-->
<input type="radio" name="group1" value="Milk">Milk<br>
<input type="radio" name="group1" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

<!--checkbox buttons-->
<input type="checkbox" name="option1" value="Milk">Milk<br>
<input type="checkbox" name="option2" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

<!--insert script to use any of the buttons above to control elements in other forms elsewhere-->

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.

<menu>
	<!--link buttons-->
	<command onclick="alert('This is a link button')" class="button">Click me

	<!--radiogroup buttons-->
	<command type="radio" radiogroup="group1" value="Milk">Milk<br>
		<command type="radio" radiogroup="group1" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

	<!--checkbox buttons-->
	<command type="checkbox" name="option1" value="Milk">Milk<br>
		<command type="checkbox" name="option2" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter
</menu>

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.

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

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. 🙂