≡ Menu

7 Must-Know Things About HTML5

HTML5 is a revolution in itself – a giant leap from the earlier versions of the markup language. It has empowered developers to design and build websites which are intuitive, visually attractive and informative. HTML5 isn’t merely a revision or incremental change in the markup language but a complete overhaul of the Internet content delivery system.  There are many revolutionary advances that this language has made and here we shall take a look at some of the features and functionalities of HTML5 which you should know as a developer.

Doctype Becomes Simple    

In the previous version of the markup a lot of different doctypes were defined which often made it difficult to choose the right one. HTML5, using a single doctype, makes coding easy. For example, in the previous versions of the markup, the HTML would start with something like –

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

This has been replaced by:

<!doctype html>

Types for Scripts and Links Are Passé

Are you still used to adding the type attribute to your link and script tags? Well that is no longer necessary as HTML5 has simplified the coding requirements. Today, it is possible to replace the type attribute altogether as both these tags mean stylesheet and scripts. In the example below we have used the pre-HTML5 and the HTML5 codes.

view plaincopy to clipboardprint?

<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />

<script type=”text/javascript” src=”path/to/script.js”></script>

view plaincopy to clipboardprint?

<link rel=”stylesheet” href=”path/to/stylesheet.css” />

<script src=”path/to/script.js”></script>

Local Storage 

Image a website which is smart enough to remember what you browsed through and what are the sections that you are most likely to browse through even after the browser has been closed? Does it sound a little bit like ‘Star Wars’? No! HTML5 has made that a reality with ‘local storage’ which can make browsers “remember” what a user types, even after the browser is closed or refreshed. This feature works well with all the modern versions of the browsers and even with Internet Explorer 8!

Creating Placeholders Has Become Easy

You no longer have to toil with JavaScript to create placeholders for textboxes. However, you can still set the value attribute to see how it fits. The problem was that as soon as the user deleted that text and clicked away, the input was left blank again. HTML5 placeholder attribute does away with this problem:

<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

Videos Are Now a Part of HTML5   

Gone are the days when you had to rely upon third-party applications such as Flash to integrate video in your website. The video tag has been one of the revolutionary changes in HTML5 as it allows developers to integrate video <video> in their websites using pure markup code. Now you know why HTML5 is being said to be the Flash killer. You can assign all the control attributes to your video in the website to make it user-friendly for the end user. Below is an example of the HTML5 code to integrate video in the website.

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

Make Websites Interactive With Audio

As with the video you can also render audio. HTML5 offers the <audio> tag. However, it is important that you offer some form of backward compatibility as many browsers don’t include full support for this feature. Below is the example of the coding used to include audio file in your markup.

view plaincopy to clipboardprint?

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg” />

<source src=”file.mp3″ />

<a href=”file.mp3″>Download this file.</a>

</audio>

Detect Browser Support

Easily detecting whether the browser recognizes the attributes is surely one of the best features of HTML5. There are two distinctive ways of doing it and here we shall take a look at both of them. In the first method we shall utilize the Modernizr library.

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

In the second method we shall dissect different elements of the website and determine what the browsers are capable of.

<script>

if (!’pattern’ in document.createElement(‘input’) ) {

// do client/server side validation

}

</script>

Curious about knowing more or have any HTML5-related doubts? Shout out below; we’ll have a great discussion.

This post is contributed by Pixelcrayons.com

{ 0 comments… add one }

Leave a Comment