Как лучше сверстать меню...

[GOODPower]

Здравствуйте, есть вот такое меню:


На данный момент я его сверстал так:

Код:

			<ul>
				<li id="cofemashin"><img src="./images/cofemachine.png">Кофемашины</li>
				<li id="capsul">Капсулы</li>
				<li id="molot">Молотый и зерновой кофе</li>
				<li id="tea">Чай</li>
				<li id="acessuar">Аксессуары</li>
			</ul>

Хотел бы узнать, как лучше всего сверстать подобное ? Как сделал я, как понимаю, это не лучший выход. Может лучше "Кофемашины" закрыть в <a> тег и у данного тега сделать беграунд кофеварка + сделать блоком, что бы куда не наводил, отображался задний вон активный.

[asdixer]

<ul>
<li><a href="#"><img src="/images/cofemachine.png">Кофемашины</a></li>
<li><a href="#"><img src="/images/capsyli.png">Капсулы</a></li>
<li><a href="#"><img src="/images/cofe.png">Молотый и зерновой кофе</a></li>
....
</ul>

[GOODPower]

<ul>
<li><a href="#"><img src="/images/cofemachine.png">Кофемашины</a></li>
<li><a href="#"><img src="/images/capsyli.png">Капсулы</a></li>
<li><a href="#"><img src="/images/cofe.png">Молотый и зерновой кофе</a></li>
....
</ul>

Имелось ввиду, нормально ли так верстать или лучше всего использовать картинку как задний фон, что бы лишним кодом не захломлять и постараться все делать в CSS. Ведь, чем меньше кода, тем лучше для SEO, не так ли ?

Или в моем случае подобная реализация неизбежна ?

[arhimed]

GOODPower,
Так то оно так, но если от этого дизайн становится менее привлекательным, то не стоит отказываться от фоновой картинки.
В первую очередь нужно думать о людях, ну а о "девушках? - о девушках потом!" - думаю, мысль поняли. Помимо самого кода есть еще огромный список факторов, влияющих на ранжирование и среди них объем кода далеко не на первом месте.

[GOODPower]

Буду иметь ввиду и постараюсь пока организовать все как знаю, а потом уже выкину на просмотр, что бы оценили

[druzhkov]

или лучше всего использовать картинку как задний фон, что бы лишним кодом не захломлять и постараться все делать в CSS

Именно так - картинку прописать через css свойство background.
Более того, делается спрайт, чтобы при наведении возникала подсветка нужного элемента. Если вы просто будете подменять одну картинку на другую внутри <li>, будет возникать небольшой "лаг" - когда одна уже исчезла, а вторая еще не подгрузилась. Некрасиво смотрится.