HTML5

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<body>
	<video src="//www.html.am/resources/countdown.ogg" width="170" height="85" controls>
		<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
	</video>
</body>
</html>

Above is an example of the HTML5 <video> element. This is one example of the many elements that were introduced in HTML5 (HTML version 5).

Some of the new elements provide new functionality, such as <video>, <audio>, <canvas>, <meter>, and <progress>.

Other elements provide semantics for the document. These include <article>, <aside>, <header>, <footer>, <nav>, <time> and more.

See the full list of HTML tags to see which tags were introduced in HTML5.

Semantics

One significant difference between HTML5 and previous versions is HTML5's emphasis on semantics. Semantic HTML is the use of HTML markup to provide meaning of the information in an HTML document rather than merely define its presentation.

For example, earlier versions of HTML include a <font> element to determine the font family, a <big> element to define large text, a <center> tag for alignment purposes, and other presentational elements. These elements are obsolete in HTML5 because they don't provide meaning for their contents. They are not semantical elements. They are simply presentation elements.

HTML5 does not include elements purely for presentation. This is because presentation is the domain of Cascading Style Sheets (CSS). Therefore, we use HTML to provide structure and meaning, and CSS to define how those elements are presented. In other words, if you want to specify a font family, use CSS. If you want to specify large text, use CSS. And if you want to define an element's alignment, use CSS.

Of course, having said this, browsers will always present elements in a particular in the absence of any style sheets. For example, when you specify a list, the default presentation will be either bullet points (for an unordered list) or numbers (for an ordered list). But the most important thing is that you have provided meaning by specifying either an unordered list or an ordered list. That way, browsers (and other software) can make use of your HTML markup by presenting your list in a particular way—and this can often be dictated by the context in which the information is being presented.

Different Devices & Media

One of the things about the web is that, any given HTML document could be viewed in any number of contexts. More precisely, any given HTML element could be viewed in any number of contexts.

Take for example, an HTML table. This could be presented on a large desktop computer, a small desktop computer, a large laptop, a small laptop, a tablet, or a smartphone. Depending on your table, it may or may not render as you expect it across all these devices. But it doesn't stop there. It could also be presented on a Text-to-Speech reader—especially if your visitor has a vision impairment. Or it could be that your visitor prefers to listen to web documents rather than read (perhaps to give her eyes a break, or it could be that your web page is in a foreign language to them and they find it easier to listen than to read). It could also be that some of your visitors like to print out your web page to paper so that they can read later (or use it as a reference). What ever the scenario, each of these cases will present your HTML table in a different manner. Imagine if you had to create different HTML markup for each of these scenarios?

This is an important factor when considering the benefits of using HTML for semantics, and CSS for presentation. You simply write the HTML document once, then use a different style sheet for each device and different media that you expect the document to presented within.

Redefined Elements

Some elements were redefined in HTML5 with a new meaning. Rather than make these elements obsolete, the decision was made to redefine them with a new purpose instead.

For example, in previous versions of HTML the <small> element was used to present small text (without conveying any meaning). In HTML5 however, it represents side comments, such as small print (i.e. the part of a document that contains disclaimers, caveats, or legal restrictions, such as copyrights).

Another example is the <i> element. Previously this element was used to define italic text (without conveying any meaning). Now it represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose. To define italic text without conveying any extra meaning, one should use CSS (font-style:italic).

HTML Versions & Standards

HTML has been through many versions, each version providing new elements from the previous version, while also deprecating others and making other elements obsolete. Since HTML 3, each version of HTML has been released by the W3C (World Wide Web Consortium). The W3C is an international community that develops open standards to ensure the long-term growth of the Web.

However, while the W3C was working on HTML5, another group called WHATWG (Web Hypertext Application Technology Working Group) was working on its own version of HTML.

Fortunately, the two "versions" of HTML are identical in many ways, and generally only differ in minor ways (such as an extra attribute or element here and there).

However, one significant difference is regarding their approach. W3C releases HTML specifications as "versions". These versions are essentially a "snapshot" of the specifications at a particular time (i.e. the date it becomes an official recommendation). WHATWG on the other hand, uses what it refers to as a Living Standard. This is because their specifications for HTML are constantly changing. They don't use version numbers, as it is all simply "HTML".

Generally speaking, many (if not most) changes to the WHATWG Living Standard are also added to the draft copy of next version of the W3C HTML specifications. This isn't always the case though, as the two groups don't always agree.

Add to this the fact that different browsers have varying levels of support for HTML (not to mention their own proprietary elements or functionality) and you'll realize that not every HTML element works as expected across all browsers. Fortunately, these days browser manufacturers are mindful of this issue and generally try to stick to the standards. This is why the standards are so important. By having an HTML standard (such as the W3C and WHATWG specifications), different browser manufacturers can strive to align their browser functionality to that which is specified by the standards.