HTML and CSS Reference
In-Depth Information
When to use <div> elements
As you can see from the blog markup example, the new structural elements can replace
many of the non-semantic container div s that you may have grown accustomed to
using. But div still has a place at the HTML5 party.
If you ever need a containing element strictly for style purposes , div is the element to
use. You don't want to use one of the new structural elements just to serve as a hook
for your CSS. That is not what semantic markup is about.
Just remember to focus on your content and avoid unnecessary use of div , such as when
another element is more semantic. For example, if you have a paragraph of text, use
the p element, not div . Both give you block-level formatting, but p is more semantic for
that particular purpose.
Styling structural elements
All of today's browsers render the content contained by these new elements. However,
some browsers don't recognize them and, as such, treat them like inline elements. This
default rendering can cause some serious problems with styling.
Fortunately, it doesn't take much to fix. The current cast of browsers simply needs to
be told to treat the elements as block-level elements:
header, footer, nav, article, aside, section {
display: block;
}
With that single CSS declaration, you can happily style the structural elements—well,
almost. In versions of Internet Explorer (IE) prior to IE9 you have to add a bit of Java-
Script to your document so IE recognizes the elements and allows you to style them:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
</script>
If you want cooperation from an earlier version of IE, any time you add a new HTML5
element to your document you'll need to add the corresponding document.createEle
ment . See Chapter 2 for a more detailed discussion of using JavaScript with IE.
See Also
Script Junkie's article “Using HTML5's New Semantic Tags Today” at http://msdn.mi
crosoft.com/en-us/scriptjunkie/gg454786 .
 
Search WWH ::




Custom Search