HTML 5 is the next major iteration of HTML, and I know I’m excited about it. I recently added some new HTML 5 markup into dinnermint. It was a very quick and simple change, which I believe will help clear up some of the <div> soup.
The New Tags
There are some new tags in the HTML 5 specification, that I believe will lead to more semantic code. And what I mean by that is the code says what it does. You’re no longer left wondering what those <div> tags are for, when you see a tag like <header> you know what it is for.
The Layout
There are lost of tags I could have used, like aside, audio, video. I plan on playing around with those later, but for now I set up a basic layout consisting of a header, nav, article, footer like so.
<body>
<header>
<nav></nav>
</header>
<article>
</article>
<footer>
</footer>
</body>
These elements behave like typical block level elements. But are more semantic, if you aren’t sure of the benefits of this check out this post I wrote on CSS class names. If you are thinking about setting up your site, you can at least use header, footer, nav. If you do setup your site, there are a few things you should know.
- DOCTYPE One of my favorite new features of HTML 5. Now you don’t have to remember a long DOCTYPE when starting a page, just use
<!DOCTYPE HTML>and that’s it! - HTML 4 Browsers Sigh, unfortunately not all browsers are on the same page, what you’ll need to do so these elements will be rendered like plain old block elements is below.
Add this to your stylesheet, this just reminds the browsers how to display these tags.
header, section, footer,
aside, nav, article, figure {
display: block;
}Add this to the Beginning of the <body> tag. This is important for IE browsers, all it is doing is creating an element in the dom for each of the html 5 tags so it doesn’t ignore them. It’s important you place this script before any html 5 tags are used, at the top of the page.
<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video";.
split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
If you enjoyed reading this post, check out these posts <!DOCTYPE HTML>, Targeting IE6 for style.
