Search code examples
csshtmlseosemantic-markup

Semantic menu with only images

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.

Solution
    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>