Below is a HTML source comparison of an XHTML page and an HTML5 page. A lot of the information on this post is based on Dive into HTML5 by Mark Pilgrim. I highly recommend you read this eBook. It’s an easy read and has interesting tidbits on the history of HTML.
This is the source code for the XHTML page. CSS is inserted in the HTML source for comparison purposes. In real life, CSS will be in it’s own separate CSS file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Blog</title>
<!-- <link rel="stylesheet" type="text/css" href="xhtml.css"> -->
<style media="screen" type="text/css">
body {margin:0 auto; width:50em}
#footer {text-align:center}
#nav li {display:inline}
#header h1 {text-align:center}
#header .tagline {text-align:center}
</style>
<link rel="alternate" type="application/rss+xml" title="My Weblog feed" href="/rss.xml" />
</head>
<body>
<div id="header">
<h1>My Blog</h1>
<p class="tagline">My personal web log</p>
<div id="nav">
<ul>
<li><a href="/home.html">home</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/contact.html">contact</a></li>
</ul>
</div>
<form id="searchform" action="/action">
<input name="q" type="text" />
<input type="submit" value="Search" />
</form>
</div>
<div class="article">
<h2>
<a href="/article.html" rel="bookmark" title="Blog Post">Blog Post</a>
</h2>
<p class="pubdate">December 7, 2010</p>
<p><span class="mark">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Cras laoreet ipsum vitae mi viverra iaculis. Sed egestas varius risus, et condimentum purus eleifend ut. Morbi sodales ultrices dui, at tristique magna malesuada non. Donec cursus faucibus interdum. Fusce non mi eros, ut sagittis lacus. Sed metus massa, eleifend et blandit nec, cursus quis justo. Nullam massa quam, imperdiet vitae facilisis in, iaculis id neque. Etiam dictum ultrices neque in fermentum. Donec sollicitudin posuere dolor, a porta risus rutrum et. Donec et vulputate metus. In vehicula, tellus vitae aliquet dignissim, risus leo convallis diam, in rutrum enim nunc suscipit nunc. Nullam venenatis rhoncus pulvinar. Sed mollis malesuada purus, non iaculis tortor pharetra non. Duis gravida magna ut leo imperdiet interdum. Maecenas porttitor blandit elit, sed accumsan libero laoreet laoreet. Praesent tincidunt tempus vestibulum. Aliquam vehicula, lectus quis blandit hendrerit, sem felis porta urna, sit amet elementum velit quam in libero. Aenean ipsum ipsum, tincidunt eget facilisis at, pulvinar at leo. Integer turpis turpis, bibendum quis pharetra nec, lacinia vitae tellus.</p>
</div>
<div id="aside">
<h2>Comments</h2>
<p>Cras consectetur tincidunt libero et ultrices. Aliquam pulvinar dictum neque, fringilla iaculis erat ultrices ac. In condimentum odio in magna congue nec mollis nulla adipiscing.</p>
</div>
<div id="footer">
<p>© 2010 TeamEXtension, Java Development & Maintenance</p>
</div>
</body>
</html>
This is the source code for the HTML5 page. If you are starting from scratch, you can use this as a template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Blog</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>< ![endif]--><!-- http://remysharp.com/2009/01/07/html5-enabling-script/ -->
<!-- <link rel="stylesheet" href="html5.css"> -->
<style media="screen">
article, aside, figure, footer, header, hgroup, nav, section {display:block}
body {margin:0 auto; width:50em}
footer {text-align:center}
nav li {display:inline}
header hgroup h1 {text-align:center}
header hgroup h2 {text-align:center}
</style>
<link rel="alternate" type="application/rss+xml" title="My Weblog feed" href="/rss.xml"></link>
</head>
<body>
<header><!-- http://www.w3.org/TR/html-markup/header.html -->
<hgroup><!-- http://www.w3.org/TR/html-markup/hgroup.html -->
<h1>My Blog</h1>
<h2>My personal web log</h2>
</hgroup>
<nav><!-- See http://www.w3.org/TR/html-markup/nav.html -->
<ul>
<li><a href="/home.html">home</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/contact.html">contact</a></li>
</ul>
</nav>
<form id="searchform" action="/action">
<input name="q" type="search" autocomplete="on" required="" placeholder="Search Blog" /><!-- http://www.w3.org/TR/html-markup/input.html -->
<input type="submit" value="Search" />
</form>
</header>
<article><!-- http://www.w3.org/TR/html-markup/article.html -->
<header>
<h1>
<a href="/article.html" rel="bookmark" title="Blog Post">Blog Post</a>
</h1>
<time datetime="2009-10-22" pubdate="">December 7, 2010</time><!-- http://www.w3.org/TR/html-markup/time.html -->
</header>
<p><mark>Lorem ipsum</mark><!-- http://www.w3.org/TR/html-markup/mark.html --> dolor sit amet, consectetur adipiscing elit. Cras laoreet ipsum vitae mi viverra iaculis. Sed egestas varius risus, et condimentum purus eleifend ut. Morbi sodales ultrices dui, at tristique magna malesuada non. Donec cursus faucibus interdum. Fusce non mi eros, ut sagittis lacus. Sed metus massa, eleifend et blandit nec, cursus quis justo. Nullam massa quam, imperdiet vitae facilisis in, iaculis id neque. Etiam dictum ultrices neque in fermentum. Donec sollicitudin posuere dolor, a porta risus rutrum et. Donec et vulputate metus. In vehicula, tellus vitae aliquet dignissim, risus leo convallis diam, in rutrum enim nunc suscipit nunc. Nullam venenatis rhoncus pulvinar. Sed mollis malesuada purus, non iaculis tortor pharetra non. Duis gravida magna ut leo imperdiet interdum. Maecenas porttitor blandit elit, sed accumsan libero laoreet laoreet. Praesent tincidunt tempus vestibulum. Aliquam vehicula, lectus quis blandit hendrerit, sem felis porta urna, sit amet elementum velit quam in libero. Aenean ipsum ipsum, tincidunt eget facilisis at, pulvinar at leo. Integer turpis turpis, bibendum quis pharetra nec, lacinia vitae tellus.</p>
</article>
<aside><!-- http://www.w3.org/TR/html-markup/aside.html -->
<h1>Comments</h1>
<p>Cras consectetur tincidunt libero et ultrices. Aliquam pulvinar dictum neque, fringilla iaculis erat ultrices ac. In condimentum odio in magna congue nec mollis nulla adipiscing.</p>
</aside>
<footer><!-- http://www.w3.org/TR/html-markup/footer.html -->
<p>© 2010 TeamEXtension, Java Development & Maintenance</p>
</footer>
</body>
</html>
These are the differences between the two pages. If you are converting HTML pages to HTML5, this can serve as a quick visual reference of what you need to change.
This example does not touch on every new HTML5 element. You can get information about canvas, video, new input type attributes, geolocation, web storage, offline data and microdata in “Dive into HTML5” or the official W3C HTML: The Markup Language Reference. Also look at Modernizr, a small JavaScript library that helps you take advantage of CSS3 and HTML5 now.