viernes, 21 de enero de 2011

Cheat Sheet HTML 4.01, HTML 5, XHTML Elements

Descripción: Tabla en formato excel con todas los elementos HTML (incluido HTML 5) y XHTML con información relevante sobre ellos: navegadores que los soportan, anotaciones de accesibilidad, etc. (ver descripción detallada de la tabla)

Versión: [20.01.2011] versión 1.0 en castellano

Autor: Olga Carreras

Descarga: Cheat Sheet HTML 4.01, HTML 5, XHTML Elements (Excel, 189 KB)


Descripción detallada de la tabla


La tabla consta de 14 columnas. Los encabezados de las columnas se han bloqueados para que estén siempre disponibles aunque se escrole la tabla verticalmente.


Columna A: Elemento


Incluye todas los elementos (X)HTML (incluidos los de HTML 5) en orden alfabético con enlace a su descripción en la especificación correspondiente. También se incluyen elementos que no están en ninguna especificación del W3C como marquee, spacer, etc. en cuyo caso enlazan con una web de referencia. Es en estos enlaces donde se puede consultar información sobre los atributos de cada elemento.


No se han incluido los elementos que sólo están presentes en XHTML 2. Como excepción se incluye el elemento h de XHTML 2 para documentar los encabezados en esta especificación. Se pueden consultar todas las etiquetas de XHTML 2 en: XHTMl 2.0. List of elements del W3C.


Está primera columna está bloqueada para tener siempre presente el elemento aunque se escrole la tabla horizontalmente.




Columna B: Descripción


Breve descripción del elemento.




Columna C: Desaprobado/No estándar/Obsoleto


En esta columna se indica si los elementos son:



  • Desaprobado (deprecated): son elementos que están en la especificación HTML 4.01 o XHTML pero que el W3C los ha marcado como "deprecated", desaprobando su uso. No están permitidos en documentos STRICT. Se indica el elemento alternativo que debe usarse.

  • No estándar: son elementos no estándar, que fueron implementados por algunos navegadores (y que aún las soportan en muchos casos) pero que no pertenecen a ninguna especificación (X)HTML. En cada caso se indica el navegador que las implementó y las alternativas a su uso.

  • Obsoleto: son elementos de especificaciones anteriores (se indica de cual).

  • HTML 5: elementos que sólo pertenecen a HTML 5.



En cualquier otro caso la celda correspondiente aparece vacía.


Columna D: Web Browser Support


He documentado el soporte de cada elemento (incluidos los de HTML 5) en las diferentes versiones de navegadores.


Referencias sobre soporte en navegadores:



En algunos casos se indica el test concreto que se ha realizado para validar un elemento concreto.




Columna E-L: Especificación


Las columnas son:

Cuando la celda correspondiente está verde con el texto "SI" indica que el elemento pertenece a esa especificación.


Cuando la celda correspondiente está roja con el texto "NO" indica que el elemento no pertenece a esa especificación.


Algunas celdas pueden aparecer naranjas con una advertencia dentro. Por ejemplo, en el caso de que el elemento pertenezca a HTML 4.01 pero esté desaprobado y no pueda usarse con HTML 4.01 Strict, la celda correspondiente a la columna E (HTML 4.01) estará coloreada en naraja con la advertencia en su interior.




Columna M: Notas de accesibilidad


En este apartado se incluyen notas relevantes como el soporte en lectores de pantalla, ejemplos cuando se trata de elementos poco habituales, mención a puntos de verificación de las WCAG relacionadas con el elemento en cuestión, etc.




Columna N: ¿Semántico?


En esta columna se indica si es una elemento semántico o si por el contrario es un elemento de presentación. En algunos casos, como se indica, puede depender del uso que se haga de ella.


Referencias:





Otros enlaces de interés:




Podeis dejar en los comentarios cualquier propuesta o anotación para incluir en versiones posteriores.

2 comentarios :
Anónimo dijo...

¡Muy bueno! Me servirá de guía de referencia a diario. Muchas gracias!

Olga Carreras dijo...

Diferencias entre HTML5 y HTML4 (W3C) https://rawgit.com/whatwg/html-differences/master/Overview.html

Publicar un comentario en la entrada