What are new features introduced in HTML5?

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.

It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it easily readable by humans—and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1.

HTML5 introduced a lot of new semantic, graphic, multimedia elements; element attributes; new APIs, some elements were removed. Here is the list of most significant changes.

General differences of HTML5 and HTML4

1. Simplified and clear syntax

The syntax in HTML5 is more 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:

<!DOCTYPE html>

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 a complicated task to get the geographical locations of the visitors visiting the site. On the other hand, in HTML5 is extremely easy to get the user location. HTML5’s JS GeoLocation API 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 Storage API that can be accessed 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.

New elements

Here is only a part of new elements that have been introduced:

  • 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.
  • 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.
  • 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.
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.

New attributes

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

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.

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.

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

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

These only some of the new attributes in HTML5.

There are also many changes to existing elements and attributes. It is important to note, that due to ability to propose and contribute new features to new specification of third-parties, there are some features which are not approved by WC3 consortium, or might be declared/removed from final specification in future.

Short answer

  • HTML5 was introduces to replace HTML4 and XHTML 1. It was published in October 2014.
  • HTML5 introduced a lot of new semantic, graphic, multimedia elements; element attributes; new APIs, some elements were removed.
  • Semantic markup was one of the main focuses of the new specification.
  • Major new features and APIs: multimedia elements such as video and audio, GeoLocation API, Web Storage API, Web Sockets API, JS Web Worker API, Canvas, Drag-n-Drop.
  • It is important to note, that due to ability to propose and contribute new features to new specification of third-parties, there are some features which are not approved by WC3 consortium, or might be declared/removed from final specification in future.

Similar articles

Comments