General word of caution: not all of these HTML5 simplifications are compatible with older browsers. Test it for yourself before implementing!
1. The doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3. The link tag’s
<link href="style.css" type="text/css" rel="stylesheet" />
The new (omit the
<link href="style.css" rel="stylesheet" />
This one may be a bit controversial, but the HTML5 spec actually tells browser vendors not to treat the
type attribute as the final word, which makes it seem pretty redundant:
User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use the type attribute to determine its actual type. Only the actual type (as defined in the next paragraph) is used to determine whether to apply the resource, not the aforementioned assumed type. -W3C HTML5 spec
The spec then goes on to state that the browser must effectively determine the type by examining the
Content-Type sent back in the header from the server when requesting the CSS file. If this extra work is already being performed and there’s no noticeable downside of omitting the
type attribute, then it seems pretty redundant. Save the extra bytes by omitting it!
4. The script tag’s
According the the W3C, if the
type attribute isn’t present, it should default to
5. The script tag’s
Moving scripts to the bottom of a document is one of the top performance tips and one of the easiest ways to speed up a website. This is because script downloading (in older browsers) and parsing/executing is done synchronously, that is, in a way which blocks everything else which comes after them.
It’s not too hard to move the scripts to the bottom, but wouldn’t it be handy if there was an attribute we could add on the script to make it behave, no matter where it’s located? Now there is! Check out the async attribute:
<script async src="script.js"></script>
This tells the browser to download and execute the script asynchronously, without blocking the rendering of elements below it. There’s one catch: scripts with this attribute aren’t guaranteed to run in the order they appear in the document, which is their default behavior when the
async attribute isn’t present. So be careful or this will definitely lead to code dependency issues.
defer attribute is an older attribute with a similar goal:
<script defer src="script.js"></script>
Believe it or not, this attribute was first implemented in IE4! It tells the browser the same thing: to download and execute the script in such a way that it doesn’t block the elements below it from rendering. The difference from
async is that
defer executes the scripts in the order they appear in the document.
6. placeholder and autofocus attributes
placeholder attribute can be added to
<input type="text" placeholder="Search"> <textarea type="text" placeholder="Search"></textarea>
autofocus tag can be added to
<input type="text" autofocus></input>
sessionStorage. The size limit may depend on the browser, but it seems to have been set at a minimum of 5mb per domain. It may also be the case that the size limit for sessionStorage may be larger (which seems to be the case for IE8 and possibly IE9).
It should be noted, if it wasn’t immediately obvious from their names, that
localStorage data persists across sessions (just like cookies) and
sessionStorage data persists only for the length of the browser session.
It should also be noted that data can only be stored in this way in key-value pairs, where the values can only be strings. This presents a problem when trying to store JSON objects, and requires you to go through the extra step of using JSON.stringify(myObj) before storing your data.
Here’s an example of how easy it is to use
// localStorage - data can be retrieved by the site after user closes the browser! localStorage.userName = "Biff Tannen"; // sessionStorage - data only persists for the current session sessionStorage.userMood = "Angry";
Traditionally, you could only control caching on your website through primarily headers (Cache-Control and Expires headers). Now through the use of the cache manifest, developers have more control over which components they want to be cached. Theoretically, controlling this caching is now as easy as changing one file (instead of having to change server configurations and such).
Setting up the cache manifest is relatively easy:
1. Add this line to your
.htaccess file or Apache configuration:
AddType text/cache-manifest .manifest
2. Create a file. For this example we’ll call it
cache.manifest. This file contains a list of files that should be cached:
CACHE MANIFEST # version 1 /style.css /script.js /image.jpg
3. Add the manifest attribute on the
html element, pointing to your
Now these files specified will be cached. They will only be redownloaded if our
cache.manifest file is changed in any way. That’s why there’s a comment with the version number. Simply update the version to force the browser to redownload the files:
CACHE MANIFEST # version 2 /style.css /script.js /image.jpg
9. Form input validation
Now you can use the
required attribute to make sure a particular input is filled out. The browser won’t send the form without the completed input:
<input type="text" name="email" required>
10. Video (and audio)
The old (common example using a Flash container in an object):
<object width="500" height="350"> <param name="movie" value="flashcontainer.swf"> <embed src="flashcontainer.swf" width="500" height="350"> </embed> </object>
<video id="movie" width="500" height="350" controls> <source src="movie.mp4" /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
Ok, so the simplicity of this one is the most debatable. The thing that’s tricky about this is that you have to encode the movie into several different formats, because of the differing implementations on browsers out there.
Also, here’s an example with a Flash fallback (read more here):
<video id="movie" width="500" height="350" controls> <source src="movie.mp4" /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> <object width="500" height="350"> <param name="movie" value="flashcontainer.swf"> <embed src="flashcontainer.swf" width="500" height="350"> </embed> </object> </video>