Errores html típicos que todos cometemos alguna vez

Etiquetas no cerradas

<!-- mal: -->
<p>Una etiqueta no cerrada

<!-- bien: -->
<p>una etiqueta si cerrada</p>

Orden de cierre de etiquetas erróneo

<!-- mal: -->
<p>hola que <strong>tal</p></strong>

<!-- bien: -->
<p>hola que <strong>tal</strong></p>

Escribir etiquetas con mayúscula en html5 o xhtml

<!-- ejemplos mal -->

<P>En XHTML y HTML5 No debemos escribir etiquetas en mayúsculas</P>

<STRONG>otro ejemplo mal escrito. Sin embargo en html 4.01 si se admitía </STRONG>

Combinación errónea de comillas dobles y simples

En html es desconocido por muchos que los atributos de las etiquetas también pueden ir con comillas simples.

Debemos evitar el error de combinar comillas dobles y simples mezcladas.

<!-- mal: -->
	<attr title="Hyper Text Transfer Protocol'>HTTP</attr>
	
<!-- bien: -->
	<attr title="Hyper Text Transfer Protocol">HTTP</attr>
	<attr title='Hyper Text Transfer Protocol'>HTTP</attr>

Uso inapropiado del salto de línea

Atención: Inapropiado no significa que no se pueda.

A veces hacemos un abuso de la etiqueta <br> (html5) o <br/> (xhtml).

A veces es práctico usar varios <br> uno detrás de otro para cuestiones estéticas. Sin embargo lo más apropiado sería usar CSS para todo lo concerniente a la estética.

<!-- mal: -->
<p>un párrafo de texto muy largo que quiero hacer varias líneas y me da un poquito de perza hacerlo con CSS <br><br>entonces como uso wordpress o parecido lo hago con html.</p>

Querido lector,

En la soledad de nuestro ordenador en ocasiones es difícil ver los errores propios. Sobre todo en esta fase tan inicial en la que todo puede resultar nuevo.

La solución pasa por usar un validador de código. Si tienes curiosidad te recomiendo leer esta entrada sobre validadores de documentos web.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!