Curso HTML 17.3 Errores comunes de marcado y cómo evitarlos

17.3 Errores comunes de marcado y cómo evitarlos

En este apartado profundizamos en los fallos más habituales al escribir HTML y ofrecemos estrategias y ejemplos para prevenirlos. Un marcado limpio y bien estructurado no solo facilita el mantenimiento, sino que mejora la accesibilidad, el SEO y la colaboración en equipo.

1. Etiquetas mal anidadas (Invalid Nesting)

Uno de los errores más frecuentes es colocar elementos block dentro de elementos inline, o cerrar etiquetas en desorden. Esto rompe la semántica y puede producir resultados inesperados en diferentes navegadores.

• Colocar un <div> dentro de un <span>.
• Abrir un párrafo dentro de un encabezado y cerrarlo fuera de él.

<span>
  Texto introductorio
  <div>Contenido bloque</div>   <!-- DIV dentro de SPAN (inline) -->
</span>

<h2>>Sección importante
  <p>>Párrafo dentro de H2</h2>>  <!-- Cierre desordenado de etiquetas -->
  

Corrección: Respeta la diferencia inline/block y cierra siempre las etiquetas en el orden inverso al que las abriste.

<div>
  <span>Texto introductorio</span>
  <div>Contenido bloque</div>
</div>

<h2>Sección importante</h2>
<p>Párrafo dentro de su propio contenedor.</p>
  

2. Etiquetas sin cerrar y elementos huérfanos

Olvidar el cierre de una etiqueta provoca un efecto dominó: todo lo siguiente puede interpretarse de forma errónea. Los editores modernos suelen avisar, pero en ocasiones no se nota hasta el despliegue.

<ul>
  <li>Elemento 1
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
  

En este caso el primer <li> no tiene su cierre, y el navegador podría cerrar la lista antes de tiempo o barrer todo lo siguiente dentro del primer ítem.

Corrección: Siempre cerrar cada etiqueta explícitamente y, de ser posible, utilizar editores que validen.

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
  

3. Falta de atributos obligatorios y accesibilidad

Olvidar atributos esenciales como alt en <img> o label en formularios reduce la accesibilidad. Para cumplir normas WCAG, cada contenido no textual debe describirse.

<img src='foto-producto.jpg'>


<input type='text' id='nombre'>
  

Corrección: Añade siempre alt y asocia los <label> a sus controles con for o envolviéndolos.

<img src='foto-producto.jpg' alt='Zapatillas deportivas rojas para hombre'>


<label for='nombre'>Nombre completo:</label>
<input type='text' id='nombre' name='nombre-completo' required>
  

4. Valores de atributos inválidos y elementos obsoletos

Usar atributos o elementos que ya no forman parte de la especificación HTML5 o con valores no permitidos produce advertencias o fallos de interpretación.

• <font>, <center> están obsoletos.
• Asignar width='100px' en vez de width='100' en tablas.

<font color='red'>Texto importante</font>


<table width='600px'>...</table>
  

Corrección: Sustituye los elementos obsoletos por CSS y respeta el formato de los atributos permitidos.

<p class='texto-importante'>Texto importante</p>

<table width='600'>...</table>
  

5. Uso excesivo de <div> y <span> (Divitis)

Añadir contenedores innecesarios entorpece la lectura del DOM. En su lugar, emplea etiquetas semánticas (<article>, <header>, <nav>, <footer>, etc.) para describir la función del contenido.

<div id='main'>
  <div class='row'>
    <div class='col'>
      <div>Artículo principal</div>
    </div>
  </div>
</div>
  

Corrección: Cambia estructuras genéricas por semánticas para mejorar la accesibilidad y el SEO.

<main>
  <article>
    <h2>Artículo principal</h2>
    <p>Contenido detallado...</p>
  </article>
</main>
  

6. Identificadores duplicados

Asignar el mismo id a varios elementos invalida la unicidad requerida y rompe selectores CSS/JS.

<div id='panel'>Contenido A</div>
<div id='panel'>Contenido B</div>
  

Corrección: Usa clases para elementos repetidos y reserva id para selectores únicos.

<div class='panel'>Contenido A</div>
<div class='panel'>Contenido B</div>
  

7. Encabezados desordenados y jerarquía rota

Saltarse niveles de <h2> a <h4> sin un intermedio rompe la estructura lógica y dificulta la navegación por la página.

<h2>Título principal</h2>
<h4>Subapartado sin H3</h4>
  

Corrección: Sigue un orden secuencial (h2 → h3 → h4) para reflejar la relación entre secciones.

<h2>Título principal</h2>
<h3>Subapartado</h3>
<h4>Detalle de subapartado</h4>
  

Resumen de buenas prácticas

• Valida tu código con herramientas online (W3C Validator).
• Usa un editor con resaltado de sintaxis y autocompletado.
• Aplica semántica HTML5 en lugar de contenedores genéricos.
• Mantén consistencia en el uso de atributos y cierre de etiquetas.
• Prioriza la accesibilidad: alt, label, roles ARIA si es necesario.

Con estos consejos y hábitos evitarás la mayoría de errores de marcado y garantizarás un HTML claro, accesible y fácil de mantener.