What is HTML5?

September 25, 2014, 1:00 am

In the last few years, HTML5 has been floating around the web, being brought up in meetings everywhere and used as a catchall for “next-gen” web technologies. I’d like to offer a brief examination of what HTML5 actually is, how it can benefit you.

First, what is HTML? HTML stands for Hyper-Text Markup Language.

Hyper-Text is a section of text that acts as a link used to take the web browser to another document—something all web users are very familiar with as it is this concept that the web was built on. Ted Nelson, one of the early pioneers of computer technology, first used the term in 1963.

Markup Language refers to the fact that HTML is not a programming or scripting language. It lacks variables, conditions, flow control or functions. Instead, the markup consists of special hidden pieces of text called tags that are mixed in with content text & content. When text with markup is displayed in a web browser, the tags are transformed into special formatting or structure.

This is <a>hyper-text</a> markup. The a tag stands for anchor and doesn’t do much by itself. But if the anchor tag is given a property such as:

The anchor tag now adds formatting and function to the word “hyper-text” by allowing the user to click on the link. The web-browser will navigate to the http web address that it’s property refers to, also know as the href.

An important point here is that the user never sees the tag, but only the format or behavior that the tag applies to the text in the document. Some other common tags are <i> for italic, <strong> for bold, <p> for paragraph, and <img> which is used to insert an image into a document.

Sooo, what is HTML5? HTML5 is not HTML, it’s much more!

As the web has grown, HTML has also grown to do much more than simply markup text. HTML documents can have lists and tables, complex dynamic or fixed layouts and page structures, images and embedded documents, interactive and animated elements. The original concept of fetching a text document and displaying it in a browser seems quaint.

The web has also grown in the way that we use it. For the first time, mobile Internet usage has exceeded desktop usage.  Considering all the different devices used to access the Internet, this trend will continue with mobile devices and other connected gadgets becoming more common worldwide and traditional PC sales decline. These devices have one thing in common: they are very different!

  • Display sizes, types, display densities and browser software.
  • Control mechanisms: most are touchscreen, though every platform has it’s quirks.
  • Contexts: on the street, while shopping, in the car, at the office, etc.
  • Applications: Watching movies, browsing the news, playing games, managing bank accounts, social networks.

HTML5 enables HTML documents to support all the applications, content and devices by adding new features & new tags while removing some outdated ones. Some of the new features in HTML5 are:

Local Databases, so that websites can work better offline (or when your mobile device has a spotty connection)

Geolocation allows HTML pages to access it’s host device’s location information. Geolocation has been pretty common on mobile browsers, such as when you visit Target.com on your iPhone and it can automatically find stores near you without requiring you to enter a city or zip code.

Semantic Markup allows HTML documents to be broken apart into their component parts for non-human users. <header> <section> <article> and others allow software reading the HTML document to quickly find the text that is the header, the article or all the different sections in a standard way.

History API provides a standard way to alter the user’s history without resorting to the many non-standard tricks and techniques that are already in use. History is manipulated for usability such as removing confusing forwarded links or changes a user’s context without having to follow a link, etc.

Drag and Drop has been available to developers for many years through the use of JavaScript. HTML5 adds standard, native drag and drop events to the HTML itself. JavaScript is still used to support—such as when a box is dragged and dropped, JavaScript then does something.

Connectivity / Web Sockets
Traditional web browsing opens a connection to a remote server (called a socket), fetches data from that server, and then closes the socket. This is very efficient, but doesn’t allow that remote server to actively send new data such as updated sports scores or chat room text. Web Sockets allow the connection to a remote server to stay open.

Device Access / Touch events / Full Screen better support all those different devices, as mentioned above, that are used to access the web.

2D / 3D graphics: native support for OpenGL and dynamic graphics. Web based games and rich interactive experiences work without plugins.

Native Multimedia Content Support
With HTML4 and below, audio and video content had to be inserted into a document using a plugin. A plugin is a piece of software that the web browser uses to read and display content it can’t display otherwise. In the same way that a TV needs a Blu-ray player to play Blu-ray disc, or 7.1 surround sound system to play 7.1 surround audio, your web browser needed special pieces of software to play this media.

HTML5 aims to provide a standard player interface, a tag that can be used by document authors and web developers to display video and audio in much the same way that images are displayed automatically so no plugin is needed. The major advantage here is that users don’t need to have special software installed, and content creators can relying on all their readers being able to access the content they’re published.

What does this all mean? TLDR? HTML5 is not a thing, it is a collection of things that improve upon and standardize the interaction and function of the many web technologies that support the rich user experiences on the web today.

To read more:

HTML 5 on Mozilla.org

Dive Into HTML 5