What html tag best to use with sprites

Question

I would like to use sprites to display my icons. I created image and CSS, now I need to add class to my html element. What is the best HTML element for that?

<div> works fine, but of course it spans across entire space and wraps. works only if I put something in it. Here's my CSS

.sprite {
    background:url('/i/sprites.png');
    background-repeat:no-repeat
}
.ico2{
    background-position:0 -104px;
    width:16px;
    height:16px
}

Answer 1

You could use <span> tags and set it's display to inline-block with defined height and width.

Answer 2

It depends on context. Try to choose the element which best represents the semantics of the data, not on how it will be displayed; that's what CSS is for.

Are you displaying a list of icons? Use a <ul> and put your sprites in its <li> elements.

Answer 3

My opinion is that it doesn't matter. Whatever tags are suitable for the rest of your content.

• <ul><li></li></ul> structures are very flexible for layout.
• <div> and <span>of course.
• I often find myself using sprites for buttons in links.

You'll probably want to use display: block or display: inline-block for most of the elements where you put your sprites, and remember that you can set that for all elements.