11 Best HTML5 Features You Should Check Now

HTML5 is the latest version of the markup languages that is launched to solve the compatibility issues which affect the current standard of HTML4. This latest update is basically backward compatible and easy to adopt. Moreover, it is also introduced to support latest features that many sites require today.

For those who are not yet familiar with HTML5, it is a markup language which is used for organizing and displaying content on the World Wide Web. It was first launched on 28 October 2014 by the W3C. HTML5, as the name suggests, is the fifth version of the HTML standards since the introduction of World Wide Web.

As a matter of fact, new technology brings along new features and techniques and HTML5 is no different. Therefore, we have pulled together the best features of this new markup language to help you make the most of it.

HTML5 Features

1. Multimedia support in HTML5

HTML5 has come with a bang. It provides support for multimedia both audio and video. Whether you want to integrate video tutorials or an about us introductory video, HTML5 has made everything possible in regards to multimedia.

<video src=”Video-file-path” controls=”controls” width=”300″ height=”150″>
Alternative text to be displayed when the browser does not support the video
</video>

How to integrate a video or audio file?

<audio src=”Audio-file-path” controls=”controls”>
Alternative text to be displayed when the browser does not support the audio
</audio>

2. Required Attribute

[su_row][su_column size=”1/2″]HTML Forms come with a new required attribute, which automatically specifies whether the specific input field is required or not. This eliminates the need for writing the code for validating the form. There are basically two ways of declaring this attribute which is explained as follows:

<input name=”First” required=”” type=”text” />
or
<input name=”First” required=”required” type=”text” />
You can use any one of them according to your preference.[/su_column] [su_column size=”1/2″]

[/su_column][/su_row]

3. The Semantic Header and Footer

With the introduction of HTML5, you no longer have to write code like this:
<div id=”header”>
</div>
<div id=”footer”>
</div>

HTML5 comes with an access to <header> and <footer> tags to give the sections more semantic structure.
<header>
</header>
<footer>
</footer>

4. Local Storage

HTML5 now comes with local storage to allow you to save or remember everything you type even after you refresh or close the browser. Although, this feature isn’t supported by all the browsers, most notably you can expect it to work in Firefox 3.5, Safari 4, and Internet Explorer 8.

5. Placeholders

There was a time when you had to use JavaScript to build placeholders for textboxes. The value of the attribute can be set anything initially, but once the user deletes the value and navigates away, it will be left blank.

Here is how you can use placeholders in HTML5.
<input name=”email” type=”email” placeholder=”joe@helpthepoor.com” />

Here too, only limited browsers support this feature. However, if even best browsers don’t support placeholders, there won’t be any harm done.

6. Canvas in HTML5

Canvas is an extremely durable rectangular area which allows you to draw a circle, box, a line as well as performing other graphics. The good news is that HTML5 provides a support for these canvas areas.

To build a canvas, use this following code:
<canvas id=”myCanvas” width=”100″ height=”50″></canvas>

Fallback content, when the canvas is not supported by the browser.

7. Editable Content

Editable content is a great feature that enables your visitors to edit the content of the HTML control. Editable content enables the web developers to create pages that consist of sections such as HTML editor, notes etc. You need to add an attribute called contentEditable=”true” to the HTML control.

You can combine this outstanding feature with another feature called offline storage to make the most of it. Offline storage, as the name suggests, allows you to store a huge amount of data in your user’s browsers locally.

<p contenteditable=”true”>Click here to edit this content!</p>

8. New Doctype

Get rid of that old, impossible to use XHTML doctype. HTML5 comes with a new Doctype that will help you stay up-to-date forever. Instead of using something like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

simply use this:
<!DOCTYPE html>

9. Email Inputs

If you apply a ‘type’ of “email” to form input, you can instruct the browser to only allow strings that confirm a valid email address structure. When a browser doesn’t specify a valid email address, HTML5 can help you to validate the address.

Check out the following HTML5 code,

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>untitled</title>

</head>

<body>

<form action=”” method=”get”>

<label for=”email”>Email:</label>

<input id=”email” name=”email” type=”email” />

<button type=”submit”> Submit Form </button>

</form>

</body>

</html>

So, depending on browser’s validation is not an option anymore. A server side solution is possible because of HTML5. Obviously, if you want you can use it, but depending on browser validation is really not a very good idea. So, this feature of HTML5 caters you the reliability you need to validate an email address.

10. The Figure Element

If you want to enclose a caption with an image, it wasn’t easy until HTML5 showed up. Consider this code,

This code will insert an image with a text below as Image of Mars. However, this will not visually look good on a web page. With HTML5, you can easily enclose a caption with an image with the help of the

element. When it is combined with another element

Check these codes out,

<figure>

<img src=”path/to/image” alt=”About image” />

<figcaption>

<p>This is an image of something interesting. </p>

</figcaption>

</figure>

This set of codes will let you put image wrapped with the image caption semantically.

11. Video Support

The best part of HTML5 is that you can easily add videos. Even YouTube has announced a new set of HTML5 code that will support videos. You can use these codes and add videos easily,

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

You don’t need to set the <type> attribute because the browser can figure that out by themselves. Save some bandwidth and declare it yourself.

Wrapping up:

HTML5 is the latest web technology that is taking the web industry by storm. This is the list of the most popular and useful features that can prove to be extremely beneficial for your online business. We hope you find them helpful. In case you find any new features worth considering, don’t forget to share it with us.

Auhtor Bio:

Emma Waston is a WordPress developer by profession and a writer by hobby. She works for Wordsuccor Ltd., which provides services to Convert HTML Site to WordPress theme. Emma has been associated with WordSuccor Ltd. for last 5 years and handling clients across the globe. When she is not working, she likes to spend her time outdoors exploring the world, people and technology.