Al sentarme frente al editor de textos para hacer un nuevo código XHTML para un sitio web siempre empiezo de manera mecánica, pero sin corrección en los pasos. Disfrutando de la red me encontré con una guía de estilo de la Biblioteca Pública de Nueva York ( The New York Public Library ). En esta guía se explican y asientan muy bien las bases para un buen diseño de código XHTML válido desde el punto estricto del organismo regulador del código para internet World Wide Web Consortium (W3C).
El texto original muestra la mejor de las maneras de pasar nuestro HTML a XHTML. Lo que aquí escribo es un resumen esquemático de consulta rápida que me sea útil y al grano, que para eso tengo un blog… 🙂
Reglas de código de un archivo convertido de HTML a XHTML 1.0 Transitional
Declaración del tipo de documento (DOCTYPE) de XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Declaración formal del XHTML, es opcional indicar el idioma de la página:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
Codificación del texto ( iso-8859-1, UTF-8, … ) :
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
Escribir todos los tags o etiquetas en minúsculas
Poner entre comillas los valores de los atributos ( por ejemplo: height="55" )
Cerrar todos los tags o etiquetas ( por ejemplo: <p>Hola Mundo</p> )
Cerrar todos los tags vacíos ( por ejemplo: <br /> ó <img src="pic.jpg" /> )
El tag img debe contener el atributo ‘alt‘:
<img src="pic.jpg" alt="MacOSas" title="Imagen de ejemplo de MacOSas" />
Estructurar cada página empleando tags de XHTML, quedan prohibidos tags como <font>
En las listas ordenadas emplear el uso de los tags <ul><li> .... </li></ul>
Emplear <strong> en lugar de <b>, <em> en lugar de <i>
Emplear para los enlaces nulos JavaScript en lugar de #
Las tablas vacías no deben tener caracteres de párrafo añadidos, como ocurre en los XHTML de Dreamweaver ( <td> </td> )
Accesibilidad y Estándar Web
- Escribir la cabecera del documento XHTML apropiado (DOCTYPE y tag XML)
- Dar la equivalencia en texto de elementos como imágenes, animaciones, audio, video…
- Proporcionar esquemas de texto de los gráficos y tablas de datos
- Asegurarse de que la información de color será legible si el navegador no carga el color
- Tener claros los distinos idiomas y su legibilidad para las equivalencias de textos
- Estructurar de forma lógica y clara el contenido
- Proporcionar enlaces a software para visualizar bien el contenido (plugins, applets…)
- Asegurarse de que las tablas de datos se pueden leer en un navegador web y en cualquier otro dispositivo tecnológico con su contenido en un orden lógico
- Ordenar de modo lógico las secciones para que el usuario no tenga que hacer innecesarios clicks en el sitio web.
- Ordenar de modo lógico y ordenado los pasos de tabulador en los formularios
- Evitar el espaciador con GIF’s transparentes o similares
- Evitar el uso de tablas para posicionar, mejor posicionar con capas y usar las tablas solo como contenedor de elemntos de texto e imagenes
CSS :: Guía de estilos
(continuará….)