Apuntes html

HTML nunca falla, solo se ve raro.

Etiquetas informativas y obsoletas

Este apéndice recopila etiquetas HTML menos comunes pero útiles para marcar información específica, como cambios en documentos o texto tecleado. También incluye notas sobre etiquetas obsoletas que ya no se usan, pero que podrías encontrar en páginas antiguas.

Estas etiquetas no cambian mucho la apariencia del texto, sino que indican su propósito o contexto. Son útiles para documentos técnicos, tutoriales, o accesibilidad.

<ins>: Texto insertado

La etiqueta <ins> marca texto añadido en una nueva versión de un documento, como en un borrador editado. Los navegadores suelen mostrarlo subrayado.

Atributos:

  • cite: URL que explica el cambio (opcional, poco usado).
  • datetime: Fecha y hora del cambio (por ejemplo, 2025-05-01).
  • Nota: Usa CSS (style="text-decoration: underline; color: green") para personalizar.

Ejemplo:

<p>El curso comienza el <ins datetime="2025-05-01">1 de mayo</ins>.</p>

Resultado: El curso comienza el 1 de mayo.

Con CSS:

<p>El curso comienza el <ins style="text-decoration: underline; color: green;">1 de mayo</ins>.</p>

<del>: Texto borrado

La etiqueta <del> marca texto eliminado de una versión anterior de un documento. Los navegadores lo muestran tachado.

Atributos:

  • cite: URL que explica el cambio.
  • datetime: Fecha y hora del cambio.
  • Nota: Usa CSS (style="text-decoration: line-through; color: red") para personalizar.

Ejemplo:

<p>El curso comienza el <del datetime="2025-04-01">1 de abril</del> 1 de mayo.</p>

Resultado: El curso comienza el 1 de abril 1 de mayo.

Con CSS:

<p>El curso comienza el <del style="text-decoration: line-through; color: red;">1 de abril</del> 1 de mayo.</p>

<kbd>: Texto tecleado

La etiqueta <kbd> indica texto que el usuario debe teclear, como comandos o teclas. Los navegadores lo muestran en fuente monoespaciada (similar a código).

Ejemplo:

<p>Para guardar, presiona <kbd>Ctrl + S</kbd>.</p>

Resultado: Para guardar, presiona Ctrl + S.

Con CSS:

<p>Para guardar, presiona <kbd style="font-family: monospace; background-color: #f0f0f0;">Ctrl + S</kbd>.</p>

<samp>: Salida de programa

La etiqueta <samp> muestra la salida de un programa, script, o sistema, como un mensaje de error. También usa fuente monoespaciada.

Ejemplo:

<p>El programa devolvió: <samp>Error 404: Página no encontrada</samp>.</p>

Resultado: El programa devolvió: Error 404: Página no encontrada.

Con CSS:

<p>El programa devolvió: <samp style="font-family: monospace; color: blue;">Error 404: Página no encontrada</samp>.</p>

Etiquetas obsoletas

Algunas etiquetas que se usaban en HTML antiguo ya no son válidas en HTML5. Las incluimos aquí para que las reconozcas en páginas viejas, pero no las uses.

<acronym>: Acrónimos (obsoleta)

Antes se usaba <acronym> para marcar acrónimos (abreviaturas pronunciables, como NATO). Ahora se usa <abbr> para acrónimos y abreviaturas.

Ejemplo antiguo (no usar):

<p>La <acronym title="North Atlantic Treaty Organization">NATO</acronym> se fundó en 1949.</p>

Alternativa moderna:

<p>La <abbr title="North Atlantic Treaty Organization">NATO</abbr> se fundó en 1949.</p>

<dir> y <menu>: Listas obsoletas

Las etiquetas <dir> (directorios) y <menu> (menús) se usaban para listas, pero están obsoletas. Usa <ul> o <ol> en su lugar.

Ejemplo antiguo (no usar):

<dir>
  <li>Archivo 1</li>
  <li>Archivo 2</li>
</dir>

Alternativa moderna:

<ul>
  <li>Archivo 1</li>
  <li>Archivo 2</li>
</ul>

Ejemplo completo

Aquí tienes una página que combina las etiquetas informativas:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Etiquetas informativas</title>
</head>
<body>
  <h1>Etiquetas informativas</h1>
  <p>El curso fue actualizado el <ins datetime="2025-05-01">1 de mayo</ins>, no el <del datetime="2025-04-01">1 de abril</del>.</p>
  <p>Para abrir el editor, presiona <kbd>Ctrl + T</kbd>.</p>
  <p>Si falla, verás: <samp>Error: Archivo no encontrado</samp>.</p>
</body>
</html>

Ejemplo con CSS

El mismo ejemplo, pero con CSS para personalizar:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Etiquetas informativas</title>
</head>
<body>
  <h1>Etiquetas informativas</h1>
  <p>El curso fue actualizado el <ins style="text-decoration: underline; color: green;">1 de mayo</ins>, no el <del style="text-decoration: line-through; color: red;">1 de abril</del>.</p>
  <p>Para abrir el editor, presiona <kbd style="font-family: monospace; background-color: #f0f0f0;">Ctrl + T</kbd>.</p>
  <p>Si falla, verás: <samp style="font-family: monospace; color: blue;">Error: Archivo no encontrado</samp>.</p>
</body>
</html>
TOP