Los estándares web como todos sabemos son ciertas pautas o recomendaciones que indican cómo debería ser un código XHTML y CSS correcto. La entidad que regula éstos estándares es el W3C (World Wide Web Consortium).

Un sitio desarrollado acorde a dichos estándares web debe tener un código limpio, basar su diseño en CSS y ser accesible y amigable, tanto para el usuario (cualquiera sea su condición), como para los motores de búsqueda.

Las ventajas de los estándares web:

  • El que tu sitio siga ciertas pautas o estándares establecidos, te posibilita diferenciarte del resto, además de contribuir a un internet más ordenado, semántico y estándar.
  • Los estándares web nos permite lograr la correcta visualización de nuestra web en cualquier navegador tradicional que cumpla los estándares web, así como en navegadores web no tradicionales permitiendo la accesibilidad.
  • Además de esto, los estándares web en conjunto con un código semántico nos ayudan en la tarea de posicionar una web en buscadores. El uso correcto de las etiquetas de títulos <h1>, subtítulos <h2>, <h3>, párrafos <p>, negritas <strong> para resaltar palabras o frases ayudan a los buscadores a interpretar mejor el contenido de un sitio, así como que frases o palabras son más relevantes.

Buenas prácticas: recuerda, en XHTML:

  • No se utilizan más las antiguas etiquetas “de formato” como: <b>, <i>, <u>, <font>
  • Todas las etiquetas así como sus atributos van en minúsculas: <div>, <span>
  • Todas las etiquetas deben cerrarse (<p> … </p>), incluso las que sólo utilizan un tag (ej: <img src=”…” /> o <br />)
  • Todos los atributos deben estar entre comillas dobles (<a href=”…” title=”…”> … </a>).
  • Ya no se utiliza el parámetro target=”…” en los links de forma que se permite al usuario navegar como desee (abrir los links en otra ventana, en la misma o en otra pestaña).
  • Los marcos (frames) tienden a desaparecer (aunque aún pueden usarse en una especificación para framesets, no son recomendados).
  • Todos los estilos se definen mediante CSS (idealmente en un archivo externo, no embebido en el XHTML).
  • Es recomendable utilizar title (para una descripción del elemento, utilizado principalmente en links aunque es aplicable a otras etiquetas), así como el alt (texto alternativo) para las imágenes.
  • Al anidar etiquetas (poner unas dentro de otras) debemos tener en cuenta que hay elementos block (<p>, <div>, <h1>, <ul>, <form>, etc.) que (en general) inician una nueva línea y elementos inline (<span>, <a>, etc.) que no lo hacen. Debemos tener en cuenta que no debemos anidar elementos block dentro de elementos inline.
  • Por supuesto, lo ya repetido hasta el cansancio: las tablas son para presentar datos tabulares, no para maquetar tu sitio. Utiliza capas (divs) para eso!

Prueba final: valida tu sitio!

Qué te parece si primero pasas tu sitio tal como lo tienes por el validador, revisas cuántos errores te da, luego que hagas las modificaciones validalo de nuevo, nos compartes el antes y después de tu trabajo de validación. De está forma veremos los resultados de tu trabajo e inspiras a otros hacerlo.

Puedes pasar tu web por el validador W3C para ver que tan bien está tu código XHTML de acuerdo a los estándares web y si trabajaste el CSS también puedes validarlo.

Bueno, espero que este artículo te haya motivado a validar tu sitio web, revisar el código o al menos pensar un poco en los estándares web y los grandes beneficios que pueden traerte. Me encantaría leer en los comentarios si tú sitio valida o no y por qué, así como cualquier duda o consulta que tengas para hacer que tú sitio sea válido! 😉