Is using for a menu item wrong?

Question

<div class="dashboard-icon">
        <a href="./structure/">
        <img class="admin-icon" src="<?=inc_path;?>images/icons/home.png" alt="" /></a><br />
        <p>Dashboard</p>
</div>

This is part of a menu, do you think it would be better in a UL > LI? I want a label underneath the icon.

Trying to think of reasons if this is bad or not. :)

Possibly related: [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) — jensgram, Aug 22 '11 at 09:07
Something that is not necessarily wrong but is probably not required is the `
` after the ``. Since it is followed by a `
` the line break is implicit, and if you want to bring the `
` down a bit from the image, give it a `margin-top:`... — DaveRandom, Aug 22 '11 at 09:09
One of the problem you might have, is that only image is a link, and text is not. If for some reason image fails to load, user will not be able to navigate your menu.(some modern browsers like FF5/6 don't display "broken image" image any more, they just hide image all together) — Ivan, Aug 22 '11 at 09:18

score 4 · Accepted Answer · answered Aug 22 '11 at 09:13

Is using <img> for a menu item wrong?

Not if it is a content image (e.g. an icon).

This is part of a menu, do you think it would be better in a UL > LI?

Menus are, typically, lists of links, and using <ul> and <li> would be appropriate. That won't prevent you from using an <img> though.

<p>Dashboard</p>

A text description for an image probably doesn't deserve its own paragraph though. I'd set display: block on the image if I wanted to force a line break, and put the text inside the <a> so the entire thing is clickable. I certainly wouldn't use a line break and a paragraph. Use margin for spacing.

Is using for a menu item wrong?

1 Answers1