Top 10 HTML5 Features and Techniques for HTML Developers

TwitterFacebookShare on Google+Share on LinkedinPin this PostShare on TumblrMore services

Comments Off on Top 10 HTML5 Features and Techniques for HTML Developers

Internet is an industry which offers huge scope to earn and grow in the coming years, and people who involved with it are definitely going to benefit if they use it the right way. This steadiness of the field and its growing nature also means that it’s highly competitive and it’s tough to stay here if you do not keep up with changing trends. One of the most important trends on the internet right now is HTML5 and this language have changed the whole way internet works. Everyone wants to be an expert at HTML5 and many of us are working hard towards it by becoming better developers also. However, the changes brought in HTML5 are frequent and heavy, which is why, if you do not keep up with the latest developments, there is a high chance that you miss out on something very important. Mentioned below are 10 of these features and technique which will greatly help the HTML5 developers.

1. If you still weren’t aware of the new doctype then its time you embrace it now like an old friend as there has been some time since it came out. Now you do not need to memorize the old boring doctype as this one is shorter and simpler and works for old as well as new browsers. The new browsers might not even need doctype as it isn’t necessary as we thought but keeping this one for the old browsers is a good idea.

<!DOCTYPE html>

2. Now with a new feature in all the new browsers, you will be able to edit your content; meaning now that you have a feature called CONTENTEDITABLE, it will help you in letting you edit the elements including all the text as well as the element’s children. This feature has a wide ranging use right from being used in a simple app which uses local storage.

<ul contenteditable=true>

3. The built in form validation is soon going to be released which means we will be able to limit our browsers to email addresses which are valid, which will make our job so much more easier. This will be done by applying “email” to form inputs which will then work on our instructions only. However, the only catch is here is that the old browsers might not be able to read and work with the new validation form and fall back to the old text box only. Basically, it means that you can go ahead and use this form of validation but do not blindly use it as it might not be working out for your browser.

4. Quoting is optional now and this is good news for people who find wrapping the attributes painstaking. Some people like to see their elements in quotes but you can choose to not do it if you like. The only plus point that we get by using quotes is a more structured document and now that you know the pros and cons, the call is yours.

5. Placeholder– The placeholder attribute is here which solves our problem of the blank box of the input. Earlier when a user used Java to create placeholders for text boxes, in the beginning it used to work fine but when the person would delete the text, the input would be left black again, and this problem is now solved by placeholder. However, the only common problem with this feature also is its incompatibility with some of the important browsers, which means you might have to use the old technique in some cases.

6. Local storage– Another option which though isn’t compatible with the old browsers, it works well on the new ones. Its main feature is being able to retain what we had typed in the browser we are using and making sure the browser remembers it. This isn’t a part of official HTML5 but still is a part of it. It makes the browser remember stuff even after it has been closed and refreshed which means our job now is definitely going to be easier.

7. Autofocus attribute– This feature is again directed towards removing the use of JavaScript and making things easier for us to manage. We can use this attribute when an input has to be selected or it has to be focused by default. With this feature also, it is a good idea to stick with a single keyword.

8. Audio Support– The problem of waiting and looking for a third party plug in has been solved now with HTML5 providing audio support with the help of the <Audio> element. Again we are faced with the problem of compatibility issues with the older browsers, but we can hope that this problem will be solved with the advent of new browsers.

9. Video support– With the audio support in place, how can HTML5 stay behind with the video aspect as well? The new browsers now come with a video support element which means you won’t have to look in for plug ins to run videos. YouTube just came out with their HTML5 embedded videos as well. Again the only problem is the browsers and we still have to wait for this one to be solved.

10. Preload videos– This one speaks for itself and is an amazing feature if you have a video based site. This will help you as it will save some of your user’s time in loading videos if the person gets pre loaded videos. The change which has to be made to use this setting is by typing the setting preload=”preload”, or by simply adding preload.

These 10 techniques are prime features for the new HTML5 and we can hope that they will be improved with passing time.