Rocking HTML Series Part II: HTML 5 Features That You Must Know and Practise Daily

Futuristic Features of HTML 5

So, as we have previously established that technology is a constantly changing process and to be part of the change, you have to adopt it fast. Like, you have to quickly forget the old days of HTML and need to adopt the features of HTML 5 right way. Otherwise, you will not be able to participate in the changing trends of the HTML technology.

That’s why in the second installment of Rocking HTML Series, we will focus on the new lucrative features of the HTML 5. And, will try to understand that how they are different from the features of their predecessors. So, buckle up your seatbelts and let’s dive into the ocean of HTML 5 features.

#1. Renewed Doctype

Are you still stuck with the pesky and impossible XHTML doctype? Then, immediately ditch this:

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

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

So, adopt new and easy html 5 doctype <!DOCTYPE html>. In reality, you don’t even have to use doctype in HTML 5, as this only used precautionary in the old browser who wants doctype. Otherwise, New browsers can render text in a standard format in the absence of doctype. So, freely use HTML 5 and free yourself from the doctype.

#2. Figure Elements

Are you considering following markup for your image?

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

<p>Image of Mars. </p>

Then, don’t consider it as earlier we might not have a semantic way to add a caption to the wrapped paragraph tag with the image itself. But, with HTML 5 figure element we can achieve that task pretty easily. Use <figurecaption> element with the figure element and your caption will be attached to the image easily.

#3. No Need To Add <Type> for Scripts and Links

You probably be still using type tag to define scripts and links, something like this:

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

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

But, why? When both the above-mentioned tags define the stylesheet and scripts. So, no need to add tag type anymore and instead of it you can use the following tag:

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

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

#4. Should I Quote or Not

Well, if you are still struggling to make the decision that whether you should enclose your code quotation marks or not. Then, fellas, remember that this is not a XHTML, we are talking about the HTML 5, so if you don’t want to end your code with quote, then so be it. Just make your mind about this fact and stick to it, as both the code with or without quote will be considered just fine, like:

<p class=myClass id=someId> Start the reactor.

#5. Semantic <Header> and <Footer>

If you are still using following tags?

<div id=”header”>

   …

</div>

<div id=”footer”>

   …

</div>

Then, don’t use as there isn’t any grantee of the semantic header and footer tag after the utilization of <div>. So, instead of this tag, go for the following elements:

<header>

   …

</header>

<footer>

   …

</footer>

And, people don’t try to confuse it with the header and footer of your website. As it is the container of the tag only like we use meta description in the footer of a blog.

#6. Relationship Between Internet Explorer and HTML 5

Well, people, unfortunately, internet explorer don’t get the HTML 5 tags easily. To understand the new features of HTML 5 in internet explorer following styling is required:

header, footer, article, section, nav, menu {

  display: block;

}

#7. Required Attributes

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Attributes can be implemented in two different ways:

input type=”text” name=”someInput” required>

Or, with a more structured approach.

<input type=”text” name=”someInput” required=”required”>

#8. Autofocus Attributes

In HTML 5, there isn’t any room for the JavaScript solutions. If you want to select or focus any part, then you can use autofocus attribute, like:

<input type=”text” name=”someInput” placeholder=”Douglas Quaid”

#9. Audio Support

This is the revolutionary feature of the HTML 5 that we don’t have to use third party plugins for audio. With the <audio> element now html can render audio, but this support is only available in the new web browsers.

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

   <source src=”file.ogg” />

   <source src=”file.mp3″ />

   <a>Download this file.</a>

</audio>

#10. Video Support

So, yeah, just like <audio> element, the <video> element can support the video in HTML 5. Moreover, you can embed YouTube videos in HTML 5 also. But, still, decision of supporting or not supporting video element is in the hands of the web browsers.

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

Send a Message