Stay Ahead of the Curve and Impress Your Friends with HTML5
What is HTML5 and how is it Different?
HTML5 is creeping up everywhere. Browser support is getting better almost daily, and many HTML5 elements are already supported. On top of that, mingle in some CSS3 and you have a cutting edge website that is forward thinking. I can almost hear the skeptics now “HTML5 is not a W3C recommendation!”. Just because it is not a recommendation doesn’t mean you can’t use it. You just have to keep your demographic in mind. I will almost guarantee, most people viewing this website are using the latest browsers. Not to mention, this is my personal site, and personally, I like to dabble in the latest toys.
Using HTML5 Right Now.
I have been working on restructuring this site for awhile now. When I started playing with the idea of a new layout, I thought of all the great things that are being done with the canvas tag, and decided to code my site in HTML5. The only problems that I encountered were display issues, so I had to position nearly everything with CSS. Here is what the landing page currently looks look like in Firefox 3.0.11 and Chrome 3.0. I have not looked at it in Safari, but I assume it is quite similar to Chrome, given that they are both built with webkit. I’ll get to IE later.
The screenshot above is fully coded and almost ready to go live, except for the fact the I’m extending the top image and and removing the boxes parallel to it. I decided to use some advanced CSS3 techniques to render the rounded corners. And yet again, IE gives me problems. In this case I ignore IE, so IE users see square corners, big deal. In the end I achieved my goal, 90 percent of the page is HTML5, and I’ll explain that now.
HTML5 Elements and the Proper DOCTYPE
The main HTML5 elements used here are nav, section, header, and footer. Before I get into that, the DOCTYPE is worth mentioning. With HTML5 we go with a simple <!DOCTYPE HTML>. Make sure to add your character encoding and you’re ready to rock.
The nav element was pretty straight forward. Just wrap your navigation in nav tags.
<nav>
<ul>
<li><a href="/blog/" title="Random Blurbs about Web Development">blog</a></li>
<li><a href="/code/" title="Code That has Been Posted for Free Download">code</a></li>
<li><a href="/contact/" title="Give me a Shout">contact</a></li>
<li><a href="/me/" title="Just Me">me</a></li>
</ul>
</nav>
Next up, is the section tag, also pretty straight forward. I will skip over the large image section because that is changing anyway. (If your curious, the large “I Build Websites” section is just that, a section, and I used the section tag) Now for the columns underneath. Considering this is also a section, I used the section tag again which is very similar to a div. I actually nested div’s inside of it to hold the elements, I’m sure there is a better way to do this, but I’m fairly new to HTML5, so I settled for it.
» signifies continued line
<section id="bottom_boxes">
<div id="latest_blog_post">
<header>Latest Blog Posts</header>
<img src="images/blog_talk_bubble.png" width="74px" height="67px" alt="Blog Posts" />
<h3>New Design Launched</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
</p>
<h3>Browser Wars</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
</p>
</div>
<div id="projects">
<header>Projects</header>
<div id="projects_background">
<h3>New Project</h3>
<img src="images/project_image.png" width="170px" height="179px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
</p>
</div>
</div>
<div id="twitter">
<header>Twitter</header>
<img id="twitter_bird" src="mages/twitter_bird.png" width="89px" height="91px" alt="Twitter" />
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/scottradcliff" id="twitter-link" »
style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" »
src="http://twitter.com/statuses/user_timeline/scottradcliff.json?callback=twitterCallback2&count=5"> »
</script>
</div>
</section>
As you can see I nested the header tag inside each div to describe the heading. I think using header fits a little nicer for the small headings versus any of the h1 – h6 tags. But I thought an h3 tag fit better under the header tag. Just seems to flow better to me.
Lastly, I used the footer tag. While trying to get a better looking footer for the page, I decided to go with a three column system that allows a reader to see what I’m up to. The section and header tags fit rather well.
<footer>
<section id="feed_your_brain">
<header>Feed Your Brain</header>
<ul>
<a href="#"><li>15 Best WordPress Plugins</li></a>
<a href="#"<li>Getting the Most out of Zend</li></a>
<a href="#"><li>Color and Typography in Web Design</li></a>
<a href="#"><li>Why Twitter Rules Social Media</li></a>
</ul>
</section>
<section id="recommended_reading">
<header>Recommended Reading</header>
<ul>
<li><a href="#">Don't Make Me Think</a></li>
<li><a href="#">JavaScript: The Definitive Guide</a></li>
<li><a href="#">Design Basics Index</a></li>
</ul>
</section>
<section id="events_and_networking">
<header>Events and Networking</header>
<ul>
<li>Social Media Breakfast</li>
<li>Module 09</li>
<li>UX Day at the MudHens</li>
</ul>
</section>
</footer>
I mentioned before that all the tags were recognized in Firefox and Chrome. All that needed to be done was some positioning, and even then I am not sure if that is due to my inexperience with the display styles of the HTML5 elements. This was all pretty new to me, and even since I started this, Opera released a new version of their browser that supports all kinds of HTML5 elements.
Yea, Internet Explorer Still Sucks
So how do I deal with IE? I mean besides beating my fists on the desk and screaming “I hate you!”. According to OrderedList.com, IE needs some persuasion. I will use JavaScript to register the elements that IE doesn’t recognize, and then position them accordingly. I’ll try to post an update on the progress as I get closer to launch.
The code posted above is incomplete. You may notice that some of the links are incomplete, that is just while I tweak the site before completion.
Comments
By Scott Radcliff on 07/11/2009
I noticed after I had written the code and posted about it, that it was due for some refactoring. I think I may be able to simplify even further. Eventually, I will get some free time to play a bit more.
I sure would like to see what you are working on when you are finished.
By layout on 12/17/2009
This is exactly what I was looking for. Thanks for sharing this great article!
By Warren Parsons on 06/30/2009
Based on my understanding of the
headerelement so far, I think your use of it in “Latest Blog Posts” can go one step further and include a semantic Hn to denote the text as a heading.What I’ve read so far indicates that the
headeris designed to enclose a section header (as distinct form heading) rather than to wrap text directly. Sort of adivwith semantic meaning. I personally don’t drop text directly into a div without additional semantic markup around that text.Very nice writeup of your process here. I’m also working on a new site using HTML5, and it’s very helpful to see how my peers are approaching it.