Despdete de los elementos que HTML5 NO quiere que sigas usando

Que HTML5 apuesta por dotar de semntica a la web y dejar todas las caractersticas 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 tambin hay elementos destinados a acabar desapareciendo del lenguaje de la eb. !omo siempre, en el lapso de tiempo entre que han sido depreciados y el momento en que se los considere obsoletos ser" largo y muchos nave adores se uirn 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
$esaparecen aquellos elementos que eran meras referencias al formato de lo contenido por ellos. %s 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>. & es que, aunque el comportamiento por defecto sea el mismo, puede que el 'e(t'o)peech 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 fcil de reempla ar con s!lo aplicar estilos a nivel de todo el documento" y el se#undo $aci%ndolo para cada elemento al que dotemos de semntica a trav%s de una clase" por ejemplo.

<big>
Este elemento me $a sorprendido que se si#uiera usando" ya que es uno de esos vesti#ios de los tiempos de <blink> o <marquee>. Un cambio de font-size en el CSS es suficiente para no ec$arlo de menos.

<center>
El ms usado de los elementos puramente formateadores" se#uramente ser de los ms usados en &ebs personales que ten#an 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 ima#en o un t'tulo" lo l!#ico es que se $a#a la propiedad text-align:center y as' no ec$arnos las manos a la cabe a si por una pol'tica editorial se decide cambiar la posici!n de los encabe ados de una &eb) 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%+ ,ues porque el primero indica un te-to tac$ado y el se#undo un contenido eliminado" lo cual lo dota de ms semntica. ,ero es que adems un te-to tac$ado puede ser dif'cil de leer" y qui nos interese se(alar que un te-to $a sido eliminado cambiando ese tac$!n por una fuente de color #ris que s' nos permita distin#uir una c de una e al no estar atravesadas por una l'nea $ori ontal.

<tt>

.o" no $ablamos de los trendin# topics de T&itter" sino del te-to formateado como teletipo. */ qu% ten'a de especial+ ,ues una fuente monoespaciada y poco ms. Como veis" otro elemento fcil de suplir v'a CSS.

Elementos que perjudicaban la usabilidad y accesibilidad

<frame>
<frameset>

y <noframes>

,or fin HTML se decide a desterrar ese en#endro que convert'a la ventana de nuestro nave#ador en un mosaico donde las barras de despla amiento entorpec'an" el bot!n de retroceso pod'a aplicar s!lo a una fracci!n" pinc$ar en un enlace pod'a abrirte la p#ina en el marco no deseado por no $aber establecido bien el tar#et" y la descripci!n de la p#ina en 0oo#le era 1Esta p#ina usa marcos" pero su e-plorador no los admite2. 3unque os pare ca mentira" a d'a de $oy si#ue e-istiendo #ente que maqueta sus p#inas con marcos 4ejemplo5" a pesar de e-istir alternativas mejores por no fraccionar la &eb y tan fciles de adoptar como <iframe>.

Elementos poco usados o confusos

<acronym>
3parte del poco %-ito de este elemento" para muc$os de nosotros 4me incluyo5 resulta dif'cil distin#uirlo a bote pronto de <abbr> ya que 4perd!nenme los lin#6istas5 la diferencia entre si#las" acr!nimos y abreviaturas es ms bien poca. 3s' pues" a partir de a$ora todos ellos se consideran abreviaturas y se representarn con <abbr>.

<applet>
.o ten'a sentido permitir que cada compa('a crease un elemento HTML para insertar su tecnolo#'a" ya que el estndar se convertir'a en un marem#num de ta#s. ,or ello"

a <applet> le tocar pasar por el aro y convertirse en un <object> ms" sin nin#7n privile#io sobre el resto de objetos de plu#ins.

<isindex>
Un elemento poco conocido que no es de e-tra(ar que vaya a desaparecer. 8sta es su representaci!n)

Se trata de un 'ndice que admite b7squedas. 9ntroduce las palabras clave de b7squeda)

Como veis" este elemento se sacaba de la man#a un te-to 4en mi nave#ador :irefo- en espa(ol es 18ste es un 'ndice de b7squeda. 9ntrodu ca las palabras a buscar25 y proporcionaba una caja de te-to" introduciendo adems unas l'neas delante y detrs que pod'an car#arse toda la est%tica de la p#ina. En definitiva" una rare a que por toda l!#ica debe sustituirse por un <input> y su correspondiente<label>.

<dir>
Este elemento es totalmente equivalente a <ul>" que debemos usar en su lu#ar" ya que su resultado era una lista no ordenada con la particularidad de que el contenido $ac'a referencia a un directorio.

* 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 eb. *hora, con la nueva especificaci-n de HTML5, podremos seguir disfrutando de sus beneficios sin tener ese e(tra,o +cargo de conciencia+. &a era hora. /no 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 !oo le, "ahoo... Parece ser que con la utilizaci-n de la

etiqueta # object type$%te&t'html%( # 'object( de laespecificaci)n HTML5, esto va a pasar a la historia.

*no de los principales problemas es +ue los marcos o iframes no podan visuali,arse correctamente en los sistemas de visuali,aci)n de p inas de los buscadores- tales como !oo le- "ahoo..

0eamos la diferencia entre la +vieja+ especificaci-n y la nueva1 / HTML01 < iframe width="400" height="400" scrolling="no" frameborder="0" src="http://www.lapaginaweb.loquesea" target=" top"> < /iframe> / HTML51 < ob!ect t"pe="te#t/html" data="http://www.lapaginaweb.loquesea" width="400" height="400"> < /ob!ect> !omo vemos, su utilizaci-n es realmente sencillo e intuitiva1 inicio etiqueta object con el tipo de datos correspondiente 2 /34 dela p"gina que queramos embeber 2 dimensiones (anchura y altura) 2 cierrre etiqueta object1. 3ealmente sencillo, c-modo y +pol#ticament

Cambios $acia la estructuraci!n y la &eb semntica

La maquetaci!n $asta a$ora se $ac'a mediante capas con la etiqueta ;div<. 3$ora ya no es necesario" porque se $an incorporado una serie de etiquetas estructurales que permiten definir las partes b!sicas de una p!gina y estructurar su contenido )

Encabe ado <header> ,ie <footer> =ona de nave#aci!n <nav> Secciones de la p#ina <section> 3rt'culos <article> 9nformaci!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 e"istentes . Esto no quiere decir que deje de emplearse ;div<" sino que deja de ser imprescindible para maquetar.

Gua bsica de HTML 5 para diseadores web

HTML 5 para diseadores web

5ace 67 a,os que se actualiz- por 8ltima vez el 5'94 con la especificaci-n :.76. $esde entonces, la ;eb ha cambiado radicalmente como tambin lo ha hecho el modo de dise,ar y desarrollar p"ginas. )e han estandarizado una serie de elementos como los encabezados o el men8, se utiliza *ja( para recargar el contenido din"micamente y todo el mundo usa !)) para definir los atributos visuales de la p"gina. %l nuevo 5'94 < 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. !onviene recordar, que en sus or#genes el 5'94 no era m"s que un lenguaje de etiquetas sencillo orientado a poner en l#neas trabajos acadmicos. Por eso, por ejemplo, tenemos seis niveles de t#tulos (=h6>, =h?>@ =hA>) que casi nadie usa en su totalidad. %l estado actual del 5'94 < es el de un borrador que est" madurando. 4a primera versi-n sali- a la luz en enero de ?77B pero ha sido revisada varias veces. )in embargo, navegadores como Cirefo( D.< o Enternet %(plorer B ya pueden interpretarlo y tienen soporte para las etiquetas y tecnolog#as que vienen de la mano.

Las novedades

%l borrador del 5'94 < es un documento complejo y e(tenso. 5ice la prueba de convertirlo a P$C obtuve un documento de 6FDF hojas tama,o *:. )in embargo, hay mucha informaci-n estrictamente tcnica que no afecta al dise,o ;eb como dice %ric 9eyer . Por ejemplo, el c-mo hacer un an"lisis sint"ctico (GparsearH) del componente tiempo o c-mo moverse por el historial del navegador. %n lo que es estrictamente dise,o lo m"s importante son las eti+uetas del HTML 5. Pero antes avanzar conviene recordar que Icomo es habitual en el ;D!I se asegura la compatibilidad hacia atr"s con lo cual podemos seguir escribiendo en el viejo 5'94 : sin miedo porque los navegadores seguir"n mostrando correctamente las p"ginas. )in embargo, profesionalmente nos vamos a quedar atr"s y en alg8n momento debemos encarar la transici-n. 9ejor hacerlo ahora.

Etiquetasquesalen
!on la llegada del !)) muchas etiquetas del 5'94 que afectaban la presentaci-n de los elementos de pantalla cayeron en desuso. *hora definitivamente se eliminan. 'odas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo. %l listado de eti+uetas +ue caen en desuso Iporque ya e(iste una forma de hacer lo mismo con !))I es el siguiente1 CJK' !%K'%3 )'3EL% M*)%CJK' MEN ) )'3EL% '' / %l 5'94 < elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. Ko ocurre lo mismo con el EC3*9% que seguir" siendo v"lido. Por lo tanto, las eti+uetas vinculadas con los frames +ue salen son1 C3*9% C*9%)%' KJC3*9%) Para terminar, encontramos eti+uetas +ue ya no se usan porque creaban confusi-n o hac#an lo mismo que otras ya e(istes. %stas son1 *!3JK&9 *PP4%' E)EK$%O $E3

Etiquetasqueentran

!omo mencion anteriormente, una prioridad del 5'94 < 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. 5ay ?? nuevas etiquetas y son las siguientes1 6. )%!'EJK ?. *3'E!4% D. *)E$% :. 5N3J/P <. 5%*$%3 A. CJJ'%3 F. K*0 B. $E*4JN P. CEN/3% 67. 0E$%J 66. %9M%$ 6?. 9*3L 6D. P3JN3%)) 6:. 9%'%3 6<. 'E9% 6A. 3/M& (3' y 3P) 6F. !*K0*) 6B. !J99*K$ 6P. $%'*E4) ?7. $*'*4E)' ?6. L%&N%K ??. J/'P/' 'ambin tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en EKP/' solo pod#as escoger entre botones, casillas de verificaci-n, campos de te(to o clave y pocas opciones m"s. *hora tenemos atributos espec#ficos como )%*3!5 si se trata de un campo de b8squeda, %9*E4 si el usuario tiene que introducir un correo electr-nico o $*'% si es una fecha. 'ambin aparece el atributo */'JCJ!/) para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al Qava)cript.

PrimerospasosconHTML5
0oy a intentar e(plicar algunas de las nuevas etiquetas (las m"s importantes en mi opini-n) a travs de un ejemplo pr"ctico. )upongamos que tenemos un sitio cl"sico formado por el encabezado, men8 a la izquierda, contenido y pide de p"gina. %n 5'94 :.76 hubisemos usado algo as#1

Esquema de una pgina en HTML 4

9ientras que en 5'94 < podemos hacer m"s e(pl#cito el contenido de cada secci-n en lugar de usar identificadores para los $E0s.

Esquema de una pgina en HTML 5

!laramente podemos adivinar que 5%*$%3 sive para definir el encabezado del sitio, K*0 contiene los enlaces para navegar y CJJ'%3 la informaci-n del pie de p"gina. 4uego aparecen una serie de etiquetas para especificar dentro del "rea de contenido el tipo de informaci-n que agregamos. )%!'EJK obviamente marca el inicio y fin de una secci-n, *3'E!4% sirve para indicar cada art#culo (muy 8til en un blog, por ejemplo) mientras que CEN/3% es usado para se,alar que un elemento se trata de una ilustraci-n que acompa,a un te(to. %stos elementos puede ser tanto una imagen, como un video o un audio. Pasemos este esquema a c-digo 5'94 <1
<html> <head> <title>Mi Sitio </title> </head> <body> <header> <h1><a href= /home>El nombre o ttulo de mi Sitio</a></h1> </header> <nav> <ul> <li><h2>Sitio</h2> <ul> <li><a href= /home/ >!ni"io</a></li> <li><a href= /a"er"a >#"er"a $e</a></li> <li><a href= /"onta"to >%onta"to</a></li> </ul> </li> </ul> </nav> <se"tion> <arti"le> <h2><a href= /html&' >(as novedades del )*M( '</a></h2> <+>(a nueva versi,n del lengua-e ya est. a/u y llega "on nuevos "ambios000 </+> </arti"le> <arti"le> <h2><a href= /tutoriales&"on&%SS >*utoriales "on %SS</a></h2> <+>1ueva serie de tutoriales "on %SS sobre la +osiblidad de "rear efe"tos "on nuestras imagenes000</+> <figure> <video sr"= /video></video> <legend>2ideo e3+li"ativo sobre uso de %SS +ara efe"tos</legend> </figure> </arti"le> <nav> <a href= /blog/+age/2/ >M.s arti"ulos</a> </nav> </se"tion> <footer> <+>%o+yright 2415 +or -uan</+>

</footer> </body> </html>

%ste ejemplo es muy simple pero sirve para analizar la estructura b"sica de una p"gina eb en 5'94 <. !omo se puede ver, en este caso us la etiqueta CEN/3% para insertar un video y que acompa, con 4%N%K$ para agregarle el ep#grafe. %l 5'94 < tambin tiene etiquetas para tipos de contenidos muy espec#ficos. 9uchas se pueden comprender f"cilmente1 'E9% para mostrar la hora, $*'% para las fechas, */$EJ para insertar sonidos o 9%'%3 para representar una magnitud de medici-n (el espacio en el disco r#gido, por ejemplo). Jtras no lo son tanto pero su uso es interesante. /n par de ejemplos
2S3451 %s para lo que en periodismo se llaman GapostillasH, esto es, una

informaci-n adicional sobre un tema pero que no hace al centro del a cuesti-n. !omo los recuadros que acompa,an a veces la nota central de una revista.
678!75SS1 Para representar el avance de una tarea como puede ser el

proceso de registro o suscripci-n en una eb.

Conclusin

%l 5'94 < trae bastantes novedades, muchas de ellas necesarias despus de 67 a,os sin demasiados cambios. Kos guste o no, lo cierto es que 5'94 < se terminar" convirtiendo en un est"ndar para el desarrollo de p"ginas eb. Ko hay que perder de vista que el borrador que define las caracter#sticas del 5'94 < es un documento en desarrollo que est" sujeto a cambios. /na serie de dise,adores influyentes como *aron Nustafson, %ric 9eyer y Qeffrey Reldman crearon 5'94 < )uper Criends para apoyar la direcci-n que est" tomando la nueva versi-n del lenguaje. 0arias de sus sugerencias est" siendo incorporadas lo cual significa que el ;D! realmente est" escuchando la opini-n de los profesionales. /n incentivo m"s para comenzar a estudiar, debatir y opinar.