Cómo encontrar errores HTML en publicaciones / páginas de WordPress

De vez en cuando publicará una publicación de blog (o página) y encontrará cosas que no funcionan: párrafos con espacios desiguales, imágenes agrupadas (quizás incluso desordenadas), etiquetas de título y / o listas mal alineadas … ¿Le suena familiar? En situaciones como estas, es probable que no se haya ido y de alguna manera haya estropeado el HTML en algún lugar sin darse cuenta: tal vez haya una etiqueta de cierre (o apertura) sin cerrar (o sin abrir), o tal vez tenga más (o menos) etiquetas de las que debería? ¿O tal vez ha insertado accidentalmente algunas etiquetas donde nunca se pretendió colocarlas? Si puede detectar el problema simplemente examinando su marcado usted mismo, entonces genial – arréglelo y siga adelante; pero ¿y si no puedes? … ¿Qué pasa si el post que has escrito es tan largo y complicado que el error se niega a darse a conocer…?

Bueno, antes de que te vuelvas loco mirando las cosas demasiadas veces … echemos un vistazo a una forma mucho más sencilla de ver qué podría estar mal con su HTML …

Usando el servicio de validación de marcado W3C:

Desarrollado con la ayuda de la Fundación Mozilla, el Servicio de validación de marcado W3C es un validador de HTML extremadamente conocido que normalmente se utiliza para verificar la validez de marcado de documentos web en una variedad de formatos diferentes, como HTML, XHTML, SMIL y MathML, etc.; sin embargo, cuando WordPress HTML se vuelve más elegante, también puede use esta herramienta extremadamente útil para encontrar los errores … así es como:

Paso 1:

Cree un archivo de texto (usando say TextWrangler – o cualquier otro programa utilizado para editar archivos de texto sin formato, como Texto sublime, Bloc de notas ++ o incluso TextEdit) y guárdelo en su escritorio como, por ejemplo, «test.html».

Paso 2:

Pegue lo siguiente en la parte superior del archivo de texto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <title>Page Title</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >  
	</head>
  <body>

(tenga en cuenta que el código anterior es simplemente para los propósitos de esta metodología de validación en particular, es decir, no para una referencia general, y que estamos usando HTML 4 Transitional aquí en lugar de HTML5 simplemente porque, lamentablemente, el servicio de validación W3C aún no funciona muy bien con HTML5)

Seguido por todo contenido de su publicación (o página) de WordPress – teniendo cuidado de cortar y pegar desde el Editor de texto de WordPress y NO desde el Editor visual de WordPress (captura de pantalla).

… seguido de esto:

</body>
</html>

Paso 3:

Guarde el archivo y diríjase al Servicio de validación de marcado W3C. Seleccione la pestaña «Validar por carga de archivo» (parte superior de la página), cargue su archivo y presione «Verificar». A continuación, debería aparecer un bonito mensaje verde que diga «¡Este documento se comprobó correctamente como HTML 4.01 de transición!» (en cuyo caso sus problemas probablemente estén en otra parte) o un mensaje rojo no tan agradable que dice «¡Se encontró un error al verificar este documento como HTML 4.01 Transitional!» – al igual que:

Error de HTML encontrado

(Click para agrandar)

Entonces, ahora sabemos que hay un error en el HTML, esto podría ser la raíz del problema … desplácese hacia abajo y se le debe dar el número de línea * en el que hay un error HTML (del cual puede haber más de uno por supuesto).

Salida de validación

(Click para agrandar)

En el ejemplo anterior, se nos dice que hay un error, en la línea 20, columna 198, ¡creado por la falta de una etiqueta de elemento de apertura «A» (un hipervínculo) …! Vaya, nunca sabré cómo nos las arreglamos para perder ese aullador … jajaja.

Sin embargo, en serio, este puede ser un método realmente excelente para tratar de encontrar errores de HTML en sus publicaciones / páginas, uno que generalmente termino usando cada dos meses más o menos … ya que esa es la regularidad con la que cometo un error tipográfico que, No importa cuánto lo intente, ¡de alguna manera parece que no puedo detectar simplemente mirando el código!

* tenga en cuenta que, en mi propia experiencia, el error puede estar o no en esta línea exacta: en realidad, puede ser una o dos líneas por encima o por debajo del número de línea dado