Taking A Peek at HTML 5

The Editor’s draft of the HTML5 difference from HTML4 is up, and there are some interesting things. So lets have a look at what I might be bitten by, or find useful.

Warning: I am not familiar with how the workings of HTML5, so the examples shown below shown may not be accurate, but are intended to show the possibility with the new specification.

Stricter Content Models

This one is interesting.

New Elements

Wow, talk about a large number of new elements (brief description of each tag) for the HTML specification.

Some notable tags:

• header
• footer
• nav
• section
• article
• time
• progress
• output
• meter

So now we can define headers, footers and navigation without relying on a id attribute. Section would also be good as it provides a semantic approach into “sectioning” elements in a page.

So for a blog, you can have “sections” for different posts.

<article>
 <header>
  <h1>Post Title</h1>
  <p><time datetime="2007-06-17">17th June 2007</time></p>
 </header>
 <p>Post Content</p>
 <footer>
  Posted in
  <ul>
    <li> Category 1 </li>
    <li> Category 2 </li>
    <li> Category 3 </li>
  </ul>
 </footer>
<article>

The progress tag is great for Ajax applications where you would like to show the progress of your query.

The meter tag is excellent for data, and would fit well into tabular data as well!

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

Additional types for input

Woot! It seems like the input element is getting additional types.

Here they are:

• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url

Would make user side validation alot easier.

New Attributes

The new required attribute applies to input (except when the type attribute is hidden, image or some button type such as submit) and textarea. It indicates that the user has to fill in a value in order to submit the form.

This would make things a hell lot easier for people specifying require attributes. Additionally it would check on the user side as well. (I hope so at least).

So using CSS and the after pseudo attribute you can add the (common) asterisk “*” indicating the field is required.
CSS:

input[required]:after { content: '*' }

HTML:

<input type="text" required />

This could be done before using a class, but its nice that its an attribute now.

You can now disable an entire fieldset by using the disabled attribute on it. This was not possible before.

Makes it easier to disable elements! Yay!

Manipulating HTMLElements made even easier

The function getElementsByClassName() included by default — Major wootage!

But even better is that a new accessor classList is defined for HTMLElements, making our job in manipulating classes very easy!

classList is a convenient accessor for className and the object it returns exposes methods, such as has(), add(), remove() and toggle(). The a, area and link elements have a similar attribute called relList that exposes the same for the rel attribute.

No need to rely on Javascript libraries to manipulate the CSS easily!

var phpcode = document.getElementsByClassName('phpcode');

for(var i = 0; i < phpcode.length; i++) {
  phpcode[i].classList.remove('phpcode');
  phpcode[i].classList.add('rubycode');
}

Browser Support?

Now the big question? Which browsers support HTML 5?

At least My Missing Quicktags plugin is ready to enter any of these tags into WordPress if you wanted to.