Nivel: Intro · HTML · Hábitos de código · 12 minutos
Síntomas frecuentes: no entiendes tu propio archivo a la semana; dejas código muerto sin marcar; comentarios eternamente desactualizados; secretos pegados en el HTML; indentación imposible de seguir.
Los comentarios HTML (<!-- ... -->) no se ven en la página, pero sí en el código. Sirven para anotar secciones — no para esconder contraseñas. Aquí errores típicos y cómo evitarlos.
Mapa de problemas
- 1. Ningún comentario en un archivo largo
- 2. Comentarios que narran lo obvio
- 3. Código comentado eterno
- 4. Secretos o datos sensibles en comentarios
- 5. HTML sin indentar ni cerrar bien
1. Ningún comentario en un archivo largo
Síntoma: buscas «dónde empieza el footer» scroll infinito.
Por qué: el archivo creció sin hitos.
Arreglo:
<!-- ===== Footer ===== -->
<footer>…</footer>Evitar: comentar cada línea; marca secciones.
2. Comentarios que narran lo obvio
Síntoma: <!-- esto es un párrafo --> sobre un <p>.
Por qué: ruido; el código ya lo dice.
Arreglo: comenta el porqué («workaround del menú móvil») no el qué.
Evitar: traducir etiqueta por etiqueta.
3. Código comentado eterno
Síntoma: bloques enormes <!-- <div>…</div> --> de hace meses.
Por qué: miedo a borrar; el archivo se pudre.
Arreglo: borra o usa control de versiones (git); no archives en comentarios.
Evitar: «por si acaso» indefinido.
4. Secretos en comentarios
Síntoma: API keys, contraseñas, tokens en el HTML.
Por qué: «nadie ve el código» — sí lo ve cualquiera con Ver código fuente.
Arreglo: bórralos; rota las claves si se filtraron.
Evitar: pegar credenciales «temporalmente».
5. Sin indentar / etiquetas mal cerradas
Síntoma: el layout se rompe y no hallas el </div>.
Por qué: jerarquía invisible.
Arreglo: indenta 2 espacios por nivel; cierra en orden inverso; usa el formateo del editor.
<main>
<section>
<h2>Título</h2>
<p>Texto</p>
</section>
</main>Evitar: todo pegado a la columna cero en archivos largos.
Checklist final
- ¿Comentarios de sección, no de ruido?
- ¿Sin secretos ni código muerto eterno?
- ¿Indentación consistente?
- ¿Sintaxis de comentario correcta?
<!-- así -->(no // de JS dentro de HTML)
Para seguir: meta charset e idioma — que las tildes y el lang estén bien desde el head.
