Errores Comunes en el Código HTML

Los errores en el código son inconsistencias con las reglas y la sintaxis del lenguaje HTML, el uso de etiquetas, atributos o valores incorrectos o no permitidos. Los errores provocan una visualización incorrecta de los elementos, una disminución del rendimiento y la accesibilidad del sitio.

¿Qué se necesita para escribir código correctamente y evitar errores? Conocer los errores más comunes y no cometerlos.

Etiqueta anidada se cierra después de la etiqueta principal

<section> 
  <p>Ejemplo de texto en el sitio web.</section>
</p>

En este ejemplo, el elemento <p> se cierra después de <section>, aunque está anidado. Esto puede causar problemas en la visualización de los elementos. Este tipo de error se repite por falta de atención y por una estructura incorrecta del documento HTML. Si vigilas la anidación, no te equivocarás, dónde debe cerrarse la etiqueta anidada y dónde su padre.

Forma correcta de anidar estos elementos:

<section>
  <p>Ejemplo de texto en el sitio web.</p>
</section>

Ejemplo de escritura correcta del código, donde se ve la anidación y las posibilidades de cometer un error son menores:

<ul class="user-menu">
  <li>
    <a href="#">Marcadores</a>
  </li>
  <li>
    <a href="#">Carro de compras</a>
  </li>
  <li>
    <a href="#">Realizar pedido</a>
  </li>
</ul>

Falta de etiqueta de cierre

<section class="advantages">
  <h2>¿Qué nos diferencia de la competencia?</h2>
  <ul class="advantages-list">
    <li>Utilizamos solo materiales naturales</li>
    <li>Informes diarios del progreso de las obras</li>
    <li>Nosotros mismos ensamblaremos los muebles para ti</li>
    <li>Servicio de garantía gratuito durante 10 años</li>
</section>

En el ejemplo, la lista carece de la etiqueta de cierre </ul>. En este caso, la lista y todos sus elementos se mostrarán de forma incorrecta. Ten cuidado, estos pequeños errores pueden traer muchos problemas.

Opción correcta:

<section class="advantages">
  <h2>¿Qué nos diferencia de la competencia?</h2>
  <ul class="advantages-list">
    <li>Utilizamos solo materiales naturales</li>
    <li>Informes diarios del progreso de las obras</li>
    <li>Nosotros mismos ensamblaremos los muebles para ti</li>
    <li>Servicio de garantía gratuito durante 10 años</li>
  </ul>
</section>

Los identificadores se repiten

<form action="https://echo.htmldesdecero.es" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Tu usuario</label>
      </td>
      <td>
        <input type="text" id="login-field" name="login">
      </td>
    </tr>
  ...

<form action="https://echo.htmldesdecero.es" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Tu contraseña</label>
      </td>
      <td>
        <input type="text" id="login-field" name="password">
      </td>
    </tr>

La etiqueta id es un identificador que conecta un campo de entrada específico input con el texto de la firma. Cada formulario debe tener su propio id único para que se pueda utilizar el formulario y enviar los datos al servidor.

La contraseña del ejemplo anterior debe tener su propio id único:

<form action="https://echo.htmldesdecero.es" method="post">
  <table>
    <tr>
      <td>
        <label for="password-field">Tu contraseña</label>
      </td>
      <td>
        <input type="text" id="password-field" name="password">
      </td>
    </tr>

Uso incorrecto de etiquetas semánticas

<section class="products">
    <h2>Curso para desarrolladores front-end</h2>
    …
    <div>Comprar curso</div>
  </section>

Aquí, div se usa incorrectamente en lugar del botón <button>.

La etiqueta <div> es un contenedor universal sin valor propio. Se utiliza cuando es necesario marcar un elemento de diseño no grande o un fragmento separado con texto. Su uso no creará un botón que pueda abrir otra página o formulario para registrarse.

El botón <button> es responsable de ejecutar una función específica: agregar al carrito, comprar, enviar, votar y otras.

<section class="products">
  <h2>Curso para desarrolladores front-end</h2>
    …
  <button class="button">
    Comprar curso
  </button>
</section>

Regla para determinar <div>:

Si tienes ante ti una sección a la que le cuesta encontrar una definición, resulta algo así como “noticias y galería de fotos” o “columna derecha”, puedes marcarla como <div>.

Las etiquetas semánticas <header>, <main>, <footer> están destinadas a destacar los principales bloques estructurales de la página del sitio, y las etiquetas <nav>, <section>, <article>, <aside> para marcar las secciones de significado grande. Todas las etiquetas deben usarse de acuerdo con su propósito.

Falta del atributo alt para las imágenes img

<img src="image/logo.png" width="200" height="100">

El atributo alt establece el texto alternativo que describe la imagen para los usuarios que tienen una carga de imagen muy lenta o que no está disponible en absoluto. alt también ayuda a que los sitios web sean accesibles, por ejemplo, para la categoría de usuarios que no pueden ver imágenes.

<img src="image/logo.png" alt="Logotipo" width="200" height="100">

Determinación del nivel de encabezado por el tamaño del texto en el diseño

<main>
  <h1>Somos una empresa creativa joven</h1>
  <section class="products">
    <h2>Calzado y accesorios</h2>
    …
  </section>
  <section class="about">
    <h2>Somos socios y proveedores confiables</h2>
    …
  </section>
  <section class="companies">
    <h2>Durante muchos años hemos estado trabajando con los fabricantes más grandes</h2>
    …
  </section>
</main>

No todo el texto grande son encabezados. La función principal del encabezado es la de resumen, transmite concisamente el contenido del texto siguiente. Después de leer el encabezado, el usuario debe comprender fácilmente de qué trata la sección. Además, no todos los encabezados son visibles en la página del sitio web, pueden estar escritos en el marcado y estar ocultos, ya que su función es ayudar a estructurar la página.

<main>
  <h1>Tienda online "Factura"</h1>
  <section class="products">
    <h2>Productos</h2>
    …
  </section>
  <section class="about">
    <h2>Sobre nosotros</h2>
    …
  </section>
  <section class="companies">
    <h2>Fabricantes</h2>
    …
  </section>
</main>

También es incorrecto designar el encabezado no con etiquetas especiales h1-h6, sino usar el resaltado del texto con las etiquetas <b> o <strong>.

Incluir en <main> lo que se repite en otras páginas

Esto puede ser navegación, derechos de autor, etc.