
HTML: The structure of the Internet. Backbone of the Web. Without it, websites don’t exist. Over the years the Web has evolved to become highly refined and more rigid. With the advent of HTML5, we have the most clearly defined set of rules to date. Until recently, it was hard to give HTML meaning. But now, semantics – using code to give meaning to information (rather than just a tool for display/appearance) – has changed how Web developers work.
HTML is a fluid language, and in combination with cascading style sheets (CSS), we can make websites look incredible. But poor semantics makes for lackluster SEO performance and bad screen reading. Take this code for example, used as a headline for a news article on a website.
<div class="headline">
The Hello World Article
</div>
This block of code is absolutely worthless. A div tag has no semantic meaning. In other words, if a screen reader/Googlebot crawled this, it would read it simply as another word on a Web page. So let’s give this headline more meaning:
<h1>
The Hello World Article
</h1>
This is much more semantic. This will tell a screen reader/bot that the information is important: a header. H1 tags have prominence; they have meaning. This is the essence of semantic html, and HTML5 expands greatly on this. While having h1 tags is certainly nice, for the purposes of writing an article on a news page, we are still required to use a bunch of <div> tags that mean very little. With HTML5 we can make a news article that actually means something. See below:
<article>
<header>
<h1>The Hello World Article</h1>
</header>
<section>
<h2>A subheader</h2>
Some text about our article.
<aside>A side note about this article</aside>
</section>
</article>
Whew. That was a lot of code for a small little bit of text. But thanks to HTML5, we now have a block of code with semantic meaning. Before HTML5, this would have been a <div> tag in a <div> inside another <div> tag. So when a screen reader/bot sees this, it can decipher that this is an article with a clearly defined header, some additional information inside it, and is defined by sections and asides. This is just scratching the surface of what HTML5 can do for us. Let’s look at 2 of HTML5’s most powerful tags, <video> and <canvas>:
The HTML5 video tag is singlehandedly changing the way we view video on the Web. Adoption has been slow, but in time, HTML5 will phase out the archaic use of Flash for video. The use of HTML5 won’t require plugins or downloads; it’s a simple tag that only requires a link to the video. That’s it. No <object>, no <iframe>. Just <video>. And the best part about it is that even while its being adopted, it can still contain back-up measures for browsers that can’t understand it yet.
The canvas tag is a whole different beast. With the use of JavaScript and CSS, we can use the canvas to draw vector images and 3D imagery. It gives the Web something it normally couldn’t. It now has the ability to handle complex animation and applications without Flash/Flex or a java applet.
There is one drawback to HTML5, and that is the level of support across browsers. Internet Explorer 8 (and below) still lacks support, and not all HTML5 tags are recognized by SafarI, Chrome, IE9 or Firefox. Luckily we have access to JavaScript libraries, such as Modernizr, that allow browsers access to some of these powerful features of HTML5.





















