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

Option 1

    <a href="/kittens">
        <img src="kittens.png" />
    <a href="/puppies">
        <img src="puppies.png" />

Option 2

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

where the CSS is defined:

a.kittens {

a.puppies {

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

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.


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.

  • 1
    Option two doesn't have an image tag to support an alt attribute? Mar 17, 2011 at 9:01
  • @FreshCode Whoops, got the options the wrong way round - thanks!
    – ajcw
    Mar 17, 2011 at 9:06
  • Don't forget the title tag on both options. Mar 17, 2011 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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