Estandariza tu código HTML

Estaba leyendo un artículo en Maestros del Web y me pareció genial el tema del que hablaba, de la estandarización de nuestro código HTML y CSS y no sólo es un capricho para que nuestro código se vea a simple vista ordenado, sino porque yo mismo he visto que no hacer caso de las opciones que voy a poner realmente te costará caro, porque IE como sea acepta tu código casi con las patas arriba pero navegadores más estrictos como Firefox o Safari no te van a aceptar un código cortado o enchicado, así que pues, ya sabes si eres diseñador web, lee estas pequeñas reglas, yo les daré un toque más.

Buenas prácticas: recuerda, en XHTML:

-No se utilizan más las antiguas etiquetas “de formato” como: <b>, <i>, <u>, <font> , utiliza CSS

-Todas las etiquetas así como sus atributos van en minúsculas: <div>, <span> no se te ocurra en realidad escribir cosa alguna en mayúsculas, porque a parte se ve horrible e inentendible

-Todas las etiquetas deben cerrarse (<p> … </p>), incluso las que sólo utilizan un tag (ej: <img src=”…” /> o <br />)  este error es muy común, lo que hace que en general tu código se heche a perder

-Todos los atributos deben estar entre comillas dobles (<a href=”…” title=”…”> … </a>).  no comillas simples ‘’ o sin ellas, como les dije una cosa es que IE te lo acepte.

-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). no los utilices si tus páginas son dinámicas, mejor usa Ajax

-Todos los estilos se definen mediante CSS (idealmente en un archivo externo, no embebido en el XHTML). Aunque trata de no meter todos tus CSS en un sólo archivo, puesto que si quieres modficar una sola página, todo el diseño de tu sitio lo hará también

-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! es calificación de un 0 si en un sitio web utilizas tablas para contener otra cosa que no sea información, y más para darle espacio a tu sitio