HTML5 Nav Icon styling

Get Started
1

Hey Guys,

I’m looking at some html5 spec and I’m wondering how to replace navigation menu items with icons (more specifically ‘home’ with a generic home icon) I know that traditionally you could do the following;

<div id=“nav-container”>
<ul id=“nav”>
<li><a href=“#” class=“home”>Home<span></span></a></li>
<li><a href=“#” class=“about”>About<span></span></a></li>
<li><a href=“#” class=“contact”>Contact<span></span></a></li>
</ul>
</div>

Linking the icon image in the CSS;

ul#nav li a.home {
background-image: url(…/images/nav-home.png);
height: 37px;
width: 118px;
top: 100px;
left: 80px;
}

What would be the leanest way to do this using the html5 nav tag?

<nav>
<a href=“#”>Home</a>
<a href=“#”>About</a>
<a href=“#”>Contact</a>
</nav>

i.e. what would css look like?

2

I’ll be interested to know what others would say too. I think this would make sense to me:

nav .linkOne {}
nav .linkOne a {}

Then apply the class to the li tags within the list. If you were using a sprite technique though, you would define that in the UL. But just on the matter of semantics, I would avoid using specific naming like “about” or “home” because what if those links change in a redesign? You would have to edit the content of the <li> all those pages, rather than swapping an image. Then again, if the names change, the hrefs might change too, so you would have to edit that content too anyway. I just stick to linkOne, linkTwo to make it simple.

3

HTML5 has nothing to do with this.

The nav tag does nothing special here. It’s just extra markup you’d only be adding to your navigation lists to make browsers know it’s a navigation list, as opposed to some other kind of list. I personally prefer
<ul id=“mainMenu” role=“navigation”>
since today this does exactly the same thing without extra tags (in the future maybe other technologies won’t read the role and will only look for actual <nav> tags).

I would never recommend actually “replacing” real meaningful text with an icon.

You cannot guarantee users actually see icons. They may be blind. Images may not load. What you think looks very clearly like a house-meaning-“home” might really not to a user (at least “home” has a large precedence, being available in graphical browsers for years, but I suspect “Home” isn’t the only link you’d like to iconise).

I would avoid using specific naming like “about” or “home” because what if those links change in a redesign?

I don’t understand this? If you have an “about” icon (wth would that look like, anyway?), doesn’t it depend on being on the “about” link? If the author is using image-replacement, these images aren’t decoration, but content. So they do matter what they are linked to. If the links change in a redesign, don’t the icons have to change as well? You wouldn’t want a “home” icon moved to representing the “products” link would you?

But I may be misunderstanding the OP here. Image-replacement and/or sprites is a CSS thing, and while there are quite a few techniques for it floating around, I don’t know of any that have changed due to the HTML5 spec appearing.

What would be the leanest way to do this using the html5 nav tag?

<nav>
<a href=“#”>Home</a>
<a href=“#”>About</a>
<a href=“#”>Contact</a>
</nav>

I still believe a list of navigation links belong in a list, myself…

i.e. what would css look like?

The same.

Well you had:
ul#nav li a.home {

Which could have just been
#nav .home {

but so assuming you want to have a nav tag with a bunch of loose links inside, you’d still need to differentiate which anchor gets the home icon
<nav>
<a href=“#” class=“home”>link</a>
…

so you’d still have at least
nav .home {
blah blah

in your CSS. This means the CSS parser will look for anything with a class of “home” that is a descendant of any element called “nav”. Chances are you’ll have an id or a class on that nav element anyway for styling it on the page, so if you had
<nav id=“main”>
<a href=“#” class=“home”>home</a>
…

then you’d still have
#main .home

And yeah, I’m leaving out the spans but Gilder-Levin is my favourite technique so my markup would still have them in there… after all, someone still needs to hold that image.

4

Having general link names like LinkOne rather than “about” means that if the client changes the link name to “our history” but it goes to the same place you don’t have to change the code on all the pages, just replace the image.

5

I use sprites though, never used image replacement, so maybe that doesn’t translate.

6

if the client changes the link name to “our history” but it goes to the same place you don’t have to change the code on all the pages

If the text changes, I’m changing the text anyway. And now the image is wider, so I’m changing all my coords. And then I’m editing my sprite. So that’s editing image, CSS and HTML no matter what for me, so I also make reading the CSS easier by using names that mean something to me 4 months down the road when I’ve forgotten all my clever abbreviations (except the really stupid ones I use absolutely everywhere).

I use sprites in my image replacement. There must be text on my pages, I’m too lazy to have individual, separate images, and I hate extra server requests.

I’m actually a traveling preacher of the Save Our Servers From Icky Superfluous HTTP Requests Church of Love. (SOS FISHR CoL)

I tend to get a lot of Apaches in attendance.