What are the key differences between HTML4 and HTML5 draft?
HTML5 has several goals which differentiate it from HTML4.
The primary one is consistent, defined error handling. As you know, HTML purposely supports ‘tag soup’, or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren’t written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don’t, then many pages won’t display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).
So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.
The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-builtin sql database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don’t have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).
There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics – <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing – instead you’ll have an obvious </header>, or </article>, making the structure of your document much more intuitive.
SEO Differences Between HTML5 v HTML4 Versions
A Typical Web Page In HTML 4 Code:
<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<div id=”page”>
<div id=”header”>
<h1><a href=”/blog/”>Hobo Web</a></h1>
</div>
<div id=”container”>
<div id=”center”>
<div id=”post-102″>
<h2><a href=”/test-page/”>
Test Page 1</a></h2> <div>
<p>Article Text here</p>
</div>
</div>
<div id=”post-101″>
<h2><a href=”/test2/”>
Test 2</a></h2>
<div>
<p>Article 2 Text here</p>
</div>
</div>
</div>
<div>
<div>
<a href=”/blog/page/2/”>« Previous Entries</a>
</div>
<div></div>
</div>
</div>
<div id=”right”>
<ul id=”sidebar”>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>
<li><a href=”/blog/todo-list/”>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href=’/blog/2008/04/’>April 2008</a></li>
<li><a href=’/blog/2008/03/’>March 2008</a></li>
<li><a href=’/blog/2008/02/’>February 2008</a></li>
<li><a href=’/blog/2008/01/’>January 2008</a></li>
</ul>
</li>
</ul>
</div>
<div id=”footer”><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>
</body>
</html>
…here’s the same page, with differences clear, in the W3C’s new incarnation.
An Example of a Typical Page in HTML 5 Code:
<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<header>
<h1><a href=”http://blog/”>Hobo Web</a></h1>
</header>
<section>
<article>
<h2><a href=”/test-page/”>
Test Page 1</a></h2> <p>Article Text here</p>
</article>
<article>
<h2><a href=”/test2/”>
Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>
<a href=”/blog/page/2/”>« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>
<li><a href=”/blog/todo-list/”>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href=’/blog/2008/04/’>April 2008</a></li>
<li><a href=’/blog/2008/03/’>March 2008</a></li>
<li><a href=’/blog/2008/02/’>February 2008</a></li>
<li><a href=’/blog/2008/01/’>January 2008</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>
</html>
HTML 5 Notes
Discover other new features, and learn more about the future of HTML.
HTML 5 introduces new elements to HTML for the first time since the 1990′s. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.
HTML 5 defines the fifth major revision of the core language of the World Wide Web – HTML – from the W3C (World Wide Web Consortium). Also called Web Applications 1.0 – there are still no no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table.
HTML 5 adds new elements to specifically identify each of these common constructs:
section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
header: The page header shown on the page; not the same as the head element
footer: The page footer where the fine print goes; the signature in an e-mail message
nav: A collection of links to other pages
article: An independent entry in a blog, magazine, compendium, and so forth.
