Mon HTML entrée n'est pas un balisage valide, s'il vous plaît aider

Question

Sur mon site web, je le code suivant:

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

Quand je lance mon site web à travers l'un des nombreux validateurs HTML, ils invite à me renseigner que:

• frontière
• hauteur
• largeur

sont des attributs non valides de l'élément INPUT. Cependant, YSlow et Google PageSpeed ​​m'informent que je devrais toujours inclure des dimensions d'image pour améliorer l'accélération de l'analyse HTML.

De quelle autre manière est-il possible d'utiliser un bouton de soumission d'image tout en restant valide au HTML et en suivant les recommandations de YSlow?

Answer 1

Utilisez CSS pour atteindre le même objectif. Soit CSS en ligne:

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

ou encore mieux encore, avec un style dans votre fichier CSS:

HTML:

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

CSS:

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

Si yslow ou Google PageSpeed Je me plains, ignorer.

Answer 2

Vous devez les ajouter via un fichier externe CSS, car les valideurs HTML vérifient qu'aucune valeur de style n'est définie.

L'idée derrière la validation est que la page devrait pouvoir être vue sans aucun CSS. Mais, l'idée derrière la vitesse de Google Page est de faire le chargement de la page le plus rapide.

Si vous ajoutez ces déclarations en utilisant CSS, vous devriez être en mesure de passer le validateur. Tant que vous avez correctement dimensionné votre fichier d'image, vous devriez aussi bien le charger.

Answer 3

La vitesse de validation et d'analyse sont deux choses différentes, ces trois outils sont juste sur leur propre objectif. En ce qui concerne l'avertissement sur le validateur, ceux-ci sont parce qu'il n'y a aucune spécification qui inclut ce genre d'informations sur ces balises, et ils peuvent être ajoutés avec CSS au lieu de HTML.

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

Answer 4

border, height et width ne font pas partie des spécifications du W3C: http://www.w3schools.com/TAGS/tag_input.asp et donc invalide. Ils n'aident pas à accélérer l'analyse HTML, mais le rendu d'image, puisque le navigateur n'aura pas besoin de calculer les dimensions.

Ce gain est très faible (selon le nombre d'images que vous chargez). Donc vous pouvez surtout l'ignorer. Vous pouvez utiliser CSS pour lui donner les dimensions si vous essayez de les définir autrement que comme les dimensions réelles de l'image.