HTML5 Features, Tips and Techniques You Must Know
18 Jun 2015
HTML5 Features, Tips and Techniques You Must Know
This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.
- Get rid of the long, daunting and impossible to learn XHTML doctype. When you have the new HTML5 which is short and sweet why stick to the old and redundant. The new doctype being <!DOCTYPE HTML>. Isn’t it sugar sweet? The fact is that this format is in fact not necessary at all. It is currently being used only for the reason that old browsers do not understand the HTML5. Once your browser is updated be rest assured that you would not even need this much.
- For all those who have struggled in the past to associate the captions with the pictures in a semantic way, here is some good news. HTML5 has resolved that. They have introduced a feature called <figure> element. This is combined with the element known as <figcaption>. Thanks to these the two can now be semantically associated that is the images and their respective captions.
While in earlier scenario the element <small> was used to create sub headings, the meaning of the same has now been re defined. In HTML5 the element <small> means a small print. Hence this is one of the important points to be noted and taken care of in the future.
- Get rid of the attribute named type. In the past it was added to the link and the script tags, however now it is completely redundant. It is understood as a matter of fact that these two tags that is link and script tags make a direct reference to style sheets and scripts.
- You are not bound to quotes anymore. The quotes that were used in the past in XHTML can be gotten rid with. Actually it is more of a habit we understand, so if you wish to continue with it you can and if you wish to get rid with it so you can. The choice is yours.
- There is a new dream addition to the elements, and it is known as “contenteditable”. As the name directly implies this element allows you to edit the text that is between the elements. This would also include the children. This particular feature has many uses to it.
- Next is very important, the email inputs. The HTML 5 will be introducing built in form validation.
- In the past to create a Placeholder a JavaScript had to be used for text boxes. While it did work however there was a flaw to it that is if the user would delete the text that was typed and would leave the text box and click all the input that was entered would vanish. With the new attribute called the placeholder this issue is resolved. This aspect however is s till improving and we are sure that soon it will be up to the mark however for now some improvement is better than nothing.
- The local storage feature which is not a typically a HTML5 feature allows the user to store all the data that he had typed. This means that the user can get back all the data that he had typed earlier at one place. This again like Placeholder is not applicable across all the browsers however it does in work under the big names like windows explorer, safari 4 and Firefox5.
- The semantic Header and the footer were such a task in the XHTML way. Currently the entire thing has become simple easy and convenient. The earlier mark ups are now <header>, </header>, <footer>, </footer>, it really couldn’t get more simple and easy than this, isn’t it?
- There is a new attribute called the required attribute. This attribute lets the user decide what typed text is required what is not. That is when you type your commands what is the input that is required and all you need to write is <required>. Depending on the way you like to do your coding you can use this in two ways the old structured way or the new unstructured way. As we said even earlier it all depends on your comfort level on how you want to do your coding.
- The need for JavaScript solutions has removed in many cases by the HTML5. They have come up with a new feature called the autofocus attribute. As the name would suggest the feature allows the user to automatically focus on a particular input that he or she wants to focus upon.
- The XHTML had the <audio> element; similarly the HTML5 has the <video> element. While this may still be at a development stage but some browsers are able to use this like Safari 4 and Internet Explorer 8. The use would need to use both the formats while using this element. Interesting enough, even YouTube has allowed the embedding of HTML5 videos.
- The new attribute the “preload video” attributes is exactly what its name suggests. This attribute allows its user to pre load a video. The tricky part being that the user will have to decide that does he really need to preload a video or not. For those who are sure must definitely use this to preload the video and hence save the time of the site visitor. All that you need to do is type <video preload>
- While using these video attributes you will realize that the video will appear in the form of an image. This will have no control buttons like play pause start stop etc. for the same to be added on the video you can use the Display controls attribute. The control attribute needs to be added while adding the video that is <video preload controls>.
- You can now have mark ups for your regular expressions that you use. However the only thing being that the string must have minimum 4 and maximum 10 characters.
Are you looking forward to hire a Web Designing Company in Pakistan? Call us at +91 3469009009 & get in touch with our team right away!
