Question

I’m wondering how to format my code. which one is better?

<a href="http://stackoverflow.com">
<img src="http://localhost/g3.jpg" alt="" height="90" width="150">
Q&A for professional and enthusiast programmers
</a>

OR

<a href="http://stackoverflow.com">
<img src="http://localhost/g3.jpg" alt="" height="90" width="150">
</a>
<a href="http://stackoverflow.com">Q&A for professional and enthusiast programmers</a>

Answer 1

I would definitely go with the first one unless you have a specific reason for having two links. Don’t think about it in terms of proper coding style, but rather what makes sense usability-wise.

Note that you also have the option to only use the text in the link, and set the image as the link’s background-image property in CSS. In many cases, that’s exactly what I would do unless the image itself is essential to understanding the link.

In cases like this, the best thing is to think, “Which HTML structure most accurately represents how I want a user to perceive this element?”