Getting to Know HTML5 Up Close

This year, on October 28, the World Wide Web Consortium (W3C) released the final version of the standards for HTML5, the latest version of HTML. This has been developed to help create modern and innovative websites, and give authors more flexibility and interoperability. HTML5 brings forth a wide range of form controls, APIs, multimedia and semantics, and can make web pages more search engine friendly.

What is new in HTML5?

The new features include semantic elements like <header>, <footer>, <article> and <section>, new graphic elements like <svg> and <canvas>, and new multimedia elements like <audio> and <video>. HTML5 offers great APIs that allow the author to generate a better user experience. Some of the native APIs are:

  • Drag and Drop: It enables the user to copy, reorder and delete items on the web page through drag and drop. In HTML4, this functionality could be achieved only through complex coding. With HTML5, this same functionality is available as an API, which makes it much easier to code.
  • Offline storage database: In HTML4, application data needed to be stored in cookies. Under HTML5, it can be stored locally within the user’s browser and unlike cookies, this information is never transferred to the web server, unless the user chooses to do so. The storage limit is also much higher—up to 5MB in Firefox and Chrome.
  • Browser history management: It helps the user to navigate between pages visited in a session without overusing the back button and without the browser having to refresh the page 100% each time. This reduces network calls and ensures faster loading.
  • Document editing: HTML5 has a contenteditable attribute, which if set to true, can allow the page to be edited by the user.
  • Timed media playback: With HTML5, it is possible to embed video and audio files in the web page. It allows greater user control by allowing timed display of the video/audio file, i.e., the user can choose the duration or portion of the video, which he/she wishes to see.
  • Device independence: HTML5 code for an OS can be replicated on any computer, smart phone or tablet without too many changes. It uses responsive design, which is independent of screen size making it useful to host apps across platforms.

What else is different from the previous version?

  • Third party software like Flash was required to play audio/videos files. Videos will henceforth be embedded in the document so that a third party tool is not required to play the video or audio files.
  • HTML4 did not have rules for parsing, making it difficult to handle errors. On the other hand, HTML5 has stringent parsing and lexing rules for error handling in the code, saving time and effort.
  • HTML4 adopted many browser specific element types and attributes. Web designers working with HTML4 were limited by the constraints of language and browsers, and search engine optimization of a page required a lot of effort. These limitations have been removed in HTML5.

How is HTML5 more search engine friendly?

  • Through HTML5, you can create more structured web pages. The main text area of a page is under the <article> tag. Each article can have various segments, which can be organized into sections. Each section contains microdata, which specify the vocabulary important to that segment. This structure helps the author to present content targeted at different categories of consumers, which is very useful to eCommerce websites. The microdata in each section help search engines to locate your page without getting confused regarding the main intent of your page.
  • Each section is marked by a <header> tag, which can further have nested headers for sub-headings. A correctly worded header can be very useful in achieving SEO.
  • Each section will also have a <footer> tag, which can contain information on the author of the article, hyperlinks that point the user to next or previous page, and also links to other important and relevant websites.
  • The new <mark> tag can be used to highlight key words on the page.

HTML4 lacked the necessary semantics to segregate the page and highlight its contents to the search engine. With HTML5, search engines can dissect a web page better, besides easily identifying key words that can help to determine the relevance of a page.  Search engines themselves use page segmentation for indexing purposes. By using structured and nested code, HTML5 makes page segmentation easy for search engines. This can greatly improve page ranking, if used correctly.

More structure and sectioning in the page also implies a user can better navigate the page and jump from one article to the other without the author providing specific skip links. From an author perspective, HTML5 provides a neat code that is easier to construct and debug.

Some drawbacks of HTML5:

  • Mobile apps built in HTML5 might be slower than native apps.
  • HTML5 is not as flexible as flash in creating rich graphics and animations.
  • Requires more development and testing effort to ensure uniformity in appearance across devices.
  • Creating animations in sync with audio is time consuming, which makes it a poor choice for developing games and eLearning courses.
  • With code being exposed to the user, security is a concern.

Overall, HTML5 has been developed with the intention of creating more dynamic websites, which are browser independent to a large extent, thus ensuring a better web experience. It offers multi-channel functionality that is fast and affordable. With more and more businesses adopting HTML5, it can be expected that there will be sufficient impetus in the market to overcome the few challenges that currently exist.

Image Credit: davidchief on Flickr

Author : Rashmi Krishnan Date : 03 Dec 2014