Connect with us

Website

A history of HTML5 and how it works

Published

on

A history of HTML5 and how it works

What is HTML?

As the standard markup language used to create web pages and applications, HTML (HyperText Markup Language) is a fundamental building block of the World Wide Web. 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?

Advertisement

An HTML5 history lesson

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

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, 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 development of HTML5. W3C would work on a definitive standard of HTML5, while WHATWG would pursue development of a ‘living standard’ – a continual evolution with ongoing improvements.
  • 2014: The official HTML5 release date, according to W3C recommendations.

Why use HTML5: what’s new?

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 better chances of ranking highly in search results.

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.

Advertisement

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.

Advertisement

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.

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.

Advertisement

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.

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.

Advertisement

Which browsers support HTML5?

The latest versions of all the biggest browsers out there – like Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, and Opera  – support most 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.

I am a serial tech entrepreneur, entrepreneurial ecosystem builder and a web developer.

Continue Reading
Advertisement
Comments

Trending

© 2023 SirsteveHQ Limited. All Rights Reserved.