2

I am trying to make a menu with images only. Can anyone tell me how I should markup this in the most semantic way possible? My best guess would be like this:

HTML

<ul>
    <li><a href="#" class="menu" alt="homepage" id="home"></a></li>
</ul>

CSS

.menu {width: 40px; height: 40px}
#home {background: url('...')

EDIT: The query is because Ineed to use empty <a> tags or alternatively I can put the <img> tag within the <a> tags.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Jimmy
  • 12,087
  • 28
  • 102
  • 192

2 Answers2

2
  1. First, if you are willing to respect HTML5 semantics, your menu should be wraped in a <nav> tag.
  2. Second, the alt="" should be replaced by a title="" attribute on the <a> tag (MDN for more info)
  3. Third, you should use the <img> tag with the alt="" attribute so you can add more semantic context.

Your menu could look like this:

<nav>
    <ul>
        <li><a href="" title=""><img src="" alt="" /></a></li>
        ... OTHER LINKS ...
    </ul>
</nav>
Zistoloen
  • 879
  • 14
  • 29
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    In such a case, the [`alt` content needs to convey the purpose of the link](http://stackoverflow.com/a/19776398/1591669) (and not the description of the `img`!). So the `title` attribute is (usually) not needed here, and it should especially not contain the same information like the `alt`. – unor Jul 01 '14 at 16:35
0

You can use Font-Awesome icons instead of images.

They are light and easy to load while image taking time to load and you can apply CSS on those icon same as text.

http://fortawesome.github.io/Font-Awesome/icons/

for e.g.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
<li><a href=""><i class="fa fa-home"></i></a></li>
</ul>

But for using font-awsome icons you have to include font-awsome CSS and fonts to your directory.

unor
  • 92,415
  • 26
  • 211
  • 360
Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49