Contenido

Tags HTML no recomendados y sus alternativas

13 jun

+ 25

A medida que pasa el tiempo, las estructuras web van puliendose y se van imponiendo tags/ atributos que ofrencen un valor añadido que otros no pueden añadir, elementos creados en una internet ya lejana.

Cuando la W3C, organismo que dicta las leyes sobre el desarrollo web, decide que un tag/atributo debería dejar de usarse, pasan automáticamente al estado “deprecated” (desaprovado),  este estado indica que este elemento no debe ser usado y generalmente ofrece una alternativa a este elemento más apropiada para la nueva especificación.

En esta página he visto un listado de estos tags/atributos “deprecated” por la W3C y sus correspondientes alternativas.

FONT / BASEFONT

Debido al uso intensivo de desarrollo web mediante CSS, tags orientados al diseño están condenados al olvido y estos dos tags son una muestra de ello.

Ejemplo “deprecated”

<basefont face="Arial" size="+1" color="green">Some text</basefont>

 Solución válida.

body { font-family: Arial, sans-serif; font-size: 10pt; color: green; }

CENTER / ALIGN

Al igual que el ejemplo anterior, los tags y atributos que aporten cualquier tipo de diseño sobre la estructura están siendo retirados para dejar a las propiedades CSS la función que antes hacían.

Ejemplo “deprecated”

<p align="center">Centered paragraph</p>
     <center><img src="pic.gif"></center>  

 Solución válida.

.center { text-align: center; }
<p class="center">Centered text</p>

U / S/ STRIKE

Estos tags indican una interacción con la apariencia del texto, por ello han pasado a mejor vida y han dejado que las propiedades de texto del CSS se adueñen del efecto.

Ejemplo “deprecated”

<u>Underlined text</u>
   <s>Strikethrough text</s>
   <strike>Strikethrough text</strike>

 Solución válida.

.u { text-decoration: underline; }
   .strike { text-decoration: line-through; }

   <span class="u">Underlined text</span>
   <span class="strike">Strikethrough text</span>

 Pasa exactamente lo mismo con tags como <b />, <i />, <big />, <smal /> y <tt />.

BACKGROUND /BGCOLOR

Más de lo mismo para estos elementos, han pasado a mejor vida, gracias a Dios, por que recuerdo las horas tontas modificando todos los bgcolor de una tabla para cambiar el aspecto.

Ejemplo “deprecated”

<body background="graytile.gif" bgcolor="#ff0023" >

 Solución válida.

body { background: gray url("graytile.gif"); }

BORDER

Otro atributo que no creo que echemos de menos en nuestras imagenes, cada vez está más integrado en nuestros CSS. 

Ejemplo “deprecated”

<img src="image.gif" width="15" height="20" alt="image" border="1" />

 Solución válida.

<img src="image.gif" width="15" height="20" alt="image" style="border: 1px solid black;">

TEXT/ LINK / VLINK / ALINK

Yo ya no recuerdo haber usado estos elementos en el diseño de páginas web, aunque sabía que existian.

Ejemplo “deprecated”

<body text="darkblue" link="green" vlink="black" alink="red">
     <p>Some text in the document...<br>
     <a href="something.com">this is link 1</a><br>
     <a href="somethingelse.com">this is link 2</a><br>
     <a href="google.com">this is link 3</a></p>
   </body>

 Solución válida.

body { color: darkblue; }
   a:link { color: green; }
   a:visited { color: black; }
   a:active { color: red; }

HSPACE / VSPACE

Estos dos atributos que indicaban el espacio alrededor de los tags <img /> y <object /> han sido derrotados por el todopoderoso margin.

Ejemplo “deprecated”

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" HEIGHT=100 WIDTH=100 VSPACE=50 ALIGN=LEFT>

 Solución válida.

<img src="image.gif" width="15" height="20" alt="image" style="margin: 0 2px 2px 5px;">

LANGUAGE

Este atributo, deprecated debido a que semánticamente ofrece menos información que type pasa a la jubilación anticipada. 

Ejemplo “deprecated”

<script language="JavaScript">
     alert("Hello!");
  </script>

 Solución válida.

<script type="text/javascript">
     alert("Hello!");
   </script>

CLEAR

Este atributo que corregía los problemas causados por los elementos flotantes,  renace como el Ave Fenix en forma de propiedad CSS.

Ejemplo “deprecated”

<br clear="all">

 Solución válida.

.unfloat { clear: both; }
<img src="image.gif" style="float: left;">This text wraps...<br class="unfloat">
   This text appears underneath the image...

WIDTH / HEIGHT

Para mi son los dos atributos con los que más he convivido, ideales para redimensionar imagenes, celdas y demás elementos, aunque increiblemente complicados de mantener, ahora gracias a su versión análoga en CSS podremos realizar cambios en el diseño con una sobrada facilidad. 

Actualizo 

Como bien apunta Eduo, este atributo aún quedará para los elementos <img /> 

Ejemplo “deprecated”

<td height="300" width="400" >...</table>

 Solución válida.

td{ width:400px; height: 300px; }

TYPE (para listas)

Este atributo que nos permitía definir el tipo de lista que estabamos usando, se convierte en una versión más completa y mejorada como propiedad CSS.

Ejemplo “deprecated”

<ol type="i">
     <li>first item (i)</li>
     <li>second item (ii)</li>
     <li>third item (iii)</li>
   </ol>

 Solución válida.

<ol style="list-style-type: lower-roman;">
    <li>first item (i)</li>
    <li>second item (ii)</li>
    <li>third item (iii)</li>
  </ol>

START / VALUE (para listas) 

 Dos atributos que indicaban por donde empezaban las listas <ol /> (START) y el valor de un elemento de la lista (VALUE).

Ejemplo “deprecated”

<ol start="0">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li value="1">list item</li>
    <li>list item</li>
  </ol>

Solución válida.

ol { counter-reset: item; }
 li { display: block; }
 li:before { content: counter(item) ". "; counter-increment: item; }

COMPACT (para listas)

Este atributo indicaba el valor mínimo del tamaño de fuente, por lo tanto le ocurre igual que los tags anteriores.

Ejemplo “deprecated”

<DL COMPACT>
<DT>Internet Engineering Task Force
     <DD>An organization which establishes technical standards for the Internet
<DT>e
     <DD>Often used as a prefix to indicate the electronic version of something
<DT>spam
     <DD>annoying email and news postings which waste time and bandwidth
</DL>

 Solución válida.

La  W3C no dispone de una alternativa.

DIR / MENU

Por temas de semántica las listas de elementos se han quedado reducidas a simples listas, en las que podemos añadir más contenido mediante class o id.

Ejemplo “deprecated”

<dir><li>list element...</li></dir>
 <menu><li>list element...</li></menu>

Solución válida.

<ul><li>list element 1</li></ul>

ISINDEX

No conocía este elemento, pero parece que creaba un control de entrada de texto en una línea… vamos, un <input /> de toda la vida :D

Ejemplo “deprecated”

<ISINDEX prompt="Escriba la frase a buscar: ">

Solución válida.

<FORM action="..." method="post">
<P>Entre la frase a buscar: <INPUT type="text"></P>
</FORM>

NOSHADE / SIZE (para <hr />)

 Todos los atributos de <hr /> han sido desaprovados, dejandolo solito frente al CSS.

Ejemplo “deprecated”

<hr size="10" noshade>

Solución válida.

<hr style="height: 10px; border-style: none; background-color: darkgray; color: darkgray;">

NOWRAP

Aplicado a los <td /> t <tr /> este atributo evitaba que el texto se descolocara dentro del elemento.

Ejemplo “deprecated”

<td nowrap>This is a very long piece of text that could stretch the table cell by quite a bit.</td>

Solución válida.

<td style="white-space: nowrap">This is a very long piece of text that could stretch the table cell by quite a bit.</td>

VERSION

Usando en el tag <html /> indicaba el número de versión que se usaba en la página, ahora el DOCTYPE hace la misma misión. 

Ejemplo “deprecated”

<html version="2.0">

Solución válida.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
				"http://www.w3.org/TR/REC-html40/strict.dtd">
  • Muy buen artículo. Lo leeré con más calma para ver si alguna cosa se me sigue pasando por alto
    Un saludo Andrés

  • Vamos, que la W3C viene a proponer que en el HTML sólo se delimite la estructura, como párrafos, imágenes, enlaces, etc… y todo lo que es el “maquillaje” lo hagamos desde CSS no?

    Pues solo me queda decir: Allá va todo lo que sabía de HTML… XDD

    Un saludo de alguien que lee tu blog para intentar comprender mejor a los <div> y sus oscuras maquinaciones.

  • Ehrm. No todos estos elementos han sido obsoletados. No universalmente, al menos.

    Border solo es obsoleto para img, por ejemplo.

    Asimismo, Height y Width no puede ser deprecado del tag de . Lo ha sido de los tags de th, td y hr.

    No puede hacerse invalido en el tag de img porque el ancho y alto se especifican programaticamente y la unica forma de usar css para esto seria con inline css. Obligar a usar inline css es exactamente lo mismo que usar atributos de un tag.

    De HECHO es especificamente recomendado para imagenes, por la misma razón.

    Un ejemplo similar con ejemplos es este.

  • Un artículo estupendo, Andrés. Una completísima lista que conviene repasar y tener a la vista siempre.

    Te lo has currado ;)

  • Es curioso ver como muchisimos tags y atributos han desaparecido (y demos gracias por ello…), llega un momento en el que olvidamos totalmente estos tags.

    Seguro que os ha pasado como a mi, al verlos te vienen a la cabeza los viejos tiempos :D es curioso…

  • Muy bueno e interesante el artículo.

  • Hay algunas con las que no estoy de acuerdo en absoluto, a saber: u, s… son “efectos” que pueden ser realmente informativos, no es lo mismo una palabra que una palabra tachada (hablo de los momentos en que no se use la hoja de estilo).

  • #8 Buenas Chavalina, para tachar palabras, tienes <del> que cumple la misma función y tiene un valor semántico más fuerte.

    Para todas las “deprecated” tenemos siempre alguna equivalencia más moderna y adaptada a la nueva internet.

  • Gracias Andrés, conoces también alguno para el subrayado?

  • #10 para el subrayada usamos una propiedad css, text-decoration.

    Ej:

    
    //HTML
    <p> Surayado!! </p>
    
    //CSS
    p { text-decoration: underline }
    
  • Muy interesante el post, hay buenos ejemplos. Por otro lado la recomendación es siempre separar diseño de contenido y en varios ejemplos le asignas estilos inline a varios elementos.

    style=”border: 1px solid black; en borde de imagen es incorrecto dentro del HTML, en su lugar debería ser: .pic {border:1px solid;} también es innecesario el “black” si es que queremos el borde en negro, porque por default es negro.

    Saludos

  • Gracias Droid, elegí el método inline ya que me parecía más cómodo para explicar la finalidad del post. Saludos

  • Parece mentira que se esté hablando de semántica HTML a la vez que se desprecian las normas ortográficas y gramaticales más elementales del castellano. Palabros como “desaprovar”, “combertir”… (por cierto, para “deprecated”, mejor “desaconsejado”)

    En fin, un diez para el contenido y un cero para el continente.

  • Buenas Carlos,

    tienes toda la razón, debería prestar más atención a lo que escribo, pero son problemas de escribir rápido y de no haber prestado atención en Lengua y si en Informática.

    No me parecen formas de comentar en ningún blog. Osea entrar en una página donde el contenido es completamente desinteresado y que ha requerido el trabajo de una persona (o personas) no necesita que usuarios prepotentes lleguen y desmerezcan al “continente” por comenter errorer gramaticales, en vez de simplemente informarlo sin tener que ofender a nadie.

    Normalmente no me salgo por la tangente con estos temas, ya que escribo para mi y si a alguien no le gusta, no tiene por que leerme, pero Carlos, me has tocados los coj… lo siento.

  • Interesante el articulo, cierto que para los que estan empezando, es mejor empezar a usar CSS desde el inicio, aunque sea un poco mas lento el aprendizaje. Pero en el desarrollo web de mas de una pagina lo agradecerán.

    Cuando trato de explicar código o tecnicas de programación trato de ser lo mas claro posible, pero me permito usar abreviaturas y otros monstruos gramaticales, además no suelo pasarlos por el corrector ortográfico de un procesador de texto. Acepto que me corrijan el codigo si esta mal o es suceptible de ser mejorado. Lo demas sobra.

    Carlos: La palabra “palabros” esta deprecated.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.