Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

What is considered best practice (semantically) when using text with an image to link to an internal page or category?

Option 1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

Option 2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

where the CSS is defined:

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

Should I use a styled background for the link, or an <img> inside the anchor element?

share|improve this question

2 Answers 2

If you have text within the link and the image is merely supporting the link, semantically option two would be better.

If you did not have the text, option one - with an appropriate alt attribute on the images - would be semantically better.

*edit*

For improved accessibility (which is similar, but different to semantic mark-up) you would also want to include title attributes on the anchor <a> elements in both options.

share|improve this answer
1  
Option two doesn't have an image tag to support an alt attribute? –  pate Mar 17 '11 at 9:01
    
@FreshCode Whoops, got the options the wrong way round - thanks! –  John Catterfeld Mar 17 '11 at 9:06
    
Don't forget the title tag on both options. –  Digital Essence Mar 17 '11 at 10:11

I almost always use an "Option 2" approach in these types of scenarios, in an effort to keep my presentation and content separate.

It's good practice to keep any frills or decorative aspects of your web site within CSS if possible. HTML should be used for marking up content, and not for adding rounded corners or other visual aspects of your web page. If your kitten and puppy images are just adding aesthetics to your page, keeping the images in your CSS is the way to go.

There's at least one scenario where I don't believe this is the case, however; image galleries. An image gallery would be an excellent use of "Option 1", because in that case the image thumbnails are the content.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.