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.
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
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.
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 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:
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.
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.
type attribute now has the following new values:
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:
area elements now have a
media attribute for consistency with the
link element. WHATWG HTML also has the
area element, for consistency with the
link elements, now also has the
base element can now have a
target attribute as well, mainly for consistency with the
a element. (This is already widely supported.)
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
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
textarea elements. It represents a hint intended to aid the user with data entry.
<input type=email placeholder="[email protected]">
• The new
form attribute for
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
<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
image or some button type such as
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>
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.
input element has several new attributes to specify constraints:
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
height attributes to specify the dimensions of the image when using
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.
textarea element also has two new attributes,
wrap which control max input length and submitted line wrapping behavior, respectively.
form element has a
novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).
button elements have
formtarget as new attributes. If present, they override the
target attributes on the
In WHATWG HTML, the
textarea have an
menu element has two new attributes:
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
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.
script element has a new attribute called
async that influences script loading and execution.
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.
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.
ol element has a new attribute called
reversed. When present, it indicates that the list order is descending.
iframe element has three new attributes called
srcdoc which allow for sandboxing content, e.g. blog comments.
object element has a new attribute called
typemustmatch which allows safer embedding of external resources.
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:
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:
contenteditable attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup.
contextmenu attribute can be used to point to a context menu provided by the author.
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).
dropzone attributes can be used together with the new drag & drop API.
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.
aria-* collection attributes which can be used to instruct assistive technology.
spellcheck attribute allows for hinting whether content can be checked for spelling or not.
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 (
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:
address element is now scoped by the nearest ancestor
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.
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.
dl element now represents an association list of name-value groups, and is no longer said to be appropriate for dialogue.
hr element now represents a paragraph-level thematic break.
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.
menu element is redefined to be useful for toolbars and context menus.
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.
s element now represents contents that are no longer accurate or no longer relevant.
script element can now be used for scripts or for custom data blocks.
small element now represents side comments such as small print.
strong element now represents importance rather than strong emphasis.
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.
accept attribute on
input now allows the values
accesskey global attribute now allows multiple characters to be specified, which the user agent can choose from.
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
border attribute on
table only allows the values “1” and the empty string. In WHATWG HTML, the
border attribute is obsolete.
colspan attribute on
th now has to be greater than zero.
coords attribute on
area no longer allows a percentage value of the radius when the element is in the circle state.
data attribute on
object is no longer said to be relative to the
defer attribute on
script now explicitly makes the script execute when the page has finished parsing.
dir global attribute now allows the value
enctype attribute on
form now supports the value
height attributes on
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.
href attribute on
link is no longer allowed to have an empty URL.
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.
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.
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.
lang global attribute takes the empty string in addition to a valid language identifier, just like
xml:lang does in XML.
media attribute on
link now accepts a media query and defaults to “all”.
• The event handler attributes (e.g.
value attribute of the
li element is no longer deprecated as it is not presentational. The same goes for the
type attributes of the
style global attribute now always uses CSS as the styling language.
tabindex global attribute now allows negative values which indicate that the element can receive focus but cannot be tabbed to.
target attribute of the
area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with
type attribute on
usemap attribute on
img no longer takes a URL, but instead takes a valid hash-name reference to a
The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:
border attribute on
img. It is required to have the value “0” when present. Authors can use CSS instead.
language attribute on
script. It is required to have the value “
type attribute. Authors can simply omit it as it has no useful function.
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
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
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.
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.