Buenas prácticas en HTML

Los navegadores son muy tolerantes: aunque tu HTML tenga errores, casi siempre intentan mostrar algo. Eso es cómodo, pero también peligroso, porque puedes tener una página llena de errores sin darte cuenta.

“Si se ve bien, ¿qué más da?”

Que tu página se vea bien en tu navegador, hoy no significa que esté bien:

• Cada navegador corrige los errores a su manera. Lo que en Chrome se ve bien puede descolocarse en Safari o en el navegador de un móvil antiguo.
• Una actualización del navegador puede cambiar cómo interpreta un error.
• Los lectores de pantalla y los buscadores no “adivinan” tan bien como el navegador: un HTML incorrecto puede ser ilegible para ellos.
• Cuando algo falla con CSS o JavaScript, una etiqueta sin cerrar suele ser la causa, y es muy difícil de encontrar a ojo.

Por eso, en cualquier trabajo profesional el objetivo es: cero errores de validación.

El validador del W3C

El W3C (el consorcio que publica los estándares web) tiene un validador gratuito: validator.w3.org. Tiene tres formas de uso:

1. Validate by URI: pegas la dirección de una página publicada.
2. Validate by File Upload: subes tu archivo .html.
3. Validate by Direct Input: pegas el código.

Te devolverá una lista de:

• Errores: incumplen el estándar. Hay que corregirlos todos.
• Advertencias (warnings): no son errores, pero algo podría mejorar. Revísalas y corrige las que tengan sentido.

Lee los mensajes con calma: indican la línea donde está el problema, aunque a veces la causa real está un poco más arriba (por ejemplo, una etiqueta sin cerrar varias líneas antes).

También puedes validar sin salir del editor: VS Code tiene extensiones de validación, y las herramientas del navegador (F12) muestran muchos problemas en la pestaña Consola y en Lighthouse.

Errores que el validador detecta

• Etiquetas sin cerrar o cerradas en el orden equivocado.
• Elementos donde no pueden ir (un <div> dentro de un <p>, un <li> fuera de una lista).
• Atributos obligatorios que faltan, como el alt de una imagen.
• id repetidos.
• Falta de <title> o de la codificación de caracteres.
• Atributos y etiquetas que no existen o están obsoletos.

Lo que no detecta: que el contenido tenga sentido, que el alt describa bien la imagen o que hayas cerrado un <div> en el sitio equivocado (si la estructura resultante sigue siendo válida). Para eso hace falta revisar tú.

Etiquetas y atributos obsoletos

En HTML 4 había muchos elementos para dar formato directamente en el HTML. En HTML5 están eliminados: todo lo visual se hace con CSS.

Obsoleto	Qué usar en su lugar
<font color="red" size="5">	CSS: color, font-size
<center>	CSS: text-align: center o Flexbox
<u> para subrayar por estética	CSS: text-decoration: underline
align="center", bgcolor, border en tablas	CSS
<frame>, <frameset>	Una sola página, o <iframe> si hace falta
<marquee>, <blink>	Nada. Son molestos y poco accesibles
<a name="seccion">	id="seccion" en el elemento de destino
<br><br><br> para separar	CSS: margin
Tablas para maquetar la página	CSS Grid y Flexbox

Si ves estas cosas en un tutorial, es que el tutorial es muy antiguo. Fíjate siempre en la fecha de lo que lees.

Lista de buenas prácticas

Estructura

• Empieza siempre con <!DOCTYPE html>, <html lang="es">, <meta charset="utf-8">, el viewport y un <title>.
• Un solo <h1> por página y encabezados en orden.
• Usa etiquetas semánticas (<header>, <nav>, <main>, <footer>…) antes que <div>.
• Todo en minúsculas, atributos entre comillas dobles y etiquetas siempre cerradas.
• Sangría consistente (2 espacios es lo más habitual).

Accesibilidad

• Toda imagen lleva alt: una descripción útil, o vacío (alt="") si es decorativa.
• Todo campo de formulario tiene su <label>.
• Los enlaces dicen a dónde llevan (nada de “haz clic aquí”).
• Usa <button> para acciones y <a> para ir a otra página.
• No transmitas información solo con el color.
• Comprueba que puedes usar toda la página solo con el teclado (tecla Tab).

Rendimiento y SEO

• <title> y <meta name="description"> únicos en cada página.
• Imágenes con width y height, reducidas de peso y con loading="lazy" si están abajo.
• URLs legibles: /cursos/html-desde-cero mejor que /p?id=384.
• Nada de rutas de tu propio ordenador (C:\Users\...).

Una última herramienta: Lighthouse

En Chrome, pulsa F12, ve a la pestaña Lighthouse y genera un informe. Analiza tu página y te da una nota de 0 a 100 en rendimiento, accesibilidad, buenas prácticas y SEO, con una lista de qué mejorar. Es una forma excelente de revisar tus proyectos antes de enseñarlos.