A history of HTML5 and how it works

Katie Collins -

HTML made a transition into HTML5 way back in 2008. While it took several years to roll out, what came with it was a whole host of benefits from cleaner code structure to offline browsing.

But where did it all begin and how did the HTML5 roll-out progress? In today’s post, we’ll discuss the history of HTML5, how HTML5 works, what’s new with HTML5, its supported browsers and how you can get started with coding.

What is HTML?

Not to be confused with programming and scripting languages like Perl, PHP or JavaScript, HTML (HyperText Markup Language) is a markup language used to create web pages and applications. HTML is also a fundamental building block of the World Wide Web (www). When you build a website – even if it’s through a Website Builder rather than the code itself – your site will still function because of HTML.

What is HTML 5?

Now we know what HTML is, let’s take a closer look at HTML 5. Together with CSS and JavaScript, HTML code is interpreted by web browsers to render pages. Individual HTML elements are defined by tags within angle brackets (< and >) to determine the content and layout of a web page.

The latest iteration of HTML is HTML5, which introduced a new generation of features and standards for web creators. But HTML5 has been running wild for a good few years now, so how exactly has it shaken things up?

What uses HTML5?

Besides modern-day web browsers and builders, WordPress Themes make use of HTML5, alongside Template Tags, PHP and even JavaScript – depending on the complexity needs of the user.

When was HTML5 released?

Rather than a single revolutionary package, HTML 5 is more of a collection of evolutionary features. This means that there is no specific answer to the question 'when was HTML5 released?' Instead, it has been around in some form since as far back as 2008, even though its official specification wasn’t finalised until 2014.

The history of HTML5 explained

As far as HTML5 vs HTML goes, unlike the latter, HTML5 has been developed by two separate groups: the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). To understand the advancements of HTML5, it's helpful to have a brief overview of the general HTML timeline:

1991–1999

HTML was created by web legend Tim Berners-Lee in 1991, and HTML versions 1–4 were developed throughout the 1990s by W3C. In these early days of widespread internet use, HTML efficiently displays the vast majority of web content, since at this time it largely consists of static, non-interactive sites.

2000

W3C recommends XHTML 1.0 – an XML-based markup language that mirrors/extends HTML. Previous versions of HTML are now showing their age, struggling to handle the latest generation of multimedia, and interactive sites. To get the best results, developers are resorting to third-party plugins.

2004

Development of HTML is closed by W3C, who instead decide to focus on XHTML. WHATWG is formed to develop HTML further, with the aim of reflecting the modern dynamic web, while keeping backwards compatibility with existing HTML code.

2004–2006

WHATWG gains support from major web browser developers. In 2006, W3C also announced its support for the project.

2008

The first public draft of HTML5 is released by WHATWG.

2012

W3C and WHATWG decide to separate the development of HTML5. W3C would work on a definitive standard of HTML5, while WHATWG would pursue the development of a ‘living standard’ – a continual evolution with ongoing improvements.

2014

The official HTML5 year of release, according to W3C recommendations.

Why use HTML5: what's new?

There are absolutely tons of new features with HTML5 that now expand developer’s capabilities to embed and code in ways that are far more efficient. Here are some of the notable HTML5 additions since the upgrade:

New semantic elements

HTML5 offers a host of new features including special elements for semantic labelling such as:

  • <section>
  • <nav>
  • <article>
  • <aside>
  • <header>
  • <footer>
  • <main>

These define the type of content associated with each element. This makes structuring content more efficient and helps search engines crawl the website, meaning a well-structured HTML5 site has a better chance of ranking highly in search results. Not sure how search rankings work? Read our beginner’s guide to SEO to find out more about how it can help your site and/or business rank high on search engines.

WebM video format

Adding multimedia elements is also simplified with <audio> and <video> tags, and a wide selection of new application program interfaces (APIs) lets developers easily integrate a huge range of functionality into HTML5 sites. One of the big advantages of HTML5 is that it doesn’t rely on proprietary third-party plugins to create complex and powerful web projects.

Form features

With HTML5’s expanded form options, you can now create smarter forms. As well as all the standard form input types, you get so much more from HTML5, including:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • URL

It’s now also possible to add sliders, date pickers, placeholder text, and validation through a new placeholder attribute – but we’ll go into more detail about this later.

Placeholder attribute

Let’s touch on it right now. HTML5 introduced a placeholder attribute, which can be used along with the <input> element to give users a hint for data entry fields. This can help you create better forms. But, be aware that you can’t use this attribute with assistive technologies.

Local web storage

With previous HTML versions, data is stored locally via cookies. HTML5 uses web storage instead of cookies, thanks to a scripting API. This means that data can still be stored locally, but is done so in much larger quantities.

New APIs

We’ve touched on a couple of APIs that HTML5 has brought about. Here is a list of other possible API integrations using HTML5 that have allowed for more complex functions:

  • Geolocation
  • Drag and drop
  • Web storage
  • Web Workers
  • Web sockets
  • History
  • 2D canvas

Server-sent events

A server-sent event is when a web page receives updated data from a server automatically. While this was possible with HTML4, the webpage would still have to “ask” for this data.

The difference with HTML5 is that it supports one-way server-sent events, which is where data is continuously sent from a server to the browser. This is incredibly useful for Twitter feeds, news feeds, stock prices, etc. – anything that needs constant updating.

Scalable Vector Graphics

Scalable Vector Graphics (SVG) can be directly embedded into HTML5 pages with the <svg> tag. SVG provides capabilities for animations, interactivity, and graphics that scale smoothly to any display size.

MathML

Great news for mathematicians – MathML is a markup language for describing mathematical expressions. The <math> element in HTML5 provides native support for displaying maths formulas and notations for illustrative and educational purposes.

Did HTML5 kill Flash?

It’s often said that ‘HTML5 replaced Flash’, but did it really? HTML5 is sometimes compared to Adobe Flash, but the truth is it’s not a direct equivalent. For multimedia content on par with Flash, HTML5 needs to work closely with CSS and JavaScript. That said, HTML5 is an alternative to Adobe’s platform in this context, and has had a huge take-up amongst web developers when it comes to online multimedia.

How to use HTML5

If you’re already familiar with older HTML versions, HTML5 isn’t hard to learn at all. HTML5 is fully backwards-compatible, meaning all your old code should work with the new features. Getting started is as simple as changing the doctype on the first line of each HTML page. You probably don’t need to worry about your site breaking, since obsolete elements should still render in HTML5 – but now you have access to a whole new range of elements.

Here is a breakdown of how to code in HTML5. As you’ll see, there isn’t too much of a difference compared to HTML:

  1. Declare your document as you usually would (<!DOCTYPE html>) – you won’t need to add the 5 at the end of HTML
  2. Define your root element (<html>) – be sure to add a </html> in a new line
  3. It’s best practice to define your language attribute after opening your html tag, (e.g. html lang="en" for English), as it enhances website accessibility
  4. You’ll also want to add the manifest attribute after your language attribute (which should look like this: <html lang=”en” manifest="/cache.appcache"> , as this will allow your browser to load in the event that internet connection may be lost
  5. As with HTML, create an open and closed head under the open html line (<head>...</head>), which will house metadata not visible on the front end.
  6. Then you’re ready to code as you usually would
  7. Once you’re done, save your file as a .html file as usual (again, no need to append with “5”).

What can HTML5 do?

So who uses HTML5? As the latest web standard, HTML5 is in widespread use, from huge corporate sites to student web projects, if you’re on a modern, well-designed website, chances are it takes advantage of HTML5 features.

Ever since its first public draft in 2008, web developers and designers have been finding ways to innovate with HTML5. From mixing flat elements with animation and 3D effects, to dynamically pulling content from various sources, HTML5 has enabled creations that would’ve been hard to imagine just a few years ago. Creative Bloq has put together 23 amazing HTML examples to show off what HTML5 can do.

Which browsers support HTML5?

The latest versions of all the biggest browsers out there – like:

  • Microsoft Edge
  • Google Chrome
  • Apple Safari
  • Mozilla Firefox
  • Opera

Most of these support HTML5 features, but not all of them. Opera and Google Chrome are currently the most compatible with HTML5, with Safari and Firefox coming next. Although Internet Explorer is considered the least compatible, it does partially or fully support most features of HTML5.

If you’re building websites with HTML5, you’ll find the perfect environment at Fasthosts. Whether you go for Web Hosting, a Dedicated Server or one of our highly flexible cloud servers, we give you everything you need to create cutting-edge online projects.