5 Things I Love About HTML5

Viki Hoo
Tweet

HTML is the predominant markup language for web pages. We could convey the message of web page layout, content, effects, and so on, through HTML. As the latest version of its series, HTML5 is revolutionizing the web. Although HTML5 hasn’t been set as the standard yet, its new features have already touched our hearts.

Here in this article, I would like to present to you five things that I get excited about from HTML5, which will definitely bring you a brand new web experience too.

1. New Layout Tags

We can see that the layout tags of HTML4 are the same in semantic meaning—div id=—so we can’t distinguish the content of each part. However, the HTML5 specification has added quite a few useful tags for structuring your markup. It defines sections of your web page as layout areas without needing a div tag. That is, your header is surrounded by the <header> tag, and your navigation is surrounded by the <nav> tag.

These layout tags in HTML5 are independent of each other. They are cleaner, neater, and more organized, which enables search engines and statistical software to recognize each part. Such defined content allows systems and mashup websites to easily parse, link to, and cite your articles.

2. Better Form System

HTML5 brings big improvements to benefit both developers creating forms and users filling forms. For example, one of the most common aspects of form validation is the enforcement of required fields—preventing a form from being submitted until certain pieces of information have been entered. This can now simply be achieved by adding the required attribute to an input, select or textarea element:

<input type="text" … required />

Also, as you can see in the picture above, you can specify the kinds of entries, like the email address format you expect from the form fields, and then browsers can check whether the data entered in the specific field matches the expected structure.

In this way, the new form types and elements of HTML5 will help to certify that the information entered online is completely accurate, without any need to run additional JavaScript or PHP for checking validation. It will speed up the loading time, improve the user experience, and make web forms easier to write and more consistent across the Web.

3. Audio and Video API


HTML5 introduces built-in media support via the <audio> and <video> elements, and makes a new way to display video in browsers without any plugins. It provides a set of functional APIs to control media display. For instance, there are a number of useful attributes for the <video> tag, including autoplay controls, a poster attribute that points to an image file to display before the video is loaded, and a boolean attribute for play/pause controls. Those elements that control media display are editable.

Therefore, HTML5 obviously brings us a much better video and audio experience, allowing us to play video or audio, and set up complex user interactions via mouse and keyboard events.

4. Canvas API

Drawing pictures in a web page has been a problem for a long time. Previously, we have had to ask for help from plugins like Flash, Silverlight, and others. However, in this Flash to HTML5 age, the problem is solved. The HTML5 canvas tag uses JavaScript to draw graphics on a web page.

The canvas element has several methods for drawing paths, boxes, circles, characters and adding images. It consists of a drawable region defined in HTML code with height and width attributes. Then, JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs.

Thus, the HTML5 canvas allows for dynamically generated graphics, drawing on a web page, and interaction, such as zooming in/out. Some anticipated uses of canvas include building graphs, animations, games, and image composition. The above screenshot is an HTML5 canvas game.

5. Geolocation API

To detect the location of a client device in the past, you would typically have to inspect the client IP address. But detecting a user’s location based on IP can be ineffective. So now, HTML5 provides a Geolocation API for geographical information, which can identify the user’s location when they access a website through GPS. As many modern phones are now equipped with GPS functionality, it’s easier to pull the location information from these devices. The Geolocation API provides the Geolocation interface with the function getCurrentPosition(), which returns the longitude and latitude to the function caller (the website). The function signature is:

void getCurrentPosition(in PositionCallback successCallback);

In such cases, knowing where the user is accessing a particular site from, and customizing the site content depending on the location, will have a big impact on the user’s behavior. For example, imagine you are searching the web for some reviews of a product that you are planning to buy. If the review site and search engines could get your location information, and do a little processing in the background, they could show advertisements related to that product. That will definitely induce you to click on those advertisements and buy those products.

Conclusion

Apart from the five aspects I mentioned above, HTML5 has many other great new features. I hope more and more people will find them useful, and take full advantage of HTML5 in the future.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sergey

    the new form types and elements of HTML5 will help to certify that the information entered online is completely accurate, without any need to run additional JavaScript or PHP for checking validation.
    ===============

    Omitting PHP validation on serverside always will be an issue. All have to validate all parameters from user forms. HTML5 does not prevent you from bad requests

    • http://www.sothink.com Viki Hoo

      16yeap, I hope the problem could be fixed in the near future.

    • http://www.sothink.com Viki Hoo

      yeap, I hope the problem could be fixed in the near future.

  • http://www.ricardo-machado.com Ricardo Machado

    Hi Viki, great summarized post.
    However, beyond that, there’s other cool stuff too… Check on the File API, the Media API ( not only Video and Audio, but Camera and Microphone), the awesome WebGL API (which totally innovates the online in-browser gaming industry).

    :) Still awesome post, those are some of the API’s and reasons that made be change too!!!

    Keep up the good work

    • http://www.sothink.com Viki Hoo

      Thanks for your good advice, but most people still consider it as one of the new features of HTML5.

  • http://www.iandevlin.com Ian

    Geolocation is not part of HTML5.

    • http://www.sothink.com Viki Hoo

      Thanks for your comment, at before it is not, but now it is being for most of people.

  • http://docraptor.com Tyler

    Great list, Viki. I’m a huge fan of both the Canvas and Geolocation APIs. I look forward to the day that HTML5 is standard, and not just an interesting yet poorly supported toolset.

    • http://www.sothink.com Viki Hoo

      Thanks, I hope so in a few years!

  • http://www.redubl.com Dustin James

    To what degree can these be implemented in design today considering the level of support within browser environments?

    • http://www.sothink.com Viki Hoo

      Just waiting for it!

  • stevo

    The support for the new form types will take years to implement thanks to legacy browsers. Most of the things in html5 require multiple lines and formats as well as fallback positions. It will increase amount of markup, and be far more time consuming when it comes to creating 3 or 4 versions of audio and video.

    What happened to separation of behaviour, presentation and structure if you are expecting the browser to validate forms?

    • http://www.optimalworks.net/ Craig Buckler

      You can use the new form types today. Consider email fields; most HTML5 browsers won’t let you enter an invalid address. Older browsers will just assume it’s a “text” field and won’t perform any validation. You can add JavaScript if that’s a problem (it can be loaded dynamically) or give them a slightly degraded experience.

  • http://brianswebdesign.com Brian Temecula

    I long for the day when we can just call HTML5 “HTML”.

    • http://www.sothink.com Viki Hoo

      me, too, it will be more convenient.

  • Viki Hoo

    Thanks for your comment very much.
    I will learn from your suggestions, and write much and better HTML5 and CSS3 articles.

  • Anonymous

    I still see HTML5 as the instant gratification language, XHTML 2 was going in the right direction, but they had a long way to go. HTML5 came along and made lots of promisses, and opened a few doors to easier code and extra multimedia possibilities. If only the had created a namespace in XHTML for these specific features, then XHTML 2 could have kept on evolving in the right direction.

    • http://www.sothink.com Viki Hoo

      Hi,Anonymous,XHTML2 is the past, time moves on, let’s looking forward, HTML5 is evolving in the right way.

  • Kise S.

    I was so happy about the video/audio tags, until i noticed that each browser has it set of codecs to use and don’t even accept free royalty OS codecs such as thoera

    • http://www.sothink.com Viki Hoo

      yes, the HTML5 video tag do have its restrictions. Right now, there are three possible options for encoding. HTML5 video, and currently, each browser has its own preferred video format.
      H.264 (MP4) – Supported by IE 9, Safari 3.1 and Chrome
      OGG (Theora) – Supported by Firefox 3.5, Chrome 4 and Opera 10.5
      VP8 (WebM) – Supported by Firefox 4.0, Chrome 6.0 and Opera 10.6

  • @artwitto

    I love that now we have a mobile version of Grooveshark, thanks to HTML5 :)

    • http://www.sothink.com Viki Hoo

      Thank you the same.

  • http://dzinepod.com Sylvia @ DzinePOD

    Hi Viki,
    I agree with you. HTML5 is super since it opens up so many doors, for all kinds of devices. I’m pretty excited about and am starting to dig in. Heard of Adobe Edge which helps with animation. Just downloaded the free beta version to see what it’s all about. Looks pretty interesting.

    • http://www.sothink.com Viki Hoo

      Hi, Sylvia, I heard about Adobe Edge, I use sothink decompiler for flash design.
      I know Adobe Edge and it is a great HTML5 animation maker, wish you grasp HTML5 quickly.

  • Diego Andrade

    Although HTML5 has an API to validate forms it is not (and never will be) secure to trust only on client-side validation and forget about the server-side. A good developer just can’t trust on the information sent by the client, one time that this information may come from a robot, and not from a regular user accessing your site from the browser. But this API still is a great feature.

    Congratulations for the article.

    • http://www.sothink.com Viki Hoo

      Hi, Diego,
      You give us a very practical idea about API.
      Thank you very much.

  • http://wilmoore.com Wil Moore III

    HTML5 is useable right now. I’ve already used it to great success in two previous projects over the last year and a half using shims/polyfills. I am now writing another web application using HTML5 + CSS3 and to be honest, HTML5 is so much easier to deal with over our previous options.

    Learn about polyfills here:
    https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

    Use the following site as a reference as well:
    http://html5please.com/

    • http://www.sothink.com Viki Hoo

      Yeah, I agree with you, and thanks for your sharing of HTML5 resources.

  • mkn

    Remember, though, that you will need to provide (at least) two formats for audio and two formats for video because there is no requirement for encoding. IE, Safari and Chrome will play mp3/mpeg but not ogg/theora. Firefox and Opera will work the other way around and will probably never support the license-bound formats.

    So if you now have 10 GB video or audio that will need conversion and double the space. Yes, and if you need to support old browsers you will need to have Flash support :)

    • http://www.sothink.com Viki Hoo

      yes, I will do it next time,thk u very much

  • Paul

    The new HTML5 layout tag thingy are messy.
    If you really get into it, they are almost useless.

    It’s just another way of “div id =”
    Because you will need to find a way to style them, so class and id need to be assigned anyway.

    Not to mention that sitepoint.com doesn’t use these tags, 7plusdezine.com doesn’t use these tags.

    So the title of this post is misleading, if it’s your favorite, why not use it on your own work ?

    • http://www.sothink.com Viki Hoo

      Thank you very much.
      We hope HTML5 layout tag will be better and better.

  • http://haunschild.de Marc Haunschild

    About your first poitn: I guess you talk about elements, nit tags und the elements you try to introduce are new semantic elements, not layout elements. These things are important, especially for people, which need your help!

    • http://www.sothink.com Viki Hoo

      Thanks for your good advice, I do have a mistake about the new semantic.
      I will pay much attention to them in my following articles about this.

  • uthemang

    Great article, I think the canvas API is a huge step in the right direction.

    • http://www.sothink.com Viki Hoo

      Thank you very much, I can not agree with you any more.

  • Mathieu

    Don’t you hate prominent typos? Section 2: “conformation” should be “confirmation”.

    • http://www.sothink.com Viki Hoo

      Thank you very much, I will modify it a.s.a.p.

  • http://anarinfo.com/ Anaradam

    I love your Article. Its very useful for my team about HTML-5. I hope to see more. Thanks for sharing with us.

    • http://www.sothink.com Viki Hoo

      Thanks for your praise, I will continue my article.

  • http://www.deathshadow.com Jason Knight

    Again, just using HTML 5 to justify pointless extra wrappers — since a sidebar typically is NOT related content and as such NOT an aside to it (meaning you shouldn’t be applying extra semantics), there should be no need for a header div or header tag since we have numbered headings, and of course the pointless wrapper around one’s menu list instead of *SHOCK* just using the existing semantic method of a list with anchors in it.

    About the only one that makes sense to have extra semantics is FOOTER, and if you suprise-surprise use heading tags properly with horizontal rules to indicate headerless section changes combined with *shock* a logical document structure like say… putting it last — you shouldn’t need that either.

    Just more proof HTML 5 is for the people who didn’t bother understanding the existing semantic tags and feel this bizzare desire to wrap extra allegedly semantic containers around them for no good reason.

    • http://www.sothink.com Viki Hoo

      Thanks for your comment.
      Maybe you are right, but HTML5 really is a new trend.