¿Por qué algunos elementos HTML quedan obsoletos?

Internet existe desde hace mucho tiempo y, con el tiempo, hemos cambiado la forma en que pensamos sobre el diseño web. Muchas técnicas y formas antiguas de hacer las cosas han quedado obsoletas a medida que se han creado alternativas nuevas y mejores, y decimos que han quedado obsoletas.

Obsoleto. Es una palabra que usamos y vemos a menudo. ¿Pero te has parado a pensar en lo que significa en la práctica? ¿Cuáles son algunos ejemplos de elementos web obsoletos y por qué ya no los utilizamos?

¿Qué es la desaprobación?

En el inglés cotidiano, “desaprobar” algo es expresar desaprobación hacia ello. Por ejemplo, es posible que usted se sienta inclinado a desaprobar una noticia que no le guste.

Sin embargo, cuando hablamos en un sentido técnico, la desaprobación es el desaprobación del uso de una característica antigua. A menudo, la característica anterior sigue siendo funcional en aras de la compatibilidad con versiones anteriores (para que los proyectos heredados no se rompan). En esencia, esto significa que técnicamente todavía puedes hacer las cosas de la manera tradicional. Probablemente seguirá funcionando, pero tal vez sea mejor utilizar la nueva forma.

Otro escenario común es cuando los elementos técnicos quedan obsoletos como preludio de su futura eliminación (lo que a veces llamamos característica de “extinción”). Esto les da a todos tiempo para hacer la transición de la antigua forma de trabajar al nuevo sistema antes de que ocurra la transición. Si sigues WordPress, recientemente lo hicieron con su radicalmente nuevo editor Gutenberg. Lo enviaron, pero mantuvieron una opción disponible para volver al editor “clásico” para que los usuarios pudieran tomarse un tiempo para realizar la transición. Algún día, es probable que se elimine el editor “clásico”, dejando a Gutenberg como la única opción para editar publicaciones. En otras palabras, WordPress está poniendo fin al editor “clásico”.

Ése es simplemente un ejemplo. También podemos observar las características HTML que alguna vez fueron elementos básicos pero que quedaron obsoletos en algún momento.

¿Por qué los elementos HTML quedan obsoletos?

A lo largo de los años, nuestra forma de pensar sobre HTML ha evolucionado. Originalmente, era un lenguaje de marcado multiuso para mostrar y diseñar contenido en línea.

Con el tiempo, a medida que las hojas de estilo externas se volvieron más comunes, comenzó a tener más sentido pensar en el desarrollo web de manera diferente, como una separación de preocupaciones donde HTML define el contenido de una página y CSS maneja su presentación.

Esta separación de estilo y contenido aporta numerosos beneficios:

• Evitar la duplicación: repetir código para cada instancia de texto de color rojo en una página es difícil de manejar e ineficiente cuando puedes tener una única clase CSS para manejarlo todo a la vez.
• Facilidad de gestión: con toda la presentación controlada desde una hoja de estilo central, puedes realizar cambios en todo el sitio con poco esfuerzo.
• Legibilidad: al visualizar el código fuente de un sitio web, es mucho más fácil comprender el código que se ha abstraído claramente en archivos separados por contenido y estilo.
• Almacenamiento en caché: la gran mayoría de los sitios web tienen estilos consistentes en todas las páginas, entonces, ¿por qué hacer que el navegador descargue esas definiciones de estilo una y otra vez? Poner el código de presentación en una hoja de estilo dedicada permite almacenarlo en caché y reutilizarlo para ahorrar ancho de banda.
• Especialización de desarrolladores: los grandes proyectos de sitios web pueden tener varios diseñadores y desarrolladores trabajando en ellos, cada uno con sus áreas individuales de especialización. Permitir que un especialista en CSS trabaje en su parte del proyecto en sus propios archivos separados puede ser mucho más fácil para todos los involucrados.
• Opciones de usuario: separar el estilo del contenido puede permitir al desarrollador ofrecer fácilmente opciones de visualización al usuario final (el cada vez más popular “modo nocturno” es un buen ejemplo de esto) o diferentes modos de visualización para accesibilidad.
• Capacidad de respuesta e independencia del dispositivo: separar el código para el contenido y la presentación visual hace que sea mucho más fácil crear sitios web que se muestren de maneras muy diferentes en diferentes resoluciones de pantalla.

Sin embargo, en los primeros días de HTML había una gran cantidad de marcas diseñadas para controlar el aspecto de la página junto con el contenido. Es posible que veas un código como este:

centerfont face="verdana" color="#2400D3"Hello world!/font/center

…todo lo cual ahora está en uso debido a la separación de preocupaciones antes mencionadas.

¿Qué elementos HTML están ahora en uso?

A partir del lanzamiento de HTML5, se desaconseja el uso de los siguientes elementos:

• acronym(usar abbren su lugar)
• applet(usar object)
• basefont(use propiedades de fuente CSS, como font-size, font-family, etc.)
• big(EE.UU. CSS font-size)
• center(EE.UU. CSS text-align)
• dir(usar ul)
• font(use propiedades de fuente CSS)
• frame(usar iframe)
• frameset(ya no es necesario)
• isindex(ya no es necesario)
• noframes(ya no es necesario)
• s(uso text-decoration: line-throughen CSS)
• strike(uso text-decoration: line-throughen CSS)
• tt(usar code)

También hay una larga lista de atributos obsoletos, incluidos muchos elementos que siguen siendo válidos (como el alignatributo utilizado por muchos elementos). El W3C tiene la lista completa de atributos obsoletos .

¿Por qué ya no usamos tablas para los diseños?

Antes de que CSS se generalizara, era común ver diseños de sitios web construidos con este tableelemento. Si bien el tableelemento no está en desuso, se desaconseja su uso para el diseño. De hecho, prácticamente todos los atributos de las tablas HTML que se utilizaban para los diseños han quedado obsoletos, como y cellpadding.bgcolorwidth

Hubo un tiempo en que las tablas parecían ser una forma bastante buena de diseñar una página web. Podríamos hacer filas y columnas del tamaño que quisiéramos, lo que significa que podríamos poner todo dentro. Encabezados, navegación, pies de página… ¡lo que sea!

Eso crearía una gran cantidad de código de sitio web similar a este:

table cellpadding="0" cellspacing="0"  tr    td colspan="10"img name="logobar" src="logobar.jpg" alt="Logo"/td  /tr  tr    td rowspan="2" colspan="5"img name="something" src="something.jpg" alt="A picture of something"/td    tdBlah blah blah!/td    td colspan="3"   tr  !--  and so on --/table

Existen numerosos problemas con este enfoque:

• Los diseños complicados a menudo terminan con tablas anidadas dentro de otras tablas, lo que crea un desorden de código que provoca dolor de cabeza. Basta con mirar la fuente de cualquier boletín informativo por correo electrónico.
• La accesibilidad es problemática, ya que los lectores de pantalla tienden a confundirse por el uso excesivo de las tablas.
• Las tablas tardan en procesarse, ya que el navegador espera a que se descargue toda la tabla antes de mostrarla en la pantalla.
• Es muy difícil crear diseños responsables y aptos para dispositivos móviles con un diseño basado en tablas. Todavía no hemos encontrado una solución milagrosa para las tablas responsivas (aunque existen muchas ideas inteligentes ).

Continuando con el tema de separar contenido y presentación, CSS es una forma mucho más eficiente de crear el diseño visual sin saturar el código del documento HTML principal.

Entonces, ¿cuándo deberíamos usar tabla? ¡Datos tabulares reales, por supuesto! Si necesita mostrar una lista de resultados de béisbol, estadísticas o cualquier otra cosa por el estilo, table es su amigo.

¿Por qué seguimos usando las etiquetas b y i?

“Espera un momento”, podrías decir. “¿Por qué las etiquetas HTML en negrita y cursiva todavía se consideran correctas? ¿No son esas formas de estilo visual las que deberían manejarse con CSS?

Es una buena pregunta y parece difícil de responder si consideramos que otras etiquetas como centery sestán en desuso. ¿Que está pasando aqui?

La respuesta breve y simple es esa by iprobablemente habrían quedado obsoletos si no estuvieran tan extendidos y útiles. Las alternativas de CSS parecen algo difíciles de manejar en comparación:

style  .emphasis { font-weight:bold }/style    This is a spanbold/span word!This is a spanbold/span word!This is a bbold/b word!

La respuesta larga es que a estas etiquetas ahora se les ha asignado algún significado semántico, dándoles valor más allá de la pura presentación visual y permitiendo a los diseñadores usarlas para conferir información adicional sobre el texto que contienen.

Esto es importante porque ayuda a los lectores de pantalla y a los rastreadores de búsqueda a comprender mejor el propósito del contenido incluido en estas etiquetas. Podríamos poner una palabra en cursiva por varias razones, como agregar énfasis, invocar el título de una obra creativa, hacer referencia a un nombre científico, etc. ¿Cómo sabe un lector de pantalla si debe poner énfasis hablado en la palabra o no?

by itener compañeros, incluidos strong, emy cite. Juntas, estas etiquetas aclaran el contexto del significado del texto:

• bsirve para llamar la atención sobre el texto sin darle ninguna importancia adicional. Se utiliza cuando queremos llamar la atención sobre algo sin cambiar la inflexión del texto cuando lo lee un lector de pantalla o sin agregar ningún peso o significado adicional al contenido para los motores de búsqueda.
• strongSe parece mucho bpero señala la importancia de algo. Es lo mismo que cambiar la inflexión de tu voz al agregar énfasis a una determinada palabra.
• ipone el texto en cursiva sin darle ningún significado o énfasis adicional. Es perfecto para escribir algo que normalmente está en cursiva, como el nombre científico de un animal.
• emes como iponer el texto en cursiva, pero agrega énfasis adicional (de ahí el nombre de la etiqueta) sin agregar más importancia en el contexto. (“Estoy seguro de que no me olvidé de darle de comer al gato”).
• citeEs lo que utilizamos para referirnos al título de una obra creativa, digamos una película como El silencio de los corderos. De esta manera, el texto tiene estilo pero no afecta la forma en que se leerá la oración en voz alta.

En general, la regla es que los by ideben usarse sólo como último recurso si no puede encontrar nada más apropiado para sus necesidades. Este significado semántico permite que sigas teniendo un lugar en nuestra gama moderna de elementos HTML y sobrevivan a la desaprobación que ha sufrido otras etiquetas de estilo similares.

En una nota relacionada, ula etiqueta de subrayado estuvo obsoleta en un momento, pero desde entonces se ha restaurado en HTML5 porque tiene algunos usos semánticos (como anotar errores ortográficos).

Hay muchos otros elementos HTML que pueden dar estilo al contenido, pero sirven principalmente para proporcionar significado semántico al contenido. Mandy Michael tiene un artículo excelente que los cubre y cómo pueden usarse (¡e incluso combinarse!) para lograr el marcado más semántico posible.

Atributos HTML no muertos

Algunos elementos obsoletos todavía se utilizan ampliamente en la web en la actualidad. Después de todo, todavía funcionan, sólo que están desanimados.

A veces, esto se debe a que no se ha corrido la voz de que lo que has estado usando durante años ya no es como se hace. Otras veces, se debe a personas que no ven una razón convincente para dejar de hacer algo que funciona perfectamente bien. Oye, CSS-Tricks todavía usa el elemento teletipo por ciertas razones.

Una de esas reliquias HTML no muertas es el atributo align en etiquetas que de otro modo serían válidas, especialmente en imágenes. Es posible que veamos imgetiquetas con un borderatributo, aunque ese atributo ya no se utiliza desde hace mucho tiempo. CSS, por supuesto, es el método preferido y moderno para ese tipo de presentación de estilo.

Mantenerse actualizado con la obsolescencia es clave para cualquier desarrollador web. Asegurarse de que su código siga las recomendaciones actuales y al mismo tiempo evitar elementos heredados es una práctica esencial recomendada. No sólo garantiza que su sitio seguirá funcionando a largo plazo, sino que funcionará bien con la web del futuro.

¿Preguntas? ¡Publica un comentario! También puedes encontrarme en Angle Studios donde trabajo.