Posted on Updated on

Image result for html5FEATURES OF HTML5

There are several articles that list some important upcoming features of HTML5, which can work on certain browsers. This instructional exercise for the web engineer will demonstrate to you how you can utilize certain elements of HTML 5 NOW!

HTML 5 highlights which are valuable right now include:

  • Web Workers: Certain web applications utilize substantial scripts to perform capacities. Web Workers utilize isolate foundation strings for handling and it doesn’t impact the execution of a website page.
  • Video: You can insert video without outsider restrictive modules or codec. Video gets to be as simple as implanting a picture.
  • Canvas: This element permits a web engineer to render representation on the fly. Similarly as with video, there is no requirement for a module.
  • Application reserves: Web pages will begin putting away more data locally on the guest’s PC. It works like treats, however where treats are little, the new component considers much bigger documents. Google Gears is an incredible case of this in real life.
  • Geolocation: Best known for use on cell phones, geolocation is accompanying HTML5.

In the event that you need to know whether any of the above components deals with a given program, you can test for it through Modernizer. This little JavaScript library is useful for identifying CSS3 also. From the Modernizer site, “Modernizr is a little and straightforward JavaScript library that helps you exploit developing web advancements (CSS3, HTML 5) while as yet keeping up a fine level of control over more seasoned programs that may not yet bolster these new innovations.”

The Modernizer language structure is natural:

.multiplebgs div p {

  /* properties for browsers that

support multiple backgrounds */


.no-multiplebgs div p {

  /* optional fallback properties

for browsers that don’t */


Simply insert the modernizr-1.1.js JavaScript file in your page and add a class of “no-js” in the <html> element. You can then use the Modernizr JavaScript object and the various CSS classes it attaches to the html element. Here’s an example of how to do that:

<!DOCTYPE html>



  <meta charset=”utf-8″>

  <title>Learning HTML5</title>



  Your web page here.



For those of you with a keen eye, you might have noticed the simplified <!DOCTYPE html>

If you’re still using,

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

as your doctype, you can simplify and shorten it right now. This works in all browsers. You can also shorten,

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />


<meta charset=”utf-8″>

In addition, you can shorten the reference to your CSS from:

<style type=”text/css”>

To <style>Of course, that only works for embedded or inline style sheets. It does not work for external style sheets.

If you use JavaScript in your web page, you can short the syntax there as well. Here’s the original code from part of a Google search box:


You can shorten this by deleting “text/javascript” I have tested all of the above in my personal site and everything still works in Internet Explorer, Firefox and Chrome. I’ve said it before and I’ll say it again, for me, the best part of HTML5 is the cleaner, simpler and shorter code. In the long run, web pages will run faster and smoother than ever before with less chances of coding mistakes.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s