Cómo ver y revisar código HTML

Antes de pegar HTML en una web, en WordPress o en un correo, conviene verlo funcionando y cazar los fallos. Esta rutina rápida sirve para páginas, fragmentos y plantillas de correo.

Abrir la herramienta: Visor HTML

1. Míralo en tres anchos

Cambia entre Móvil, Tableta y Portátil. A 375 píxeles se ven enseguida textos que se salen, tablas demasiado anchas e imágenes sin max-width.

2. Lee la consola

Las líneas rojas son errores de JavaScript que detienen el resto del script. El número de línea se refiere a la pestaña JavaScript, o al HTML si el script está dentro.

3. Corrige lo que marca la revisión

Primero los errores: las etiquetas sin cerrar y los id repetidos rompen el diseño y los scripts. Después los avisos, como alt y title, que afectan a la accesibilidad y al SEO.

Fragmentos para WordPress u otro CMS

  • Pega solo la parte que va en el editor, sin html ni body.
  • Pon los estilos en línea o en la pestaña CSS para ver el aspecto final.
  • Ordena el código antes de pegarlo para que otros puedan leerlo.
  • Compruébalo en ancho de móvil: la mayoría de visitas llegan desde el teléfono.