HTML5 and Tips and Tricks

Mukesh Bhatnagar

HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and Internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features. With the constant drop of Flash usage in web and Internet applications, HTML5 is opening new doors to web designers and developers. In this scenario, it is indeed imperative for every web developer to know about tricks and tricks of HTML5.

New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

1
2

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

If so, why? Switch to the new HTML5 doctype. You'll live longer -- as Douglas Quaid might say.

1

<!DOCTYPE html>

In fact, did you know that it truthfully isn't even really necessary for HTML5? However, it's used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

The Figure Element

Consider the following mark-up for an image:

1
2

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

There unfortunately isn't any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

1
2
3
4
5
6

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>

Make your Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>

Or, as we learned in the previous tip, we could write it as:

<ul contenteditable=true>

Audio Support

No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won't have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it's still a good practice to offer some form of backward compatibility.

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Download this file.</a>
</audio>

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.

When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

When to Use a <div>

Some of us initially questioned when we should use plain-ole divs. Now that we have access to headers, articles, sections, and footers, is there ever a time to use a...div? Absolutely.
Divs should be utilized when there's no better element for the job.

For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you're instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They're more semantic.

Detect Support for Attributes

What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We'll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern attribute, we could add a bit of JavaScript to our page:

alert( 'pattern' in document.createElement('input') ) // boolean;

In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we're creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.

<script>

if (!'pattern' in document.createElement('input') ) {
        // do client/server side validation
}
</script>

Keep in mind that this relies on JavaScript!

What is Not HTML5

People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey -- even Apple has inadvertently promoted this idea. For non-developers, who cares; it's an easy way to refer to modern web standards. However, for us, though it may just be semantics, it's important to understand exactly what is not HTML5.

  1. SVG: Not HTML5. It's at least five years old.
  2. CSS3: Not HTML5. It's...CSS.
  3. Geolocation: Not HTML5.
  4. Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
  5. Web Sockets: Not HTML5. Again, was exported to its own specification.

Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.

The Output Element

As you probably have guessed, the output element is used to display some sort of calculation. For example, if you'd like to display the coordinates of a mouse position, or the sum of a series of numbers, this data should be inserted into the output element.

As a simple example, let's insert the sum of two numbers into an empty output with JavaScript, when a submit button is pressed.


<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>

    <button type="submit"> Calculate </button>
</form>


<script>
(function() {
var f = document.forms[0];

         if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}

    else { alert('Your browser is not ready yet.'); }
})();
</script>


Try it out for yourself.  (http://jsbin.com/efedu3)

Please note that support for the output element is still a bit wonky. At the time of this writing, I was only able to get Opera to play nice. This is reflected in the code above. If the browser does not recognize the element, the browser will simply alert a notice informing you of as much. Otherwise, it finds the output with a name of "sum," and sets its value to 15, accordingly, after the form has been submitted.

The Data Attribute

We now officially have support for custom attributes within all HTML elements. While, before, we could still get away with things like:

1

<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

...the validators would kick up a fuss! But now, as long as we preface our custom attribute with "data," we can officially use this method. If you've ever found yourself attaching important data to something like a class attribute, probably for JavaScript usage, this will come as a big help!

HTML Snippet

1

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

Retrieve Value of the Custom Attribute

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

It can also even be used in your CSS, like for this silly and lame CSS text changing example.


<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;

}
</style>
</head>
<body>

<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

</body>
</html>


You can view a demo of the effect above on JSBIN. (http://jsbin.com/okepo4)

Video Support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Chrome can correctly display video that is encoded in both the "ogg" and "mp4" formats.
There are a few things worth noting here.

  1. We aren't technically required to set the type attribute; however, if we don't, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
  2. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It's up to you.
  3. The controls and preload attributes will be discussed in the next two tips.

Preload Videos

The preload attribute does exactly what you'd guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it's a bit less redundant.
<video preload>

The Semantic Header and Footer

Gone are the days of:
<div id="header">
    ...
</div>

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

Divs, by nature, have no semantic structure -- even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

<header>
    ...
</header>

<footer>
    ...
</footer>


It's fully appropriate to have multiple headers and footers in your projects.
Try not to confuse these elements with the "header" and "footer" of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

‘Type’ attribute for script and link are no more required in HTML5
Type attribute is optional and one does not need to provide it for script and link tag in HTML5.
Earlier, one used to give:

<link rel="stylesheet" href="somepath/somestylesheet.css" type="text/css" />
<script type="text/javascript" src="somepath/somescript.js" />

Now, in HTML5, same references can be provided as:

<link rel="stylesheet" href="somepath/somestylesheet.css" />
<script src="somepath/somescript.js" />

This makes things simpler as the file extension and the tag were enough to interpret the type.

Limiting the number of div tags on the page:

Avoid using div tag and creating multiple layers that are caused by div tags. Instead you can start using different tags that are available in HTML5 such as Header, Footer, Section, Nav, Article. This can place everything in order and reduce the unnecessary use of div tags.








}