5 errores comunes de HTML que debes evitar

1. Encabezado y pie de página semánticos

Los div no tienen estructura semántica. En lugar de usar divs para crear encabezados o estructuras de pie de página, use elementos “encabezado” y “pie de página”.

No hagas esto

<div id="header">
...
</div>
<div id="footer">
...
</div>

Hacer esto

<header>
...
</header>
<footer>
...
</footer>

2. Usar elemento de figura
Si necesita agregar un título a su imagen, use el elemento “figura” combinado con el elemento “figcaption”.

No hagas esto

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Hacer esto

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. No utilice etiquetas en negrita o cursiva
Las etiquetas “b” e “i” son etiquetas de presentación y no tienen ningún significado semántico; en su lugar, cambie el peso de fuente / estilo de fuente en el CSS o use el elemento “fuerte” o “em”.

No hagas esto

<b>Bold</b>
<i>Italics</i>

Hacer esto

<strong>Bold</strong>
<em>Italics</em>

4. Usar enlaces descriptivos
El texto de un enlace debe ser explícito y transmitir a dónde se redirige al usuario, tanto los usuarios como los motores de búsqueda pueden comprender más fácilmente su contenido y cómo se relaciona con otras páginas.

No hagas esto

<a href="url">
Check our pricing...
</a>

Hacer esto

Check our <a href="url"> pricing </a>

5. Usar estilos en línea
Escribir estilos en línea viola el principio de tener la estructura (HTML) separada de la presentación (CSS). En su lugar, escriba los estilos en una hoja de estilo.

No hagas esto

<h1 style="font-size: 24">
 Header
</h1>

Hacer esto

h1 {
font-size: 24
}