My HTML INPUT is not valid markup, please help

Question

Hi

On my web site, I have the following code:

<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />

When I run my web site through one of the many HTML validators, they prompt to inform me that:

• border
• height
• width

are invalid attributes of the INPUT element.

However, YSlow and Google PageSpeed inform me that I should always include image dimensions to improve the speed up of parsing HTML.

What other way exists for me to use an image submit button while still being HTML valid and following YSlow recommendations?

Answer 1

You should add these via a CSS External File because HTML validators check to make sure no styling values are set.

The idea behind validation is that the page should be able to be viewed without any CSS. But, the idea behind Google Page speed is to make the page load the fastest.

If you add these declarations using CSS, you should be able to both pass the validator. As long as you have sized your actual image file correctly, you should be fine on the loading time aswell.

Answer 2

Use CSS to achieve the same goal. Either inline CSS:

<input type="image" src="images/btn.png" alt="Submit"
       style="border:0; width:102px; height:25px;" />

or even better yet, with a style in your CSS file:

HTML:

<input type="image" src="images/btn.png" alt="Submit"
       class="somethingMeaningful" />

CSS:

input.somethingMeaningful { border: 0; width: 102px; height: 25px; }

If yslow or Google PageSpeed still complains, ignore.

Answer 3

Validation and parsing speed are two different things, those three tools are right on their own focus. Regarding the warning on the validator, those are because there are no specification that includes that kind of information on those tags, and they can be added with CSS instead of HTML.

input{ 
    border: none; 
    height:25px; 
    width: 102px; 
}

Answer 4

border, height and width are not a part of the W3C specifications : http://www.w3schools.com/TAGS/tag_input.asp and hence invalid. They don't help speed up HTML parsing, but image rendering, since the browser won't need to calculate the dimensions.

This gain is very small (depending on how many images you're loading in). So you can mostly ignore it. You could use CSS to give it the dimensions if you're trying to define them as something other than the image's actual dimensions.