W3CI’m continuing to study up a bit on the new version of HTML from the W3C - HTML 5. Here’s some research what a page written in HTML 4 will look like rewritten in the new HTML 5.

The most obvious question to ask is;

what are the main differences between HTML 5 & HTML 4?

For example, visualise a simple blog front page with a header at the top, a footer at the bottom, a couple of entries, a navigation section, and a sidebar, as shown in the following code;

A Typical Web Page In HTML 4 

<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" class="column">
<div class="post" id="post-102">
<h2><a href="/test-page/">
Test Page 1</a></h2>        <div class="entry">
<p>Article Text here</p>
</div>
</div>
<div class="post" id="post-101">
<h2><a href="/test2/">
Test 2</a></h2>
<div class="entry">
<p>Article 2 Text here</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<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;

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

Looks exciting (although I am hardly an expert) - a real chance to clean up your website designs.

Learn More About HTML5

2008-01-22: The W3C published an early draft of HTML 5, a major revision of the markup language for the Web. The HTML Working Group is creating HTML 5 to be the open, royalty-free specification for rich Web content and Web applications.

“HTML is of course a very important standard,” said Tim Berners-Lee, author of the first version of HTML and W3C Director. “I am glad to see that the community of developers, including browser vendors, is working together to create the best possible path for the Web.”

Discover other new features, read the press release, and learn more about the future of HTML.

HTML 5 Notes

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

Thanks for visiting the Hobo SEO Blog - please feel free to comment on this article! Why not subscribe to our Feed for free search engine optimisation tips?