HTML5 - does this code make sense sematically?

Associate
Joined
10 Jul 2006
Posts
2,423
I usually follow the precedence that if it views correctly across your target browsers then its fine but I was redesigning my website and thought I'd do it in HTML5 (why not eh?).

Anyways, I have read into the specification of HTML5 and I think my website makes sense semantically but just wanted to be sure I am using the new tags right and haven't missed any that I should/shouldn't be using.

Anyways, here is the code:

EDIT: Also has it got the point where we can ignore IE6 now? The only reason I ask is that I am using CSS selectors more and more now (as apposed to simple id selectors) that are only supported in IE7+.

Code:
<!doctype html>
<html lang="en" class="html5">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Portfolio | Ben Barron</title>
	<meta name="description" content="">
	<meta name="author" content="Ben Barron">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/appleicon.png">
	<link rel="stylesheet" href="css/style.css?v=1">
	<script src="js/html5.js"></script>
</head>
<body>
	<header>
		<h1>Ben Barron <span class="grey">Portfolio</span></h1> 
		<nav> 
			<ul> 
				<li><a href="/" title="Home page including latest updates.">Home</a></li> 
				<li><a href="/webdesign" title="Web design and development portfolio.">Web Design + Development</a></li> 
				<li><a href="/applications" title="Applications portfolio.">Applications</a></li> 
				<li><a href="/cv" title="Download my CV." target="_blank">Download CV</a></li>
				<li><a href="/contact" title="Contact me.">Contact Me</a></li> 
			</ul>
			<ul> 
				<li><a href="/twitter" title="Twitter page." id="atwit">Twitter</a></li> 
				<li><a href="/linkedin" title="LinkedIn profile." id="alin">LinkedIn</a></li> 
				<li><a href="/facebook" title="Facebook profile." id="afb">Facebook</a></li> 
				<li><a href="/github" title="GitHub page." id="agit">GitHub</a></li> 
			</ul>
		</nav>
	</header>
	<div id="main">
		<section id="welcome">
			<h2>Welcome to my portfolio...</h2>
			<p>...I am currently in my 3<sup>rd</sup> year of a Computer Science BSc Hons degree at the University of Bristol.</p>
		</section>
		<section id="twit">
			<h2>Latest tweets</h2>
			<p>
				Recently moved webservers...download links on the applications page now working again
				<time pubdate="2011-09-02">2 Sep</time>
			</p>
			<p>
				Guess I will have to find another way of getting the remote to hibernate...can't do that until I have my remote which is in Bristol atm!
				<time pubdate="2011-08-09">9 Aug</time>
			</p>
			<p>
				Try the same with this: http://goo.gl/6lNzp (You should notice the file name is different too I hope)
				<time pubdate="2011-08-05">5 Aug</time>
			</p>
			<p>
				The last version has hibernation confirmed to be working if anyone is interested. Still has bugs though
				<time pubdate="2011-08-05">5 Aug</time>
			</p>
			<p>
				New version to try to see if we can get hibernation to work 
				<time pubdate="2011-08-04">4 Aug</time>
			</p>
		</section>
	</div>
	<footer>
		<p>&copy; 2011 Ben Barron.</p>
		<nav>
			<div>
				<h3>Web Design</h3>
				<ul>
					<li><a href="/portfolio/previous" title="Previous Portfolio design preview." target="_blank">Previous Portfolio</a></li> 
					<li><a href="http://www.rmbarron.com" title="R M Barron design preview." target="_blank">R M Barron</a></li> 
					<li><a href="http://www.stoneleighmethodist.org.uk/" title="Stoneleigh Methodist Church design preview." target="_blank">Stoneleigh Methodist</a></li> 
					<li><a href="/portfolio/imagelocker" title="Image Locker design preview." target="_blank">Image Locker</a></li> 
				</ul>
			</div>
			<div>
				<h3>Applications</h3>
				<ul> 
					<li><a href="/applications#ps3bluemote" title="PS3BluMote application page.">PS3BluMote</a></li>
					<li><a href="/applications#ulitebox" title="uLiteBox script page.">uLitebox</a></li>
					<li><a href="/doante" title="Donate for continued application development." target="_blank">Donate</a></li>
				</ul>
			</div>
			<div>
				<h3>Social</h3>
				<ul> 
					<li><a href="/twitter" title="Twitter page.">Twitter</a></li> 
					<li><a href="/linkedin" title="LinkedIn profile.">LinkedIn</a></li> 
					<li><a href="/facebook" title="Facebook profile.">Facebook</a></li> 
					<li><a href="/github" title="GitHub page.">GitHub</a></li>
					<li><a href="/contact" title="Contact me.">Contact Me</a></li> 
				</ul>
			</div>
		</nav>
	</footer>	
	<script>
		var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
		(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
		g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
		s.parentNode.insertBefore(g,s)}(document,'script'));
	</script>
</body>
</html>
 
Looks good to me, although my only beef is with...

Code:
<span [b]class="grey"[/b]>
That's a presentational class name, not a semantic one. Maybe change that to class to 'highlight'. You can then use this same classname as required in different locations.
 
Back
Top Bottom