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+.
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>© 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>