What should come with img tag
I often work with 3rd party code and I’m often confused by so much html code. SEO professionals know that text/code ratio is very important so you should save every byte of code when it’s possible. Today I want to focus on image tag and the ways people use it in a bad (or just not good) way.
Example #1:
<img src="file.jpg">
It’s short (no much html code). But wrong. Try to validate such code against W3C rules and you’ll know what XHTML code requires self-closing tag and the "alt" attribute is required for "img". So, the correct way for this would be at least:
<img src="file.jpg" alt="" />
For service images (like spacers, etc.) that would be ok, but for informative pictures, fill the alt text. Don’t spam. Just type there a text that could be helpful and informative for people not seeing the pictures. That’s the essence of alternative text.
Example #2:
<img src="file.jpg" alt="" border="0" />
Many webmasters use border=0 to avoid issues with Mozilla Firefox and IE browser showing border when image is inside a link. That’s really a workaround, but not so good. Instead of using border=0, just add the following piece of code in your linked CSS stylesheet:
a img {
border: none;
}
Example #3:
<img src="file.jpg" alt="" height="100" width="100" />
That’s another example that shows when people use something in html that could be easily done via css. Just assign the img tag some class and specify width, height, and many other things you could possibly need via css.
<img src="file.jpg" alt="" class="thumbnail" />
in css file:
.thumbnail {
width: 100px;
height: 100px;
}
The summary:
1. Always self-close the img tag:
WRONG: <img src="file.jpg" alt="">
CORRECT: <mg src="file.jpg" alt="" />
2. Always put the alt attribute, even if you don’t want to put anything there:
WRONG: <img src="file.jpg" />
CORRECT: <mg src="file.jpg" alt="" />
CORRECT: <mg src="file.jpg" alt="wonderful nature of Russia" />
3. Don’t use any other attributes than src, alt, class, id. Border, width, height and other things can be easily specified via CSS. Sometimes you may need to add event handlers, like onclick, onmouseover, etc. In such case consider using jQuery or other javascript framework. That can save you some bytes of html code.
October 27th, 2014 at 7:37 am
.…
hello….