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.
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
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
2. Required Attribute
<input name=”First” required=”” type=”text” />
<input name=”First” required=”required” type=”text” />
You can use any one of them according to your preference.
- HTML5 Interview Questions and Answers
- Handy Guide to Create jQuery Mobile App
- Native Vs Hybrid Vs HTML5
- HTML5 Mobile App Development
- 6 Mobile Application Development Trends
- Mastering HTML5 Canvas
- A Practical Guide to ASP.NET Web API
- FREE HTML5 Online Test
3. The Semantic Header and Footer
With the introduction of HTML5, you no longer have to write code like this:
HTML5 comes with an access to <header> and <footer> tags to give the sections more semantic structure.
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.
Here is how you can use placeholders in HTML5.
<input name=”email” type=”email” placeholder=”email@example.com” />
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:
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,
<form action=”” method=”get”>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
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
Check these codes out,
<img src=”path/to/image” alt=”About image” />
<p>This is an image of something interesting. </p>
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>
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.
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.
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.
- WCF Service Vs ASP.NET Web API
- Post JSON data to WCF RESTful Service
- Practical Guide to ASP.NET Web API
- WCF Hosting (Console | Windows Service | IIS | WAS)
- ASP.NET MVC3 Vs MVC4 Vs MVC5 Vs MVC6
- Understanding Model-First Approach in ASP.NET MVC with Entity Framework
- 3 Techniques for Instance Management in WCF