A somewhat obvious question for the previous article on creating CSS3 sprites is “does any of this change in HTML5?” The answer is yes: potentially, it becomes simpler.

If we chose to use a sprite panel in HTML5 we would add the <nav> element to indicate to the browser that this is major navigation section. You could, in theory, then remove the <ul> structure from around the links, and just leave it as a series of tags:

1. <nav class="sprites"
2. <a href="#"><img src="sprite-panel.png" alt="RSS" /></a>
3. <a href="#"><img src="sprite-panel.png" alt="About" /></a>
4. <a href="#"><img src="sprite-panel.png" alt="Book Mode" /></a>
5. </nav>

This means that our CSS would also become somewhat simpler:

1. nav.sprites { height: 27px; }
2. nav.sprites img { position: absolute; opacity: 0.4; width: 150px; height: 76px;
3. -webkit-transition: all 0.5s linear;
4. -moz-transition: all 0.5s linear;
5. transition: all 0.5s linear; }
6. nav.sprites a:hover img { opacity: 1; }
7. img[alt="RSS"] { clip: rect(54px,21px,76px,0px); }
8. img[alt="About"] { clip: rect(54px,47px,76px,25px); }
9. img[alt="Book Mode"] { clip: rect(54px,75px,76px,48px); }

Personally I remain somewhat on the fence about removing the list structure in <nav> elements. I would never remove the <ul> and <li> elements if the navigation referred to a series of pages that were related to each other, but for something like the example shown, where we are referring to a collection of largely unrelated links, I can see the rationale in doing so.