3.4 Markup o Marcado avanzado de texto

Las páginas y documentos más avanzados suelen incluir otros elementos importantes que se deben marcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten marcar más elementos del texto.

La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar las siglas o acrónimos del texto. Su definición es la siguiente:

Etiqueta<abbr>
Atributos comunesbásicos, internacionalización y eventos
Atributos propiostitle = "texto" – Indica el significado completo de la abreviatura
Tipo de elementoEn línea
DescripciónSe emplea para marcar las abreviaturas del texto y proporcionar el significado de esas abreviaturas
Etiqueta<acronym>
Atributos comunesbásicos, internacionalización y eventos
Atributos propiostitle = "texto" – Indica el significado completo del acrónimo o sigla
Tipo de elementoEn línea
DescripciónSe emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de esas siglas

En ambos casos, el atributo title se puede utilizar para incluir el significado completo de la abreviatura o sigla. Ejemplo:

<html>

  <head>
    <title>Ejemplo de etiqueta acronym</title>
  </head>

  <body>
    <p>Ejemplo random de acronym en <acronym title="Ejemplo random">HTML</acronym>.</p>
  </body>

</html>

La mayoría de navegadores muestran por defecto un borde inferior punteado para todos los elementos <abbr> y <acronym>. Al posicionar el puntero del ratón sobre la palabra subrayada, el navegador muestra un pequeño recuadro (llamado tooltip en inglés) con el valor del atributo title:

Ejemplo de uso de la etiqueta acronym

Por otra parte, en ocasiones resulta útil incluir la definición de una palabra extraña o cuyo uso está restringido a un entorno muy determinado. HTML incluye la etiqueta <dfn> para proporcionar al usuario la definición de todas las palabras para las que se considere apropiado. La definición formal de esta etiqueta se muestra a continuación:

Etiqueta<dfn>
Atributos comunesbásicos, internacionalización y eventos
Atributos propiostitle = "texto" – Indica el significado completo del término
Tipo de elementoEn línea
DescripciónSe emplea para marcar las definiciones de ciertos términos y proporcionar el significado de esos términos

El siguiente ejemplo muestra cómo se utiliza la etiqueta <dfn> para incluir la definición completa de una palabra cuyo uso no es habitual fuera de los ámbitos médicos y psicológicos:

<p>Con estos síntomas, podría tratarse de un caso de <dfn title="Imagen o sensación subjetiva,
propia de un sentido, determinada por otra sensación que afecta a un sentido
diferente">sinestesia</dfn>
</p>

Por último, HTML incluye una etiqueta que se puede utilizar para marcar un texto como una citación:

Etiqueta<cite>
Atributos comunesbásicos, internacionalización y eventos
Atributos propios
Tipo de elementoEn línea
DescripciónSe emplea para marcar una cita o una referencia a otras fuentes

En ocasiones, no está clara la diferencia entre <cite> y <blockquote>. El elemento <cite> marca el autor de la cita (persona, documento, etc.) y <blockquote> marca el contenido de la propia cita. En el siguiente ejemplo, <blockquote> encierra el contenido de una frase célebre y <cite> encierra el nombre de su autor:

Como dijo <cite>Bender</cite>:
<blockquote>Muerde mi brillante trasero metálico</blockquote>

Ejercicio:

Respuesta:

<head>
  <title>Bender es el mejor personaje de Futurama</title>
</head>

  <body>

    <h1>Bender es el mejor personaje de Futurama</h1>

    <p><strong>Futurama:</strong> Hemos creado varios personajes espectaculares cómo por ejemplo, el propio
    <strong>Bender Rodriguez</strong>, quién comparte aventuras con su amigo 
    <acronym title="Philip J Fry">Humano</acronym>.
    </p>

    <p>Quién a su vez, trabaja con Leela, una extraterrestre (<em>qué en realidad es mutante</em>), y su 
    <acronym title="El profesor Farnsworth">Sobrino</acronym>.
    </p>

    <p>Pero, ¿por qué Bender es tan bueno?. Lo podemos resumir en una frase:
    </p>

    <blockquote>
    <em>"Muerde mi brillante trasero metálico"</em>
    </blockquote>

</body>

Realiza tus consultas en el foro sobre el curso de HTML
Realiza tus consultas en el foro sobre el curso de HTML