Top 10 Major Advantages of HTML5

Fabio CimoSeptember 1st, 2015Last Updated: June 20th, 2018

5 245 21 minutes read

1. What is HTML5?

HTML5 is the newest version of the HyperText Markup Language that was developed in the late 80’s in order to describe documents that linked to each other. In it’s early days, HTML’s role was simple, to help describe a document’s structure and to allow cross-linking of documents.

The language is a Markup Language, a way to enhance a text file with bits of code (markup) that describes the structure of the document. Think of it as what your teachers did to your english schoolpapers. When they corrected it, they marked it up…probably in red to tell you what things needed to change to hopefully make your documents better.

Today the language has grown substantially and it’s gained two allies that are closely associated with it. CSS (Cascading Style Sheets) is supposed to help HTML look great by describing the way that the document is supposed to look. JavaScript is supposed to build interactivity.

2. HTML5 vs HTML4: General Differences

1. Simplified and Clear Syntax

The syntax in HTML5 is extremely clear and simple as compared to HTML4. One example of this is the DOCTYPE element. In HTML4 the DOCTYPE declaration was too messy and lengthy and used to refer an external source. However in HTML5 DOCTYPE element has been made extremely simple. For instance a mere is enough to specify the document type.

2. Multimedia Elements

HTML5 contains built in support for integrated multimedia files into web page via video and audio tags. Previously, in HTML4, the multimedia content was integrated in web pages via third party plugins such as Silverlight and flash.

3. Accessing User Geographical location

Previously in HTML4, it was an extremely cumbersome task to get the geographical locations of the visitors visiting the site. It was even difficult when the website was accessed through mobile devices. On the other hand, in HTML5 is extremely easy to get the user location. HTML5’s JS GeoLocation can be leveraged to identify the location of the user accessing the website.

4. Client Side storage

In HTML4, in order to store important data on client side, browser’s cache was used. However, that cache is limited and doesn’t support relational storage mechanism. In HTML5, this issue has been addressed via Web SQL database and application cache that can be access via HTML5’s JavaScript interface.

5. Client Server Communication

In HTML4 the communication between the client and server was done through streaming and long polling, since there are no web sockets available in HTML4. On the contrary, HTML5 contains web sockets that allow full duplex communication between clients and servers.

6. JavaScript Threading Mechanism

In HTML4, JavaScript and the browser interface with which user interacts, run in the same thread which affects performance. HTML5 contains JS Web Worker API which allows JavaScript and Browser interface to run in separate threads.

7. Browser Compatibility

As aforementioned, HTML4 is an established standard for developing browser applications and has been in use for more than 10 years. For this reason, HTML4 is compatible with almost all web-browsers. On the other hand, HTML5 is still in the process of evolution and the currently available tags are being modified and also new tags are being added. Therefore, HTML5 lags behind HTML4 in terms of compatibility with the browsers.

2.1 Tag Differences in HTML4 and HTML5

Several tags in HTML4 have been removed from HTML5 or their functionality has been modified. Following are some of the tags that are removed from HTML5 or have different functionality in HTML5 as compared to HTML4.

1. <Applet> removed <Object> Added in HTML5

HTML4 contained an <applet> tag that was used for displaying applets in a web browser. However, in HTML5, this applet tag has been removed. In order to display applet type items, a new tag has been introduced in HTML5.

2. <Acronym> removed <Abbr> Added in HTML5

HTML4 contained an <acronym> tag that was used for displaying abbreviation’s in a web browser. However, in HTML5, this tag has been removed. A new tag has been introduced in HTML5.

3. Difference in usage of <hr> tag
The <hr> tag was used to draw a line in HTML4 and all the previous versions of HTML, however in HTML5, the functionality of this tag has been changed and it is used for defining a thematic break in the web page.

4. Difference in usage of <a> tag

In HTML4 and previous versions, the <a> tag was used as anchor as well as for referring to a link. In the HTML5, the <a> tag is used only as a hyperlink. But if the href tag is removed from the <a> tag, the <a> tag can be used as a place holder for other hyperlinks.

5. Schema attribute removed from <meta> tag in HTML5

The tag is defined in the header section of the HTML document and contains information about the data. In the previous versions of HTML, including the HTML4, this tag used to contain an attribute called schema that defined the schema of the document. However, in HTML5, this tag has been removed.

2.2 Changes in Attributes

Following are some of the attributes that have been modified in HTML5.

In HTML4 and previous HTML versions, script attribute was used to in link tag to refer to JavaScript or other similar scripts. In HTML5 It is not necessary to use that script attribute.

In HTML5, the <table> tag can only have one attribute Border and the value of this attribute can only be zero or one. Previously, the <table> tag had many attributes.

In the previous versions of HTML, the tag didn’t had the charset attribute that defines the standard character encoding for the webpage. This attribute has been added in HTML5.

3. From 4 to 5: In Detail

This section is split up in several subsections to more clearly illustrate the various differences there are between HTML4 and HTML5.

3.1 New Elements

The following elements have been introduced for better structure:

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

• article represents an independent piece of content of a document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly related to the rest of the page.

• hgroup represents the header of a section.

• header represents a group of introductory or navigational aids.

• footer represents a footer for a section and can contain information about the author, copyright information, etc.

• nav represents a section of the document intended for navigation.

• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

<figure>
 <video src="example.webm" controls></video>
 <figcaption>Example</figcaption>
</figure>

figcaption can be used as caption (it is optional).

Then there are several other new elements:

video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.

• track provides text tracks for the video element.

• embed is used for plugin content.

• mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.

• meter represents a measurement, such as disk usage.

• time represents a date and/or time.

• WHATWG HTML has data which allows content to be annotated with a machine-readable value.

• WHATWG HTML has dialog for showing a dialog.

• ruby, rt, and rp allow for marking up ruby annotations.

• bdi represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.

• wbr represents a line break opportunity.

• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.

• command represents a command the user can invoke.

• details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.

• datalist together with the a new list attribute for input can be used to make comboboxes:

<input list="browsers">
<datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

• keygen represents control for key pair generation.

• output represents some type of output, such as from a calculation done through scripting.

The input element’s type attribute now has the following new values:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

3.2 New Attributes

Several attributes have been introduced to various elements that were already part of HTML4:

• The a and area elements now have a media attribute for consistency with the link element. WHATWG HTML also has the download and ping attributes.

• The area element, for consistency with the a and link elements, now also has the hreflang, type and rel attributes.

• The base element can now have a target attribute as well, mainly for consistency with the a element. (This is already widely supported.)

• The meta element has a charset attribute now as this was already widely supported and provides a nice way to specify the character encoding for the document.

• A new autofocus attribute can be specified on the input (except when the type attribute is hidden), select, textarea and button elements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience compared to focusing the element with script as the user can turn it off if the user does not like it, for instance.

• A new placeholder attribute can be specified on the input and textarea elements. It represents a hint intended to aid the user with data entry.

<input type=email placeholder="a@b.com">

• The new form attribute for input, output, select, textarea, button, label, object and fieldset elements allows for controls to be associated with a form. These elements can now be placed anywhere on a page, not just as descendants of the form element, and still be associated with a form.

<table>
 <tr>
  <th>Key
  <th>Value
  <th>Action
 <tr>
  <td><form id=1><input name=1-key></form>
  <td><input form=1 name=1-value>
  <td><button form=1 name=1-action value=save>✓</button>
      <button form=1 name=1-action value=delete>✗</button>
 ...
</table>

• The new required attribute applies to input (except when the type attribute is hidden, image or some button type such as submit), select and textarea. It indicates that the user has to fill in a value in order to submit the form. For select, the first option element has to be a placeholder with an empty value.

<label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Green
 <option>Blue
</select></label>

• The fieldset element now allows the disabled attribute which disables all descendant controls (excluding those that are descendants of the legend element) when specified, and the name attribute which can be used for script access.

• The input element has several new attributes to specify constraints: autocomplete, min, max, multiple, pattern and step. As mentioned before it also has a new list attribute which can be used together with the datalist element. It also now has the width and height attributes to specify the dimensions of the image when using type=image.

• The input and textarea elements have a new attribute named dirname that causes the directionality of the control as set by the user to be submitted as well.

• The textarea element also has two new attributes, maxlength and wrap which control max input length and submitted line wrapping behavior, respectively.

• The form element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).

• The input and button elements have formaction, formenctype, formmethod, formnovalidate, and formtarget as new attributes. If present, they override the action, enctype, method, novalidate, and target attributes on the form element.

In WHATWG HTML, the input and textarea have an inputmode attribute.

• The menu element has two new attributes: type and label. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global contextmenu attribute.

• The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree.

• The script element has a new attribute called async that influences script loading and execution.

• The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications.

• The link element has a new attribute called sizes. It can be used in conjunction with the icon relationship (set through the rel attribute; can be used for e.g. favicons) to indicate the size of the referenced icon. Thus allowing for icons of distinct dimensions.

• The ol element has a new attribute called reversed. When present, it indicates that the list order is descending.

• The iframe element has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments.

• The object element has a new attribute called typemustmatch which allows safer embedding of external resources.

• The img element has a new attribute called crossorigin to use CORS in the fetch and if it is successful, allows the image data to be read with the canvas API. In WHATWG HTML, there is also a new attribute called srcset to support multiple images for different resolutions and different images for different viewport sizes.

Several attributes from HTML4 now apply to all elements. These are called global attributes: accesskey, class, dir, id, lang, style, tabindex and title. Additionally, XHTML 1.0 only allowed xml:space on some elements, which is now allowed on all elements in XHTML documents.

There are also several new global attributes:

• The contenteditable attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup.

• The contextmenu attribute can be used to point to a context menu provided by the author.

• The data-* collection of author-defined attributes. Authors can define any attribute they want as long as they prefix it with data- to avoid clashes with future versions of HTML. These are intended to be used to store custom data to be consumed by the Web page or application itself. They are not intended for data to be consumed by other parties (e.g. user agents).

• The draggable and dropzone attributes can be used together with the new drag & drop API.

• The hidden attribute indicates that an element is not yet, or is no longer, relevant.

• WHATWG HTML has the inert attribute, intended to make dialog elements modal.

• The role and aria-* collection attributes which can be used to instruct assistive technology.

• The spellcheck attribute allows for hinting whether content can be checked for spelling or not.

• The translate attribute gives a hint to translators whether the content should be translated.

HTML5 also makes all event handler attributes from HTML4, which take the form onevent, global attributes and adds several new event handler attributes for new events it defines. For instance, the onplay event handler attribute for the play event which is used by the API for the media elements (video and audio).

3.3 Changed Elements

These elements have slightly modified meanings in HTML5 to better reflect how they are used on the Web or to make them more useful:

• The address element is now scoped by the nearest ancestor article or body element.

• The b element now represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

• The cite element now solely represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). Specifically the example in HTML4 where it is used to mark up the name of a person is no longer considered conforming.

• The dl element now represents an association list of name-value groups, and is no longer said to be appropriate for dialogue.

• The hr element now represents a paragraph-level thematic break.

• The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

• For the label element the browser should no longer move focus from the label to the control unless such behavior is standard for the underlying platform user interface.

• The menu element is redefined to be useful for toolbars and context menus.

The noscript element is no longer said to be rendered when the user agent doesn’t support a scripting language invoked by a script element earlier in the document.

The s element now represents contents that are no longer accurate or no longer relevant.

• The script element can now be used for scripts or for custom data blocks.

• The small element now represents side comments such as small print.

• The strong element now represents importance rather than strong emphasis.

• The u element now represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

3.4 Changed Attributes

Several attributes have changed in various ways.

• The accept attribute on input now allows the values audio/*, video/* and image/*.

• The accesskey global attribute now allows multiple characters to be specified, which the user agent can choose from.

• The action attribute on form is no longer allowed to have an empty URL.

• In WHATWG HTML, the method attribute has a new keyword dialog, intended to close a dialog element.

• The border attribute on table only allows the values “1” and the empty string. In WHATWG HTML, the border attribute is obsolete.

• The colspan attribute on td and th now has to be greater than zero.

• The coords attribute on area no longer allows a percentage value of the radius when the element is in the circle state.

• The data attribute on object is no longer said to be relative to the codebase attribute.

• The defer attribute on script now explicitly makes the script execute when the page has finished parsing.

• The dir global attribute now allows the value auto.

• The enctype attribute on form now supports the value text/plain.

• The width and height attributes on img, iframe and object are no longer allowed to contain percentages. They are also not allowed to be used to stretch the image to a different aspect ratio than its intrinsic aspect ratio.

• The href attribute on link is no longer allowed to have an empty URL.

• The href attribute on base is now allowed to contain a relative URL.

• All attributes that take URLs, e.g. href on the a element, now support IRIs if the document’s encoding is UTF-8 or UTF-16.

• The http-equiv attribute on meta is no longer said to be used by HTTP servers to create HTTP headers in the HTTP response. Instead, it is said to be a pragma directive to be used by the user agent.

• The id global attribute is now allowed to have any value, as long as it is unique, is not the empty string, and does not contain space characters.

• The lang global attribute takes the empty string in addition to a valid language identifier, just like xml:lang does in XML.

• The media attribute on link now accepts a media query and defaults to “all”.

• The event handler attributes (e.g. onclick) now always use JavaScript as the scripting language.

• The value attribute of the li element is no longer deprecated as it is not presentational. The same goes for the start and type attributes of the ol element.

• The style global attribute now always uses CSS as the styling language.

• The tabindex global attribute now allows negative values which indicate that the element can receive focus but cannot be tabbed to.

The target attribute of the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe.

• The type attribute on script and style is no longer required if the scripting language is JavaScript and the styling language is CSS, respectively.

• The usemap attribute on img no longer takes a URL, but instead takes a valid hash-name reference to a map element.

The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:

• The border attribute on img. It is required to have the value “0” when present. Authors can use CSS instead.

• The language attribute on script. It is required to have the value “JavaScript” (case-insensitive) when present and cannot conflict with the type attribute. Authors can simply omit it as it has no useful function.

• The name attribute on a. Authors can use the id attribute instead.

4. HTML5 Benefits and Features

HTML5 strengths lie in three major areas: semantic enrichment, Rich Internet Applications, and native support for rich media.

4.1 Semantic Enrichment

HTML5 provides developers with new, meaningful ways to organize content. Using new tags such as <header>, <footer>, <article> and <section>, pages can be organized more relevantly. What this means for Search Engine Optimization (SEO) is that search engines will have contextual information about the content for indexing, making it easier to present additional relevant results based on context. This move towards a more “Semantic Web” is what many are referring to as “Web 3.0”. Harnessing new semantic technologies will help to improve a Website’s discoverability and interrelationships.

4.2 Rich Internet Applications

Rich Internet Applications (RIA) can be described as Web applications that bridge the gap between the browser and desktop. To some extent, a RIA can communicate with the user’s local system to provide an experience that extends beyond the browser.

RIA technologies such as Adobe Flash and Microsoft Silverlight have offered this functionality for years to help Web developers create unique, interactive experiences online. However, the functionality came in the form of plugins to extend the browser functionality – those plugins came with a performance penalty as well as an annoying need to keep the plugins current.

In the case of Flash, the plugins were not available on certain smartphone and tablet devices such as the Apple iPhone and iPad. Additionally, many users object to the inherent dependence upon proprietary vendors for the extended functionality that should be natively available within any browser.

HTML5 comes into play with its ability to store and retrieve files from the user’s machine. With HTML5, Web applications can access and manipulate files from any browser that supports HTML5, yielding the same results every time.

Couple this functionality with the HTML5 canvas API’s ability to dynamically create vector-based graphics, and companies now have the opportunity to create rich, interactive experiences online within any browser and on any device that supports HTML5.

4.3 Rich Media

HTML5 provides native support for audio and video elements. With HTML5, users will no longer need to download a plug-in in order to watch a YouTube video or listen to a song streamed from their favorite internet radio station.

HTML5 rich media support also means that rich content is now accessible on any device, including the array of smartphone and tablet devices in the market today.

Another often overlooked benefit to this standard is that HTML5 embedded video and audio files are less taxing on mobile devices’ batteries, which becomes more important as we see more users embracing and relying on the mobile Web.

As the trend away from the desktop and toward mobile and tablet devices continues, HTML5 will play a fundamental role in helping you provide a consistent user experience across all media channels. Please give us a call at 800-818-2905 to see how we can help you seize the opportunities available to you with DPCI HTML5 development.

5. Top 10 Major Advantages of HTML5

1. Mutuality

Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programmas as the functionality is built into the browser.

2. Cleaner markup / Improved Code

HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

3. Improved Semantics

Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.

4. Elegant forms

HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose.

5. Consistency

As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured.

6. Improved Accessibility

Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has.

7. Fulfill the need of Web application

Many new features and standards have emerged as part of HTML 5. Once you detect the available features in today’s browsers, you can take advantage of those features in your application. Main focus of HTML5 is to make easier application with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.

8. Offline Application cache

All browsers have some kind of caching m After a sometime, you open up your laptop and click the Back button in the browser hoping to see the previous page that was opened. However, as you are not connected to the internet and the browser didn’t cache the page properly, you are unable to view that page. You then click the Forward button thinking that at least that page will load, but it doesn’t. You need to reconnect to the internet to be able to view the pages. HTML 5, thankfully, provides a smarter solution. While building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages like offline browsing, files load much faster and reduced load on server

9. Client-side database

While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.

10. Geolocation support

With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.

6. Conclusion

So you’re still not using HTML? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons that we mentioned above to start using it right now.

Use HTML5 with caution and be ready to make updates. Stop using elements that HTML5 has kicked from the code, and try using new HTML5 elements that are sure to stick (<header>, <footer>, etc …). You might as well start getting into the habit of using these, now.