El desarrollo web es un ecosistema en constante evolución y transformación. Y es que, no solo se actualizan componentes de los lenguajes de programación que se emplean, sino que, al mismo tiempo, también lo hacen los navegadores. En este sentido, existen etiquetas obsoletas en HTML5 que se recomienda no usar. 

Por este y otros motivos, los profesionales de desarrollo web deben estar en constante formación. Actualizar conocimientos y estar al día de las últimas tendencias en desarrollo front-end es fundamental para todos aquellos que se quieran dedicar a esto. 

Hoy vamos a ver cuáles son las etiquetas obsoletas en HTML5 y qué alternativas existen para ellas. También hablaremos un poco sobre la evolución de este lenguaje de programación y de cuáles son las mejores alternativas si quieres profundizar en el mundo del desarrollo web. 

HTML5: un lenguaje en constante evolución

HTML es el estándar que define a las páginas web desde los inicios de Internet. Y es que la historia de este sistema de programación o etiquetado se remonta mucho tiempo atrás y su evolución desde entonces ha sido significativa. 

Sin embargo, la base de HTML no ha cambiado en todos estos años. Se trata de un lenguaje que funciona con un sistema de etiquetas y atributos que ordenan la página web. Es decir, en HTML podemos determinar qué queremos que se muestre en la web etiquetándolo como corresponda. 

Por tanto, HTML es el esqueleto de cualquier página web y lo que les dice a los navegadores que usamos, dónde está cada cosa. Para dar formato, estilo visual y un diseño dinámico, también tendrás que usar: 

  • CSS: Cascading Style Sheets. Se trata de la parte del desarrollo que se encarga de definir el estilo visual de la página. Da forma visual a lo que se ha programado con HTML.
  • Javascript: Es un lenguaje de programación algo más complejo y sirve para dotar a la web de un diseño dinámico. Se emplea para hacer animaciones y la parte interactiva del sitio.

Como HTML es un lenguaje en constante evolución, con el paso de los años y hasta llegar a HTML5 existen atributos y etiquetas que se han quedado obsoletos, por eso es importante mantenerse actualizado, incluso tras un Curso online de Programación Web Front-End. Vamos a ver cuáles son y como se recomienda que se sustituyan. 

¿Cuáles son las etiquetas obsoletas en HTML5?

Como decíamos, con el tiempo y la evolución de HTML5, existen etiquetas que se han quedado obsoletas. Se trata de elementos que todavía se pueden usar, pero que se recomienda no emplear. Y es que, aunque los navegadores todavía den soporte, en poco tiempo puede que ya no, por lo que la página web que funcione con etiquetas obsoletas dejaría de visualizarse correctamente. 

Vamos a ver ahora de forma sencilla cuáles son las etiquetas obsoletas en HTML5 y cómo se pueden sustituir. Algunos de estos elementos desfasados ahora se implementan directamente desde el CSS. 

Etiqueta obsoleta ¿Qué hace? ¿Cuál es la alternativa?
applet Relacionada con applets de Java embed, object
acronym Para insertar acrónimos abbr
bgsound Servía para insertar sonidos de fondo audio
dir Lista de archivos o carpetas ul
hgroup Agrupación de encabezados div (si necesitas un wrapper)
isindex Crea un campo para búquedas input
listing, xmp Muestra fragmentos del código fuente pre, code
basefont Sirve para definir la tipografía por defecto que se muestra en la web Se implementa desde CSS
big Usado para indicar el tamaño de la fuente Se introduce desde CSS
center Servía para decirle a HTML que centre el texto Se implementa desde CSS
font Define una tipografía en concreto para un apartado de la web Se introduce desde CSS
menu Crea menús de listados ul


Un buen desarrollador web se mantiene al día de todos los cambios que se producen en este lenguaje. Para ello, la formación constante es esencial.

¿Y qué pasa con los atributos obsoletos en HTML5?

Los atributos en HTML5 son elementos que se añaden en las etiquetas y que aportan información adicional al inicio de la misma. Sirven para modificar o agregar algunas características determinadas. Por ejemplo, para determinar la ruta en la que se encuentra una imagen, podemos añadir el atributo src dentro de la etiqueta <img>

Igual que sucede con las etiquetas obsoletas en HTML5, también existen atributos que se han quedado desfasados o que se implementan directamente desde CSS. Vamos a ver cuáles son y cómo sustituirlos. 

Atributo obsoleto ¿Dentro de qué etiqueta? ¿Para qué sirve?
name a, embed,
img, option		 Crea un ancla con el que se identifica algo dentro de la web.
language script Indica el tipo de lenguaje que se está usando
link body Para el color de los enlaces
alink body Una variante que también sirve para el color de los enlaces
vlink body La tercera opción para indicar en HTML el color de un enlace
bgcolor body Establece un color de fondo para la web
align, valign table Alineación vertical u horizontal en una tabla creada en HTML
hspace, vspace table, iframe Indica los espacios dentro de las tablas HTML
cellpadding table Espacio entre celdas dentro de una tabla HTML
cellspacing table Una variante del anterior
nowrap td, th Establece un tamaño fijo para cada celda dentro de una tabla HTML

¿Cuáles son las etiquetas para crear una página web en HTML5?

Como te decíamos, todos los documentos HTML funcionan mediante el uso de etiquetas. Al mismo tiempo, este tipo de documentos, se dividen en dos partes principales: el encabezado y el cuerpo. Cuando empiezas a escribir una página nueva, se usa la etiqueta: <!DOCTYPE html>, que sirve para decirle o declararle al navegador que el siguiente archivo es un archivo HTML.

Las etiquetas les dicen a los navegadores cómo mostrar información de las páginas web. Dan forma al esqueleto de la página en HTML

Este es el primer tipo de etiquetas para crear una página web en HTML5, la que da inicio a todo el proceso de programación de la web. Además, existen otras etiquetas principales: <html>, <head>, <title> y <body>. Todas ellas son etiquetas de contenedor y deben aparecer como pares con un comienzo y un final.

  • <html>… </html>: Cada documento HTML comienza y termina con la etiqueta <html>. Esto le dice al navegador que el documento es un archivo html.
  • <head>… </head>: La etiqueta <head> contiene el título del documento junto con información general sobre el archivo, como el autor, derechos de autor, palabras clave y también cuenta con una descripción de lo que aparece en la página.
  • <title>… </title>: Se enmarca dentro de las etiquetas <head> y da el título de la página, que se mostrará en la parte superior de la misma.
  • <body>… </body>: Bajo esta etiqueta para crear una página web en HTML 5 se enmarca todo el contenido principal de la página. Esta etiqueta puede contener etiquetas y elementos secundarios, en los que aparecen texto, imágenes, enlaces, tablas, etc.

Estos son los principales tipos de etiquetas, la base sobre la que se construye todo el contenido de una página web. Existen otros tipos de etiquetas para crear una página web en html5 que nos permiten enlazar o encuadrar otros elementos dentro de las páginas web. Algunas de las más usadas son:

  • <a>: Define y da forma a un ancla
  • <abbr>: Introduce una abreviatura
  • <address>: Especifica un elemento de dirección
  • <article>: Define una parte independiente del contenido de un documento, como una entrada de blog o un artículo de periódico.
  • <audio>: permite introducir un archivo de audio.
  • <br>: Inserta un solo salto de línea.
  • <button>: Especifica un botón pulsador
  • <canvas>: se utiliza para representar gráficos de mapa de bits dinámicos sobre la marcha, como gráficos o juegos.
  • <div>: Define una sección en un documento HTML 5
  • <form>: Para introducir formularios.
  • <h1> a <h6>: Especifica el encabezado 1 al encabezado 6
  • <img>: Introduce una sección para una imagen
  • <map>: Una etiqueta destinada a elaborar mapas de imagen
  • <nav>: Define una sección del documento destinada a la navegación.
  • <script>: Sirve para introducir un script

Anidamiento

Parte de la estructura de la página web se denomina anidamiento (nesting). Las etiquetas para crear una página web en HTML 5 se anidan unas a otras. De esta forma, por ejemplo, la etiqueta <title> está anidada dentro de la etiqueta <head>, mientras que <head> y <body> están anidadas dentro de <html>.

Organizando contenido con etiquetas HTML: listas, tablas y formularios

En el proceso de aprendizaje hasta dominar las etiquetas HTML, una de las habilidades esenciales que deben adquirirse es la de organizar y estructurar el contenido de manera efectiva. Esto no solo hace que el código sea más legible, sino que también mejora la accesibilidad y la experiencia del usuario en cualquier sitio web.

A continuación, veremos cómo puedes utilizar las etiquetas HTML para organizar diferentes tipos de contenido en listas, tablas y formularios. ¡Empezamos!

Listas

Las listas son, como ya imaginarás, una forma efectiva de presentar información de manera ordenada y jerarquizada. En el caso del lenguaje de marcado HTML, podemos encontrar tres tipos principales de listas:

  • Lista desordenada (<ul>): se usa para elementos que no tienen un orden específico y se muestran con viñetas.
  • Lista ordenada (<ol>): es recomendable para elementos que deben mostrarse en un orden secuencial, como pueden ser los pasos en un tutorial o una serie de ítems numerados.
  • Lista de definición (<dl>): este último tipo sirve para presentar términos junto con sus definiciones correspondientes, como un glosario o diccionario.

Tablas

Por su parte, las tablas son útiles cuando necesitas mostrar datos en filas y columnas. La etiqueta <table> define la tabla en sí, mientras que <tr>, <th> y <td> se utilizan para definir filas, encabezados y datos, respectivamente. ¡Tiene una estructura sencilla!

Formularios

Por último, los formularios son la forma en que los usuarios interactúan con un sitio web, ya sea para solicitar información, suscribirse a una newsletter o realizar una compra. Con etiquetas como <form>, <input>, <textarea> y <button>, se pueden crear campos para que los usuarios ingresen diferentes tipos de datos, seleccionen opciones y envíen información.

Mejores prácticas en el uso de etiquetas HTML

¡Ya tienes un dominio básico de las etiquetas HTML! Habiendo asentado estas bases, es recomendable que aprendas algunas buenas prácticas para asegurar que tu código sea legible, mantenible y compatible con los estándares web. Aquí te dejamos algunas sugerencias:

  • Mantén el código limpio y organizado: utilizando sangrías y comentarios harás que tu código sea más legible y fácil de entender para otros desarrolladores, o incluso para ti mismo/a en el futuro, si tienes que volver a tocar un proyecto.
  • Utiliza etiquetas semánticas: introduciendo etiquetas semánticas puedes ayudar a los motores de búsqueda y a los lectores a entender la estructura y el significado del contenido que se encontrarán en la web. Ejemplos de estas etiquetas son <header>, <article> o <section>.
  • Cierra siempre las etiquetas HTML: asegúrate de cerrar todas las etiquetas que abras para evitar errores de renderizado en el navegador y mantener la estructura correcta del documento. Esto se hace añadiendo al final una / (salvo <img>, <br>, <hr>, <input>, que no llevan cierre).
  • Haz que las páginas sean accesibles: añadiendo atributos alt para imágenes y elementos gráficos, así como aplicando otras pautas de accesibilidad web, lograrás que la página sea accesible para usuarios con todo tipo de capacidades.

¡Fórmate online como desarrollador Front-End!

Hemos visto cuáles son tanto los atributos como las etiquetas obsoletas en HTML5, un primer paso para actualizar o mejorar tus conocimientos en HTML, el esqueleto de cualquier página web. Ahora te toca a ti dar el siguiente paso, es el momento de que te prepares adecuadamente para trabajar como desarrollador front-end. 

Para ello, no solo debes aprender HTML, sino que también debes dominar JavaScript y CSS. ¿Te interesa? Pues en Tokio School contamos con un curso de Programación web Front-End: HTML5, CSS3 y JavaScript. ¡Te convertirás en un samurái del código!

¿Quiere más información sobre este curso o sobre nosotros? ¡No te cortes! Rellena el formulario y da el siguiente paso. ¡Conviértete en tokier! ¡Te esperamos!