Despídete de los elementos que HTML5 NO quiere que sigas usando

Que HTML5 apuesta por dotar de semántica a la web y dejar todas

las características de formato a CSS es algo que no nos pilla por

sorpresa. Pero mientras intentamos familiarizarnos con todos los elementos

y atributos nuevos (como output   y  number , de los que ya os hablamos),

obviamos que también hay elementos destinados a acabar desapareciendo

del lenguaje de la web.

Como siempre, en el lapso de tiempo entre que han sido depreciados y el

momento en que se los considere obsoletos será largo y muchos

navegadores seguirán dando soporte para permitir la

retrocompatibilidad, pero es conveniente que vayamos conociendo la

mejor forma de reemplazar los elementos que por uno u otro motivo

deberíamos evitar.

Elementos de formato

Desaparecen aquellos elementos que eran meras referencias al formato de

lo contenido por ellos. Es algo que nos sonará, pues hace tiempo que se nos

sugiere  enfatizar  con  <em> en lugar de usar cursiva

con <i> y resaltar con <strong> en lugar de usar negrita con <b>. Y es

que, aunque el comportamiento por defecto sea el mismo, puede que el

TextToSpeech de un navegador para ciegos interprete <strong> como una

subida en el volumen.

<basefont> y <font>

Un claro ejemplo de elementos que deben implementarse a nivel CSS y no HTML. El

primero es fácil de reemplazar con sólo aplicar estilos a nivel de todo el documento, y el

segundo haciéndolo para cada elemento al que dotemos de semántica a través de una

clase, por ejemplo.

<big>

Este elemento me ha sorprendido que se siguiera usando, ya que es uno de esos vestigios

de los tiempos de <blink> o <marquee>. Un cambio de font-size en el CSS es

suficiente para no echarlo de menos.

<center>

El más usado de los elementos puramente formateadores, seguramente será de los más

usados en webs personales que tengan cierta edad, ya que solía ser uno de los primeros

que se enseñaban en los manuales de HTML. Lo cierto es que si queremos centrar una

imagen o un título, lo lógico es que se haga la propiedad text-align:center y así no

echarnos las manos a la cabeza si por una política editorial se decide cambiar la posición

de los encabezados de una web: un cambio en una línea del CSS nos bastará.

<strike>

Caso curioso el de <strike>, ya que sólo debemos cambiar su uso por el de <del>. ¿El

porqué? Pues porque el primero indica un texto tachado y el segundo un contenido

eliminado, lo cual lo dota de más semántica. Pero es que además un texto tachado puede

ser difícil de leer, y quizá nos interese señalar que un texto ha sido eliminado cambiando

ese tachón por una fuente de color gris que sí nos permita distinguir una c de una e al no

estar atravesadas por una línea horizontal.

<tt>

No, no hablamos de los trending topics de Twitter, sino del texto formateado como teletipo.

¿Y qué tenía de especial? Pues una fuente monoespaciada y poco más. Como veis, otro

elemento fácil de suplir vía CSS.

Elementos que perjudicaban la usabilidad y accesibilidad

<frame>, <frameset> y <noframes>

Por fin HTML se decide a desterrar ese engendro que convertía la ventana de nuestro

navegador en un mosaico donde las barras de desplazamiento entorpecían, el botón de

retroceso podía aplicar sólo a una fracción, pinchar en un enlace podía abrirte la página en

el marco no deseado por no haber establecido bien el target, y la descripción de la página

en Google era “Esta página usa marcos, pero su explorador no los admite”.

Aunque os parezca mentira, a día de hoy sigue existiendo gente que maqueta sus páginas

con marcos (ejemplo), a pesar de existir alternativas mejores por no fraccionar la web y tan

fáciles de adoptar como <iframe>.

Elementos poco usados o confusos

<acronym>

Aparte del poco éxito de este elemento, para muchos de nosotros (me incluyo) resulta

difícil distinguirlo a bote pronto de <abbr> ya que (perdónenme los lingüistas) la

diferencia entre siglas, acrónimos y abreviaturas es más bien poca. Así pues, a partir de

ahora todos ellos se consideran abreviaturas y se representarán con <abbr>.

<applet>

No tenía sentido permitir que cada compañía crease un elemento HTML para insertar su

tecnología, ya que el estándar se convertiría en un maremágnum de tags. Por ello,

a <applet> le tocará pasar por el aro y convertirse en un <object> más, sin ningún

privilegio sobre el resto de objetos de plugins.

<isindex>

Un elemento poco conocido que no es de extrañar que vaya a desaparecer. Ésta es su

representación:

Se trata de un índice que admite búsquedas. Introduce las palabras clave de

búsqueda: 

Como veis, este elemento se sacaba de la manga un texto (en mi navegador Firefox en

español es “Éste es un índice de búsqueda. Introduzca las palabras a buscar”) y

proporcionaba una caja de texto, introduciendo además unas líneas delante y detrás que

podían cargarse toda la estética de la página.

En definitiva, una rareza que por toda lógica debe sustituirse por un <input> y su

correspondiente<label>.

<dir>

Este elemento es totalmente equivalente a <ul>, que debemos usar en su lugar, ya que

su resultado era una lista no ordenada con la particularidad de que el contenido hacía

referencia a un directorio.

A pesar de que no esté demasiado 'bien vista', la etiqueta iframe (< iframe> < /iframe> ) nos ha sacado a muchos de nosotros de verdaderos apuros a la hora de plasmar un diseño o desarrollo web. Ahora, con la nueva especificación de HTML5, podremos seguir disfrutando de sus beneficios sin tener ese extraño 'cargo de conciencia'. Ya era hora!

Uno de los principales problemas es que los marcos o iframes no podían visualizarse correctamente en los sistemas de visualización de páginas de los buscadores, tales como Google, Yahoo... Parece ser que con la utilización de la etiqueta < object type="text/html"> < /object> de laespecificación HTML5, esto va a pasar a la historia.

Uno de los principales problemas es que los marcos o iframes no podían visualizarse correctamente en los sistemas de visualización de páginas de los buscadores, tales como Google, Yahoo..

Veamos la diferencia entre la 'vieja' especificación y la nueva:

- HTML4:

< iframe width="400" height="400" scrolling="no" frameborder="0" src="http://www.lapaginaweb.loquesea" target="_top"> < /iframe>

- HTML5:

< object type="text/html" data="http://www.lapaginaweb.loquesea" width="400" height="400"> < /object>

Como vemos, su utilización es realmente sencillo e intuitiva: inicio etiqueta object con el tipo de datos correspondiente + URL dela página que queramos embeber + dimensiones (anchura y altura) + cierrre etiqueta object:. Realmente sencillo, cómodo y 'políticament

Cambios hacia la estructuración y la web semántica

 La maquetación hasta ahora se hacía mediante capas con la etiqueta <div>. Ahora ya no es

necesario, porque se han incorporado una serie de etiquetas estructurales que permiten definir

las partes básicas de una página y estructurar su contenido:

 

Encabezado <header>

Pie <footer>

Zona de navegación <nav>

Secciones de la página <section>

Artículos <article>

Información que sale del flujo normal del contenido, como definiciones o aclaraciones,

ampliación de la información...<aside>

Estas nuevas etiquetas proporcionan soluciones ante demandas existentes. Esto no quiere

decir que deje de emplearse <div>, sino que deja de ser imprescindible para maquetar.

Guía básica de HTML 5 para diseñadores web

HTML 5 para diseñadores web

Hace 10 años que se actualizó por última vez el HTML con la especificación

4.01. Desde entonces, la Web ha cambiado radicalmente como también lo

ha hecho el modo de diseñar y desarrollar páginas. Se han estandarizado

una serie de elementos como los encabezados o el menú,  se utiliza Ajax

para recargar el contenido dinámicamente y todo el mundo usa CSS para

definir los atributos visuales de la página.

El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta

elementos para desarrollar páginas dándole un valor especial a la

semántica, es decir, que se pueda reconocer desde el propio código el tipo

de contenido que se está mostrando. Conviene recordar, que en sus

orígenes el HTML no era más que un lenguaje de etiquetas sencillo

orientado a poner en líneas trabajos académicos. Por eso, por ejemplo,

tenemos seis niveles de títulos (<h1>, <h2>… <h6>) que casi nadie usa en

su totalidad.

El estado actual del HTML 5 es el de un borrador que está madurando. La

primera versión salió a la luz en enero de 2008 pero ha sido revisada varias

veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya

pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que

vienen de la mano.

Las novedades

El borrador del HTML 5 es un documento complejo y extenso. Hice la

prueba de convertirlo a PDF  obtuve un documento de 1737 hojas tamaño

A4. Sin embargo, hay mucha información estrictamente técnica que no

afecta al diseño Web como dice Eric Meyer . Por ejemplo, el cómo hacer un

análisis sintáctico (“parsear”) del componente tiempo o cómo moverse por

el historial del navegador.

En lo que es estrictamente diseño lo más importante son las etiquetas del

HTML 5. Pero antes avanzar conviene recordar que -como es habitual en

el W3C- se asegura la compatibilidad hacia atrás con lo cual podemos

seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores

seguirán mostrando correctamente las páginas. Sin embargo,

profesionalmente nos vamos a quedar atrás y en algún momento debemos

encarar la transición. Mejor hacerlo ahora.

Etiquetas que salen

Con la llegada del CSS muchas etiquetas del HTML que afectaban la

presentación de los elementos de pantalla cayeron en desuso. Ahora

definitivamente se eliminan. Todas pueden ser perfectamente

reempalzadas por atributos en las hojas de estilo.

El listado de etiquetas que caen en desuso -porque ya existe una forma

de hacer lo mismo con CSS- es el siguiente:

FONT

CENTER

STRIKE

BASEFONT

BIG

S

STRIKE

TT

U

El HTML 5 elimina completamente el uso de frames (marcos) por razones

de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que

seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los

frames que salen son:

FRAME

FAMESET

NOFRAMES

Para terminar, encontramos etiquetas que ya no se usan porque creaban

confusión o hacían lo mismo que otras ya existes. Estas son:

ACRONYM

APPLET

ISINDEX

DIR

Etiquetas que entran

Como mencioné anteriormente, una prioridad del HTML 5 es darle valor

semántico al código para que se pueda reconocer fácilmente la función de

los elementos en una página. Por eso, aparecen muchos indicadores de

secciones y contenedores para tipos de contenido específicos.

Hay 22 nuevas etiquetas y son las siguientes:

1. SECTION

2. ARTICLE

3. ASIDE

4. HGROUP

5. HEADER

6. FOOTER

7. NAV

8. DIALOG

9. FIGURE

10. VIDEO

11. EMBED

12. MARK

13. PROGRESS

14. METER

15. TIME

16. RUBY (RT y RP)

17. CANVAS

18. COMMAND

19. DETAILS

20. DATALIST

21. KEYGEN

22. OUTPUT

También tenemos etiquetas que soportan nuevos atributos. Por ejemplo,

anteriormente en INPUT solo podías escoger entre botones, casillas de

verificación, campos de texto o clave y pocas opciones más. Ahora tenemos

atributos específicos como SEARCH si se trata de un campo de búsqueda,

EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es

una fecha. También aparece el atributo AUTOFOCUS para poder poner el

foco de un formulario en un lugar concreto sin tener que recurrir al

JavaScript.

Primeros pasos con HTML 5

Voy a intentar explicar algunas de las nuevas etiquetas (las más

importantes en mi opinión) a través de un ejemplo práctico. Supongamos

que tenemos un sitio clásico formado por el encabezado, menú a la

izquierda, contenido y pide de página.

En HTML 4.01 hubiésemos usado algo así:

Esquema de una página en HTML 4

Mientras que en HTML 5 podemos hacer más explícito el contenido de

cada sección en lugar de usar identificadores para los DIVs.

Esquema de una página en HTML 5

Claramente podemos adivinar que HEADER sive para definir el encabezado

del sitio, NAV contiene los enlaces para navegar y FOOTER la información

del pie de página.

Luego aparecen una serie de etiquetas para especificar dentro del área de

contenido el tipo de información que agregamos. SECTION obviamente

marca el inicio y fin de una sección, ARTICLE sirve para indicar cada

artículo (muy útil en un blog, por ejemplo) mientras que FIGURE es usado

para señalar que un elemento se trata de una ilustración que acompaña un

texto. Estos elementos puede ser tanto una imagen, como un video o un

audio.

Pasemos este esquema a código HTML 5:

<html><head> <title>Mi Sitio </title></head> <body><header> <h1><a href= “/home”>El nombre o título de mi Sitio</a></h1></header> <nav><ul> <li><h2>Sitio</h2> <ul> <li><a href="/home/">Inicio</a></li>

<li><a href=" /acerca">Acerca De</a></li> <li><a href="/contacto">Contacto</a></li> </ul> </li></ul></nav> <section> <article> <h2><a href="/html-5">Las novedades del HTML 5</a></h2> <p>La nueva versión del lenguaje ya está aquí y llega con nuevos cambios... </p> </article>  <article> <h2><a href="/tutoriales-con-CSS">Tutoriales con CSS</a></h2> <p>Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectos con nuestras imagenes...</p> <figure> <video src= “/video”></video> <legend>Video explicativo sobre uso de CSS para efectos</legend> </figure> </article>  <nav> <a href="/blog/page/2/">Más articulos</a> </nav>  </section> <footer> <p>Copyright 2013 por juan</p></footer> </body></html>

Este ejemplo es muy simple pero sirve para analizar la estructura básica de una página web en HTML 5. Como se puede ver, en este caso usé la etiqueta FIGURE para insertar un video y que acompañé con LEGEND para agregarle el epígrafe.

El HTML 5 también tiene etiquetas para tipos de contenidos muy específicos. Muchas se pueden comprender fácilmente: TIME para mostrar la hora, DATE para las fechas, AUDIO para insertar sonidos o METER para representar una magnitud de medición (el espacio en el disco rígido, por ejemplo).  Otras no lo son tanto pero su uso es interesante. Un par de ejemplos

ASIDE: Es para lo que en periodismo se llaman “apostillas”, esto es, una información adicional sobre un tema pero que no hace al

centro del a cuestión. Como los recuadros que acompañan a veces la nota central de una revista.

PROGRESS: Para representar el avance de una tarea como puede ser el proceso de registro o suscripción en una web.

Conclusión

El HTML 5 trae bastantes novedades, muchas de ellas necesarias después de 10 años sin demasiados cambios. Nos guste o no, lo cierto es que HTML 5 se terminará convirtiendo en un estándar para el desarrollo de páginas web.

No hay que perder de vista que el borrador que define las características del HTML 5 es un documento en desarrollo que está sujeto a cambios. Una serie de diseñadores influyentes como Aaron Gustafson, Eric Meyer y Jeffrey Zeldman crearon HTML 5 Super Friends para apoyar la dirección que está tomando la nueva versión del lenguaje. Varias de sus sugerencias está siendo incorporadas lo cual significa que el W3C realmente está escuchando la opinión de los profesionales.

Un incentivo más para comenzar a estudiar, debatir y opinar.