10 errores comunes de HTML para principiantes
Si tu código no está funcionando exactamente como quieres ahora mismo, respira profundo. Lo estás haciendo muy bien. Todos los desarrolladores web profesionales empezaron exactamente donde tú estás, cometiendo esos mismos errores de escritura.
Cometer errores no es un fracaso; es simplemente la manera en que nuestro cerebro aprende a programar. A veces los navegadores son muy tolerantes, pero otras veces un pequeño error puede romper toda tu página.
Para ayudarte a depurar, aquí tienes los 10 errores de HTML más comunes que cometen los principiantes y cómo solucionarlos rápidamente.
1. Etiquetas sin cerrar
La mayoría de las etiquetas HTML vienen en pares: una etiqueta de apertura y una de cierre. La etiqueta de cierre debe incluir una barra (/). Si la olvidas, el navegador interpreta que el elemento sigue abierto para siempre y eso puede desordenar el resto de tu página.
Código incorrecto:
<p>¡Bienvenido a mi sitio web!<p>Código correcto:
<p>¡Bienvenido a mi sitio web!</p>2. Anidación incorrecta
Cuando colocas una etiqueta dentro de otra, estás "anidando". La regla de oro es: "el primero que entra, sale al final." Piensa en cajas apiladas. Debes cerrar la caja interna antes de cerrar la externa. Si las etiquetas se cruzan, el navegador se confunde.
Código incorrecto:
<p>Este texto es <strong>muy negrita.</p></strong>Código correcto:
<p>Este texto es <strong>muy negrita.</strong></p>3. Falta del atributo alt
Cuando agregas una imagen con la etiqueta <img>, debes incluir el atributo alt (texto alternativo). Si la imagen no carga, ese texto se muestra en su lugar. Y más importante: los lectores de pantalla usan ese texto para describir la imagen a personas con discapacidad visual. Sin alt, tu sitio no es accesible.
Código incorrecto:
<img src="perro-lindo.jpg">Código correcto:
<img src="perro-lindo.jpg" alt="Un cachorro golden retriever esponjoso sentado en el césped">4. Falta de comillas en atributos
Los atributos dan información extra a tus etiquetas (por ejemplo, el destino de un enlace). El valor de un atributo siempre debería ir entre comillas. Si no las pones, un espacio en la URL puede romper por completo el enlace.
Código incorrecto:
<a href=https://www.example.com>Haz clic aquí</a>Código correcto:
<a href="https://www.example.com">Haz clic aquí</a>5. Usar encabezados solo para estilo
Los encabezados (<h1> a <h6>) están pensados para crear una estructura lógica del documento, como los capítulos de un libro. Los principiantes suelen usar <h1> solo porque quieren texto grande y en negrita. Eso daña la estructura del sitio. Si solo quieres que el texto se vea grande, usa CSS.
Código incorrecto:
<h2>Haz clic en el botón de abajo para continuar.</h2>Código correcto:
<p class="texto-grande">Haz clic en el botón de abajo para continuar.</p>6. Saltarse niveles de encabezado
Los encabezados deben seguir un orden secuencial estricto. Nunca deberías saltar de <h1> directamente a <h4>. Esto confunde a buscadores y lectores de pantalla que intentan entender la estructura de tu página.
Código incorrecto:
<h1>Título principal</h1>
<h4>Subtítulo</h4>Código correcto:
<h1>Título principal</h1>
<h2>Subtítulo</h2>7. Poner contenido visible dentro de <head>
Tu documento HTML tiene dos partes principales: <head> (el cerebro) y <body> (el cuerpo visible). <head> es solo para configuraciones internas, como el título de la página. Todo el texto, imágenes o enlaces que quieres que la gente vea deben ir dentro de <body>.
Código incorrecto:
<head>
<h1>Mi sitio increíble</h1>
</head>Código correcto:
<body>
<h1>Mi sitio increíble</h1>
</body>8. Usar etiquetas en mayúsculas
Las versiones antiguas de HTML no diferenciaban entre <P> y <p>. Aunque los navegadores modernos aún entienden etiquetas en mayúsculas, la práctica estándar en la industria es escribir todas las etiquetas en minúsculas. Así tu código se mantiene limpio, moderno y fácil de leer.
Código incorrecto:
<DIV>
<P>¡Hola mundo!</P>
</DIV>Código correcto:
<div>
<p>¡Hola mundo!</p>
</div>9. Olvidar la plantilla base (boilerplate)
No puedes simplemente abrir un archivo, escribir <p>Hola</p> y terminar. Toda página web necesita una estructura base llamada "boilerplate". Sin doctype, html, head y body, el navegador tiene que adivinar cómo interpretar tu página.
Código incorrecto:
<h1>Mi página</h1>
<p>Aquí falta la estructura base.</p>Código correcto:
<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1>Mi página</h1>
<p>Esto sí tiene la estructura correcta.</p>
</body>
</html>10. Espacios en nombres de archivo
Cuando guardes tus archivos HTML o imágenes en tu ordenador, no uses espacios en el nombre del archivo. En internet, los espacios causan problemas. El navegador suele reemplazarlos por caracteres como %20, lo que rompe enlaces e imágenes. Usa guiones (-) o guiones bajos (_) en su lugar.
Código incorrecto:
<a href="sobre mi.html">Sobre mí</a>Código correcto:
<a href="sobre-mi.html">Sobre mí</a>Resumen
Programar es un camino de prueba y error. La próxima vez que una imagen no cargue o tu página se vea rota, revisa esta lista. ¿Cerraste bien las etiquetas? ¿Recordaste las comillas? ¿Anidaste correctamente?
Detectar estos pequeños errores es como desarrollar tus "ojos de programador". Sigue practicando y pronto evitar estos errores será algo natural.