Mi ENTRADA HTML no es un marcado válido, por favor ayuda

StackOverflow https://stackoverflow.com/questions/1175802

  •  19-09-2019
  •  | 
  •  

Pregunta

En mi sitio web, tengo el siguiente código:

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

Cuando ejecuto mi sitio web a través de uno de los muchos validadores de HTML, me solicitan informarme que:

  • borde
  • altura
  • ancho

son atributos no válidos del elemento INPUT.

Sin embargo, YSlow y Google PageSpeed ​​me informan que siempre debo incluir dimensiones de imagen para mejorar la velocidad del análisis de HTML.

¿Qué otra forma existe para mí de utilizar un botón de envío de imágenes sin dejar de ser HTML válido y seguir las recomendaciones de YSlow?

¿Fue útil?

Solución

Utilice CSS para lograr el mismo objetivo.Ya sea CSS en línea:

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

o incluso mejor aún, con un estilo en tu archivo CSS:

HTML:

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

CSS:

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

Si yslow o Google PageSpeed ​​aún se quejan, ignórelo.

Otros consejos

La validación y análisis de velocidad son dos cosas diferentes, esas tres herramientas están justo en su propio enfoque. En cuanto a la advertencia en el validador, esos son porque hay ninguna especificación que incluye ese tipo de información sobre esas etiquetas, y se puede añadir con CSS en lugar de HTML. 

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

Usted debe agregar éstos a través de un archivo externo CSS porque validadores HTML comprobar para asegurarse de que no hay valores se establecen de estilo.

La idea detrás de la validación es que la página debe ser capaz de ser visto sin CSS. Sin embargo, la idea detrás de la velocidad de la página de Google es hacer que la página cargue más rápido.

Si se añaden estas declaraciones usando CSS, usted debería ser capaz de pasar tanto el validador. Siempre y cuando se haya dimensionado el archivo de imagen real correctamente, que debe estar bien en la también de tiempo de carga.

border, height y width no son una parte de las especificaciones del W3C: http: // www .w3schools.com / tags / tag_input.asp y por lo tanto no válido. No ayudan a acelerar el análisis de HTML, pero el procesamiento de imágenes, ya que el navegador no tendrá que calcular las dimensiones.

Esta ganancia es muy pequeña (dependiendo del número de imágenes que se va a cargar en). Por lo que puede sobre todo ignorarlo. Se podría utilizar CSS para darle las dimensiones, si usted está tratando de definirlas como algo distinto de las dimensiones reales de la imagen.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top