: Linking with an image: Background vs What is considered best practice (semantically) when using text with an image to link to an internal page or category? Option 1 <nav> <a

@Kevin317

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.

Vote Up Vote Down

@Moriarity557

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.

Vote Up Vote Down