HTML5 in all its glory…0

November 19th, 2009 by Freddy Kelly posted in Development

Touching on Gareths article earlier this month, “The Value of Website Optimisation.”, I thought it would be cool to give a full example of how a site might be coded, taking advantage of all that HTML5 has to offer.

The following example was posted on the CSS Tricks blog:

Beautiful HTML Example

Beautiful HTML Example

Now, imagine the same example built using current methods:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />

<title>HTML Test Document</title>
</head>

<body id="home">

<div id="header">
	<a id="logo" href="/">Site Title</a>
	<div id="slogan">web craftsman, blogger, author, speaker</div>

	<div id="nav">
		<?php include("inc/main-menu.php"); ?>
	</div>
</div><!--/header-->

<div class="section container">

	<div class="article">
		<h1>Hipsters</h1>
		<img src="../" alt="Hipster and Company" height="120" width="570" />
		<p>...</p>
		<p>...</p>
	</div><!--/article-->

</div>

<div id="sidebar">
	<h3>My Major Projects</h3>
	<dl>
		<dt><a href="...">Are My Sites Up?</a></dt>
		<dd>Monitor your sites</dd>
		<dt><a href="...">Are My Sites Up?</a></dt>
		<dd>Monitor your sites</dd>
		<dt><a href="...">Are My Sites Up?</a></dt>
		<dd>Monitor your sites</dd>
	</dl>
</div><!--/sidebar-->

<div id="footer" class="container">

</div><!--/footer-->
</body>
</html>

etc. etc..

By using tags designed for the needs of modern websites, the amount of code required is cut massively.

Read more about HTML5 here. If your company needs quality, standards-compliant web design, take a look at our website.

Leave a Reply