HTML5 is the latest complete version of the HyperText Markup Language, originally developed in the late 80’s. Back then the role of HTML was quite simple, helping describe a document’s structure and allowing the cross-linking of those documents. Markup Language is the language used by HTML, this language provides a way to enhance a text file with bits of code (markup) that describes the structure of the document. Think of it as what teachers did to your assignment papers. In correcting them, they marked it up, highlighting the errors to tell you what things needed to change to hopefully make your documents better.
HTML5 and its improvements over previous versions
HTML5 enables web designers to use cleaner, neater code. Removing most div tags to replace them with semantic HTML5 elements.
Offline Application Cache
All browsers have some kind of caching after some time. If you’re using your laptop offline and try to go back from an already opened browser tab to a previous one, you would be unable to view that page. If you then click forward thinking that at least the original page will load, due to bad caching, even that page is now unable to load. HTML5, 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 such as offline browsing, files loading up faster and a reduced load on the server.
It is now easy to see which parts of the webpage are headers, nav, footers, aside, etc. as tags are now specific to them, and most importantly know what their meaning and purpose is in whole the format. Using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.
There are many different ways to figure out your location. Through your IP address, your wireless network connection, which cell tower your phone is currently connected to, or by using dedicated GPS hardware that calculates latitude and longitude from information sent by orbiting satellites. With the new HTML5 geolocation APIs, one’s location is, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.
With the adoption of HTML5 elements, we have seen far greater consistency in terms of the HTML used to code a web page from one site to another. This has made it easier for designers and developers to immediately understand how web pages are structured.
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. HTML5 can do this by using session storage and local storage in place of cookies. It is not a permanent database but enables you to store structured data, temporarily.
Changes from HTML4 to HTML5
Difference in usage of <a> tag
In HTML4 and its previous versions, the <a> tag was used as both an anchor and hyperlink. In HTML5, the <a> tag is used only as a hyperlink. However, if the href tag is removed from the <a> tag, it can also be used as a placeholder for other hyperlinks.
<Acronym> replaced with <Abbr>
HTML4 contained a <acronym> tag that was used for displaying abbreviations in a web browser. However, in HTML5, this tag has been replaced with the new <Abbr> tag.
Difference in usage of <hr> tag
The <hr> tag was used to draw a line in HTML4, however, in HTML5, the functionality of this tag has been changed and is now used for defining a thematic break in the web page.
In HTML5, the <table> tag can only have one attribute border and its value can only be zero or one, whereas previously the <table> tag could hold many attributes.
In the previous versions of HTML, tags didn’t have a charset attribute that defines the standard character encoding of the webpage. This attribute has been added in HTML5.
These are just a few of many changes in tags and attributes from HTML4 to HTML5.
Some New Elements added in HTML5
The following elements have been implemented for a better structure to aid coders and text to speech software.
- 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.
There are several new elements as well.
video and audio have been added for direct multimedia content without the need of third party scripts. They provide an API so application authors have the option to 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.
<audio src =“example.mp3” controls> </audio>
embed defines a container for an external application or interactive content (a plug-in).
time represents time and date.
<p>The store opens at <time>8:00</time> every morning.</p>
track provides text tracks for video elements.
<video width="320" height="240" controls> <source src="example.mp4" type="video/mp4"> <source src="example.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_ne.vtt" kind="subtitles" srclang="no" label="Nepali"> </video>
Many attributes have been added to various elements from HTML4.
The meta element now has a charset attribute as this was already widely supported and provides a simple way to specify the character encoding for documents.
The base element can now have a target attribute as well, mainly for consistency with the element.
A new placeholder attribute can be specified on input and textarea elements. It represents a hint intended to aid users with data entry.
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.
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.