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