Things You Should Know About HTML5 – What’s new with HTML5

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.

Today the language has grown substantially and it’s gained two allies that are closely associated with it. CSS (Cascading Style Sheets) is used to help HTML look appealing by describing the way that the document is supposed to look while JavaScript is used to build interactivity. Since the introduction of HTML4 all the way back in 1997, HTML had received no major improvements and alterations for the span of almost two decades. With the exponential growth in tech during those years, a new and revised version was greatly needed to meet the demands of both the public and the designers. So after much wait, HTML5 was released in 2014 with the goal of being far more user-friendly and diverse than anything that had come prior.

HTML5 and its improvements over previous versions

HTML5

Interdependence

Due to usability purpose, the websites made by developers are highly interactive nowadays and developers need to include fluid animations, stream video, play music and allow access to social media sites. With HTML4 the only the option to integrate such tools was through the help of Flash,  Silverlight, Flex or javascript like tools. Integrating these consumed immense time while also increasing the complexity for developers. With the help of HTML5 however, it is possible to embed video, audio, high-quality drawings, charts, animation and many other rich contents without the need for plugins and third-party programs as the functionality is built into the browser.

Improved Code

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.

Revised Semantics

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.

Geolocation Support

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.

Sleek Forms

HTML5 enables designers to use far more elegant forms than ever before. It even makes form validation native to HTML, user interface enhancements and reduces the need for JavaScript (only necessary in browsers that don’t support form types). There are different types of text inputs, search options, and provide different fields for different purposes.

Consistency

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.

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. 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.

Attribute changes

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.

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

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).

<embed src=”example.swf”>

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.