HTML5 Semantic Tags

Over the weekend, I was reading Mark Pilgrim's great book on HTML5 - and when I got to the part about the semantic tags, I thought it might be worth a quick mention. In case you've missed out on HTML5 in general (and don't want to take the time to read that book I linked above), the idea behind semantic tags is that many sites use div blocks to mark out the same kinds of content, over and over. Content like headers, footers, and nav bars. Changing straight tags to tags like , , and is granting these tags semantic meaning, hence the name - semantic tags. Semantic tags are a great idea. They offer a lot advantages over plain vanilla divs, especially for screen readers... but support in IE is pretty broken... The essential problem is this: unlike all other major browsers, IE doesn't know how to style unknown tags. So the following code won't work:   .border { border: solid black; } ... test3 Ah, I hear the more informed folks in the audience say, there exists a library to fix this problem: the HTML5 Shiv. You can use it like so:   This simple script will allow styles to be placed on unknown tags in IE... So, that's a good start, but there are a few problems with it. For one thing, it relies on JavaScript, so if JavaScript is disabled, your styling will fail catastrophically. Similarly, applying print styles may not work, since JavaScript won't necessarily b...

Date: February, 08 2010
Url: http://www.java.net/blog/driscoll/archive/2010/02/08/html5-semantic-tags

Others News