Skip to main content

 

The HTML5 revolution is moving fast and more and more browsers are taking full advantage of the great new features. We finally at a time where us developers can safely make the switch so here are some of the basic but powerful new features that HTML5 has to offer and tips and techniques to help along the way.

1. New Doctype

There is no need to for that unnecessesary doctype declaration any more.

The old:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The new:
<!DOCTYPE html>
Its actually not even necesary in HTML5 but its a safe call to make sure some of the archaic browsers know how to render the page.

2. The Figure Element

Ever try to add an image and couple it with a caption? Consider this:
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

There really isnt any way to associate the caption with the image itself. HTML5 has rectified this with the introduction of the figure element and the figcaption element.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>

3. No More Types for Links and Scripts

There is no need to define the type attribue to your link and script tags:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

You can now just define them in this manner as the type is automatically implied:
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

4. No Need For Quotes

HTML5 is not XHTML so therefore you do not need to wrap your attributes in quotation marks any more. You still can if you wish but it is not mandatory.

Start the reactor.

It is still common practice for myself to wrap them but the choice is now yours.

5. Local Storage

Local Stoage isn’t officially HTML5 but its worth mentioning as it takes advantage of the contenteditable attribute. Now we can make advanced browsers remember what we type even after the browser is closed. Here is a quick Tutorial thanks to Tuts+

This feature is still not FULLY supported but its quite close with even IE8, Safari 4 and FF 3.5 supporting.

6. Header and Footer

Remember the old days of:
<div id="header">
...
</div>

<div id="footer">
...
</div>

Divs have no semantic structure even after an ID is applied; now with HTML5 we have the

and

elements
<header>
...
</header>

<footer>
...
</footer>

It’s fully appropriate to have multiple headers and footers in your projects.

7. Internet Explorer and HTML5

Our “favorite” of web browsers IE…haha…requires a bit of coaxing in order to understand the new elements….surprise surprise.

All elements, by default, have a display of inline.

In order to be sure that the new elements render as block elements w must style them appropriately:
header, footer, article, section, nav, menu, hgroup {
display: block;
}

That still isnt enough because IE has no idea what these elements are so we must declare them:
[c-sharp]document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");[/c-sharp] All that said the best way to do this is to use a popular script by Remy Sharp found in the google codebase

8. hgroup

We can properly group headings and subheadings showing a symantic relationship between the 2.

Recall Fan Page

Only for people who want the memory of a lifetime.

9. Audio Support

No we can elegantly add audio to our web pages without relying on 3rd party plugins. As per usual this feature is still a bit flakey across browsers but its definitely worth mentioning. Here is the new markup:

As you can see we have 2 filetypes and that is because Mozilla and Webkit dont fully get along yet and Mozilla likes to see .ogg while Webkit looks for the .mp3 so its best to have both versions.

10. Video Support

As with audio we can now embed video. The unfortunate part of this as well is the lack of unison in codecs. Safari and IE9 support H.264 while Friefox and Opera are sticking with the open source Theora and Vorbis formats.

A few key notes here are:

  • We arent required to set the type attribute but if we dont the browser takes the extra time to figure it out on its own so save the time and bandwidth and declare it
  • Because not all browsers support the HTML video yet we can offer an alternative under the source declarations

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.

11. Preload Videos

You can set the videos to preload by use of the preload attribute but heed caution and use wisely as in some cases it may not be fair to force the user to download the video if they are not genuinely interested. A good place for use is a dedicated video page in which you know the visitor has full intention of watching.

12. Display Controls

With this video attribute you can determine whether or not to display the video controls panel over the video for easy control.

13. Regular Expressions

Regex is VERY powerful and used almost daily here for powerful validation. Thanks to the nice new pattern attribute we can insert regular expressions directly in to our markup

If you know a thing or 2 about regex than you would be aware that his patter accepts only uppercase and lowercase patterns and has a minimum of 4 characters and a maximum of 10.

You can see how we are nicely combining all the new attributes!

14. Mark Element

This new element can be used within a string as a highlighter. A common use would be to highlight certain text when searched in a blog.

Search Results

They were interrupted, just after Quato said, "Open your Mind".

15. Do We Still Use

With all the new elements such as header, article, section, footer etc do we still need divs? Yes we sure do. There are many cases when we need to wrap text and controls to postition them properly and divs are perfect for this. However for many structural wrappings the new HTML5 elements promote much cleaner code.

16. The Data Attribute

Yes! We know have support for custom attributes in all HTML elements as long as we preface our attributes with “data” then we can create as many as we like. For any jQuery and Javascript developers out there you know how big this is as we can access the new attribute from jscript without a blink from the browser.

Bla Bla

We can retrieve data like so:

var theDiv = document.getElementById('myDiv');  
    var attr = theDiv.getAttribute('data-custom-attr');  
    alert(attr); // My Val

We can even use it in CSS like so:

  

      
      
         
       Sort of Lame CSS Text Changing  
      
      
      

    

Don't Touch Me

View the demo on JSBIN

17. Say Yes to Sliders

You can now create to nice slider controls you are seeing everywhere by declaring the type as range:

You can set the min, max, step, and value attributes to set full control over the data values.

Amortech Conclusion

This is just a few of the MANY new features HTML5 has to offer. We are one of the leading Calgary web development firms and are constantly being proactive in our research to give you the best that the web has to offer.

amortech

Author amortech

More posts by amortech

Leave a Reply