I've been playing around with HTML for around 10 years now and have been blown away by how much has changed in that time.
HTML is the language that structures the web (its metaphorical backbone). Since its creation in 1993 it has been a major component of the web. Every website from Facebook to your local hairdressers utilises and relies on it. With it being so essential to the web, when an update was proposed in 2004 it quickly became big news.
The version at the time (HTML4.1) hadn’t received an update in almost 4 years! With the way technology advances (doubling either computing speed or halving size every year) that is almost a millennia.
HTML at it's most simple is a way to tag content in an organised manner for display on the web. By tagging different types of content it allows for them to be affected by your web browser. If some text is tagged as a "button" it will be displayed as a button in your browser. Unfortunately there isn't a "website" tag yet to do all of the work for us. However this may soon be possible with HTML components.
There have been many versions of HTML. The latest and seemingly final iteration is HTML5. This upgrade allows us to do bigger and better things on the web.
HTML Branding
HTML5 is the first iteration of the specification to receive a real push with branding. Before HTML5 the World Wide Web Consortium (W3c) provided icons of authenticity for each of their specifications. It wasn't until release of HTML5 that a real logo was developed. Although the change was openly mocked I believe that this change in approach had a massive impact on initial uptake of HTML5.
At first the HTML5 brand was being used as the banner for all modern web development including HTML5, CSS3 and Javascript. Eventually CSS3 and Javascript received their own logo's. The separation was due mostly to outroar at HTML5 blurring the line between web technologies. This is quite succinctly and very angrily summed up by Jeremy Keith in his article Badge of shame.
HTML Changes
One of the biggest changes in HTML, with the introduction of HTML5, was the emphasis on semantically correct markup.
With this new emphasis the W3c introduces several new HTML tags to provide a
method for introducing context. Some of these new tags included the
<article> tag, the <footer> tag and the <header> tag. These tags allow
developers to convey information about what the content they are providing
to the end user is.
Unfortunately the adoption of HTML5 for screen readers has been slow. Once HTML5 in screen readers has become commonplace the new semantic tags will allow for a superior user experience.
Another goal of HTML5 is allowing the consumption of multimedia without relying on plugins. We were provided with better ways to implement Videos, audio, animations and even games.
Before the likes of the <video> element the web was awash with flash players. These plugins resulted in slower download speeds, insecurities and poor accessibility. In this area HTML5 has already had a big impact. Both Youtube and Vimeo switched to HTML5 as default in 2015. These services now only fallback flash in unsupported browsers.
More recently Twitch have released their beta for HTML5 video. Which they claim will be faster and use less of your devices battery.
Audio; although not as popular as video still received its own HTML5 revamp. The new <audio> tag provides much the same functionality as its Flash predecessors. Unfortunately this change hasn't been adopted as quickly with the likes of Spotify still using Flash to stream their audio.
Animations and games utilising the HTML5 <canvas> element have recently received boost in popularity. Games like Agar.io and Slither.io have brought the platform to a more widespread audience. The initial games based on HTML5 seemed to be geared towards developers as tech demos.
The changes laid out by HTML5 don't just introduce new tags. Some changes have had an affect on the way some existing tags are used. When you wanted to make a word standout you would use the <b> tag to make it bold. Now, however, you should only use the <b> tag if the reason the text is bold is purely stylistic if you wish to convey meaning you should use <strong>.
Browser Support
HTML5 didn’t gain much traction until 2010. Support for the new specifications was not available in most modern browsers.
Organisations like Google, Apple and Firefox have had a great impact on the modern web. Their attitudes towards web standards popularised it.
Steve Jobs made comments on the subject of Flash and stated that "new open standards created in the mobile era, such as HTML5, will win". With his support behind the specs Safari began implementing HTML5 standards into their browser.
Both Google and Apple collaborated extensively on the Webkit rendering engine. Eventually leading to the first 100/100 score on the acid3 test in 2008. However due to disagreements they parted ways.
Firefox 3.6 was the first browser all the way back in 2010 to begin implementing the standards.
Companies like Microsoft also had a large impact on the progression of HTML5. Unlike its competition in the browser market Internet Explorer was remarkably slow on the uptake.
On the HTML5 compatibility test I.E 9 scored a measly 118 points. This is less than half the points of its closest competitor (Opera) and 209 points away from the top spot (Firefox 3.6).
Unfortunately Microsoft's lackadaisical attitude towards web standards has somewhat stunted its growth. Since Internet Explorer at the time held a considerable market share, the new standards were restricted until they could catch up. Today they still lag behind but have made significant improvements with the most recent updates.
During this implementation period HTML5's specifications were in a constant state of flux. This unstable base produced some interesting results. We ended up with 3 implementations of flexbox before the specifications were finalised. Hundreds of new features and tags were invented and discarded.
HTML Components
One of the latest changes to hit the HTML world is the HTML components specification. This spec allows developers to create their own HTML components. These components can have specific meaning and functionality.
A good example of how this would be useful is when displaying a tweet. Rather than using standard HTML markup to structure a tweet like so:
<div class="tweet"
<a href="#" class="tweet__author">carl5and3</a>
<span class="tweet__message">
@wayne5and3 This is a tweet!
</span>
<span class="tweet__retweets">100</span>
<span class="tweet__favs">10</span>
</div>
You can create your own "tweet component" which could be used like so:
<tweet author="carl5and3" retweets="100" favs="10">
@wayne5and3 This is a tweet
</tweet>
Unfortunately since these specifications are so new there isn't much browser support yet. Thankfully for people who are eager to start using these tools you can use a polyfill like Polymer or X-Tag.
Finalisation and Future
On October 28th, 2014, the HTML5 specification was finalised. After a long 10 year slog to get to this point have we earned ourselves a rest? The short answer is no. HTML5 may have been finalised but according to one of the key people behind HTML5 all is not done.
The WHATWG HTML spec can now be considered a "living standard". It's more mature than any version of the HTML specification to date, so it made no sense for us to keep referring to it as merely a draft. We will no longer be following the "snapshot" model of spec development, with the occasional "call for comments", "call for implementations", and so forth. — Ian Hickson
This effectively means that new features will no longer be released under a version number. This is essential. It allows HTML to match the ever changing, ever evolving nature of the web.
Summary
In summary the evolution of HTML has had a great impact on the web as a whole. Your browser is now more secure, now that it doesn't need to rely on 3rd party plugins to provide multimedia. The emphasis on semantics will help search engines crawl your sites better and glean more meaning. Your site will also eventually provide a better experience for users using screen readers.
