Día: 30 de noviembre de 2025

Presentación

Infografías

Diapositivas y vídeos

Podrás familiarizarte con los contenidos clave de esta unidad a través de esta presentación y esta otra; estas diapositivas; y este vídeo y finalmente, este otro .

Introducción

HTML dispone de numerosos elementos para dar formato al texto que no abordamos en las unidades anteriores. Aunque las etiquetas que se describen en esta unidad son menos conocidas o de uso más específico, conocerlas resulta de gran utilidad para enriquecer nuestros documentos. Aprenderás a realizar el marcado semántico correcto de abreviaturas, citas y referencias, fragmentos de código informático, ecuaciones matemáticas y datos de contacto.

Abreviaturas

El elemento de abreviatura de HTML (<abbr>) representa una abreviatura o un acrónimo. A través del atributo opcional title, podemos proporcionar el significado desarrollado del término o una descripción legible para el usuario.

Por lo general, los navegadores presentan este texto mediante una etiqueta emergente (tooltip) que aparece automáticamente cuando se pasa el cursor del ratón sobre el elemento. Es importante tener en cuenta que, si se incluye el atributo title, este debe contener única y exclusivamente la descripción completa, sin añadir texto adicional.

A continuación, veamos algunos ejemplos prácticos en los que resulta adecuado el uso de abreviaturas o acrónimos:

Veamos ahora qué código HTML debemos escribir para conseguir ese resultado:

<p>Usamos <abbr title="Lenguaje de Marcado de Hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p>

<p>Puedes utilizar <abbr title="Hojas de Estilo en Cascada">CSS</abbr> para dar estilo a tu <abbr title="Lenguaje de Marcado de Hipertexto">HTML</abbr>.</p>

<p>La <abbr title="Administración Nacional de Aeronáutica y el Espacio">NASA</abbr> realiza un trabajo fascinante, sin duda.</p>

<p>El chiste de Ashok me hizo <abbr title="Reír a carcajadas">LOL</abbr> muchísimo.</p>

El objetivo principal de este elemento es aportar valor semántico y facilitar información adicional. Aunque todos los navegadores lo muestran como un elemento en línea (inline) de forma predeterminada, su estilo visual por defecto no es consistente y varía según el navegador (si bien esto siempre puede unificarse añadiendo reglas CSS).

Las diferencias de estilo más comunes son las siguientes:

• Sin estilo visual: Algunos navegadores, como Internet Explorer, no le aplican ninguna apariencia distintiva, mostrándolo exactamente igual que si fuera un elemento <span>.
• Subrayado: Navegadores como Opera o Firefox suelen añadir un subrayado de puntos al texto de la abreviatura para diferenciarlo.
• Versalitas: Unos pocos navegadores van un paso más allá y, además del subrayado punteado, transforman el texto a versalitas (small caps).

Ejercicio propuesto: Ejemplo de uso de abreviaturas

Crea una página web utilizando el código del ejemplo anterior, y añade varios párrafos nuevos que contengan algunas abreviaturas y verifica el resultado en tu navegador. Recuerda incluir el resto de etiquetas básicas de HTML necesarias para la estructura del documento y no olvides validar tu código.

Ejercicio propuesto: Abreviaturas para chatear

El mundo del correo electrónico, los mensajes de texto y la mensajería instantánea han dado lugar a toda una serie de acrónimos y abreviaturas que permiten a los usuarios redactar sus mensajes con mayor rapidez. En este ejercicio deberás crear un par de listas. La primera incluirá la relación de abreviaturas que se enumeran a continuación (puedes añadir otras que conozcas). La segunda lista deberá contener al menos veinte frases que ilustren cómo se utilizan dichas abreviaturas en una conversación de chat.

Además, utiliza encabezados <h1> y <h2> para añadir títulos a las listas y proporcionar así un texto descriptivo previo.

Por ejemplo, la primera lista podría mostrar las abreviaturas de la siguiente manera:

• bn – Bien
• bss – Besos
• finde – Fin de semana
• hl – Hola
• kdms – Quedamos
• npi – Ni puñetera idea
• ns / nc – No sabe / No contesta
• pf / xfa – Por favor
• pq / xq – Por qué
• q tal – Qué tal
• rt – Retuit (compartido / de acuerdo)
• salu2 – Saludos
• tb – También
• tqm – Te quiero mucho
• tpc – Tampoco
• vdd – Verdad
• xo – Pero
• +o- – Más o menos

La segunda lista deberá incluir al menos veinte frases en las que se empleen dichas abreviaturas. Por ejemplo:

• Espero que te encuentres bn, hace tiempo que no hablamos.
• Me tengo que ir corriendo, hablamos luego. ¡bss!
• ¿Tenéis algún plan interesante para este finde?
• hl, ¿te ha llegado ya el paquete que te envié?
• Si os parece bien, kdms a las 20:00 en la plaza mayor.
• No me preguntes cómo arreglarlo porque no tengo npi.
• Le he preguntado si vendrá a la cena de empresa, pero de momento ns / nc.
• …

Puedes utilizar el siguiente código como ejemplo para saber qué etiquetas debes utilizar para obtener ambas listas:

<h1>Algunas abreviaturas que uso para chatear</h1>

<h2>Las abreviaturas</h2>

<ul>
    <li>bn - Bien</li>
    <li>bss - Besos</li>
    <li>finde - Fin de semana</li>
    <li>hl - Hola</li>
    <li>kdms - Quedamos</li>
    <li>npi - Ni puñetera idea</li>
    <li>ns / nc - No sabe / No contesta</li>
    <li>...</li>
</ul>

<h2>Algunos ejemplos</h2>

<ul>
    <li>Espero que te encuentres <abbr title="Bien">bn</abbr>, hace tiempo que no hablamos.</li>
    <li>Me tengo que ir corriendo, hablamos luego. ¡<abbr title="Besos">bss</abbr>!</li>
    <li>¿Tenéis algún plan interesante para este <abbr title="Fin de semana">finde</abbr>?</li>
    <li><abbr title="Hola">hl</abbr>, ¿te ha llegado ya el paquete que te envié?</li>
    <li>Si os parece bien, <abbr title="Quedamos">kdms</abbr> a las 20:00 en la plaza mayor.</li>
    <li>No me preguntes cómo arreglarlo porque no tengo <abbr title="Ni puñetera idea">npi</abbr>.</li>
    <li>Le he preguntado si vendrá a la cena de empresa, pero de momento <abbr title="No sabe / No contesta">ns / nc</abbr>.</li>
    <li>...</li>
</ul>

Citas

El elemento <q>

El elemento HTML <q> indica que el texto que encierra es una cita corta en línea (inline). La gran mayoría de los navegadores modernos interpretan este elemento envolviendo automáticamente el texto entre comillas.

Asimismo, puedes utilizar el atributo cite para especificar una URL que señale el documento de origen o la fuente de la información citada, aunque es importante tener en cuenta que, por defecto, el navegador no muestra esta URL al usuario de forma visible.

A continuación mostramos un par de ejemplos analizando primero el resultado visual (en la mayoría de los casos la única diferencia es que las comillas aparecen automáticamente para acotar la cita):

Y ahora el código fuente correspondiente:

<p>
    Cuando Dave le pide a HAL que abra las compuertas de la cápsula, HAL responde: <q cite="https://www.imdb.com/es-es/title/tt0062622/">"Lo siento, Dave. Me temo que no puedo hacerlo"</q>.
</p>

<p>
    Según el sitio web de Mozilla,
    <q cite="https://www.mozilla.org/en-US/about/history/details/">"Firefox 1.0 se lanzó en 2004 y se convirtió en un gran éxito"</q>.
</p>

Importante: El elemento <q> está diseñado para citas breves que no requieren saltos de párrafo. Para citas extensas, utiliza el elemento <blockquote>.

Ejercicio propuesto: Citas en línea

Crea una página web utilizando el código del ejemplo anterior, y luego añade varios párrafos que contenga citas de tu elección y verifica el resultado en el navegador. Recuerda incluir el resto de etiquetas básicas de HTML para estructurar el documento y no olvides validar tu código.

Puedes usar por ejemplo citas de tu película favorita, tal como aparecen en «https://www.fotogramas.es/noticias-cine/g32183447/star-wars-mejores-frases-de-la-saga/«.

El elemento <blockquote>

El elemento HTML <blockquote> (o elemento de cita en bloque) indica que el texto que encierra constituye una cita extensa. Por lo general, los navegadores representan este elemento visualmente aplicando una sangría o indentación al texto.

Es posible especificar la URL de la fuente de la cita mediante el atributo cite, pero para indicar la referencia de la fuente en formato de texto visible se emplea el elemento completo <cite>. Por ejemplo:

Vuestro trabajo va a llenar gran parte de vuestra vida, y la única forma de estar realmente satisfecho es hacer lo que creéis que es un gran trabajo. Y la única forma de hacer un gran trabajo es amar lo que hacéis. Si aún no lo habéis encontrado, seguid buscando. No os conforméis. Como con todo lo que tiene que ver con el corazón, lo sabréis cuando lo encontréis. Steve Jobs

<blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416859">
    Vuestro trabajo va a llenar gran parte de vuestra vida, y la única forma de estar realmente satisfecho es hacer lo que creéis que es un gran trabajo. Y la única forma de hacer un gran trabajo es amar lo que hacéis. Si aún no lo habéis encontrado, seguid buscando. No os conforméis. Como con todo lo que tiene que ver con el corazón, lo sabréis cuando lo encontréis.
    <a href="https://www.brainyquote.com/quotes/steve_jobs_416859"><cite>Steve Jobs</cite></a>
</blockquote>

Ejercicio propuesto: Citas célebres

Crea una página web que recopile al menos veinte de las citas más famosas de la historia. Puedes encontrar muchas de ellas en sitios como «https://www.proverbia.net«, «https://www.mundifrases.com/«, o también puedes utilizar cualquier otra fuente que prefieras.

Debes utilizar el elemento <blockquote> para envolver la cita completa, y el elemento <cite> dentro de cada cita para indicar el nombre del autor, tal como se muestra en el ejemplo anterior y en los siguientes:

Combinando los elementos <q>, <blockquote> y <cite>

El elemento de cita HTML (<cite>) se utiliza para referenciar el título de una obra creativa citada (como un libro, un artículo, un ensayo, una película, etc.). Según las convenciones de metadatos más apropiadas para el contexto, esta referencia puede presentarse de forma abreviada. Veamos un ejemplo práctico en el que resulta útil combinar estos tres elementos para crear una mejor estructura semántica:

Y ahora echemos un vistazo al código fuente que debemos escribir para obtener ese resultado:

<p>
    Hola y bienvenidos a mi página de motivación. Como dice el sitio 
    <a href="https://proverbia.net/autor/frases-de-confucio">
        <cite>Citas de Confucio</cite>
    </a>:
</p>

<blockquote cite="https://www.proverbia.net/citasautor/confucio">
    No importa lo lento que vayas mientras no te detengas.
</blockquote>

<p>
    También me encanta el concepto del pensamiento positivo y la necesidad de 
    <q cite="https://www.mundifrases.com/tema/pensamiento-positivo/">
        mantener tus pensamientos positivos
    </q> 
    (como se menciona en 
    <a href="https://psicologiaymente.com/reflexiones/frases-positivas">
        <cite>Citas Positivas</cite>
    </a>).
</p>

Ejercicio propuesto: Ejemplo de citas completas

Crea una página web utilizando primero el código del ejemplo anterior y verifica el resultado en tu navegador. A continuación añade otro bloque similar combinando las tres etiquetas mencionadas, y vuelve a comprobar el resultado en el navegador.

No olvides incluir el resto de las etiquetas básicas de HTML (incluyendo títulos <h1> y <h2>) y valida tu código para asegurar que es correcto.

Representación de código informático

HTML pone a nuestra disposición una serie de elementos específicos para el marcado de código informático:

• <code>: Se utiliza para marcar fragmentos genéricos de código informático.
• <pre>: Se usa para preservar los espacios en blanco (generalmente empleado para bloques de código). Si utilizas sangría o espacios en blanco adicionales dentro del texto, los navegadores los ignorarán por defecto y no se verán reflejados en la página renderizada. No obstante, como ya explicamos en una unidad anterior, si envuelves el texto entre etiquetas <pre></pre>, los espacios en blanco se mostrarán idénticos a como aparecen en tu editor de texto.
• <var>: Sirve para marcar específicamente nombres de variables.
• <kbd>: Se utiliza para marcar la entrada de teclado (u otros tipos de entrada de datos) introducida en el ordenador.
• <samp>: Se emplea para marcar la salida (output) de un programa informático.

El elemento <code>

El elemento HTML <code> muestra su contenido con un estilo visual diseñado para indicar que el texto es un fragmento breve de código informático. Por defecto, los navegadores muestran el texto de este elemento utilizando la fuente monoespaciada predeterminada del sistema.

Veamos un par de ejemplos:

Y este sería el código HTML del ejemplo anterior:

<p>
    El método <code>push()</code> añade uno o más elementos al final de un array y devuelve la nueva longitud del mismo.
</p>

<p>
    La función <code>selectAll()</code> resalta todo el texto en el campo de entrada para que el usuario pueda, por ejemplo, copiar o eliminar el texto.
</p>

Ejercicio propuesto: Código en línea

Crea una página web con el código del ejemplo anterior, luego añade algunos ejemplos más, y verifica los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.

Los elementos <pre> + <code>

El elemento <code> por sí solo representa únicamente una instrucción o una única línea de código. Para representar múltiples líneas de código (un bloque), debemos envolver el elemento <code> dentro de un elemento <pre>. De esta forma, respetaremos los espacios y saltos de línea. Por ejemplo:

if (a > b) {
    console.log('¡Hola!'); // Ejemplo de código en el lenguaje JavaScript
}

Código HTML del ejemplo:

<pre><code>
if (a > b) {
    console.log('¡Hola!'); // Ejemplo de código en el lenguaje JavaScript
}
</code></pre>

Ejercicio propuesto: Bloque de código

Crea una página web con el código del ejemplo anterior, añade algunos bloque adicionales con cualquier fragmento de código de cualquier lenguaje y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código

El elemento <var>

El elemento de variable HTML (<var>) representa el nombre de una variable dentro de una expresión matemática o en un contexto de programación. Por lo general, se presenta visualmente utilizando una versión en cursiva de la tipografía actual, aunque este comportamiento depende de cada navegador.

Por ejemplo:

Código HTML del ejemplo:

<p>
    Una ecuación simple: <var>x</var> = <var>y</var> + 2
</p>

<p>
    El volumen de una caja es <var>l</var> × <var>w</var> × <var>h</var>, donde <var>l</var> 
    representa la longitud, <var>w</var> la anchura y <var>h</var> la 
    altura de la caja.
</p>

<p>
    Las variables <var>minSpeed</var> y <var>maxSpeed</var> controlan la velocidad mínima y máxima 
    del aparato en revoluciones por minuto (RPM).
</p>

Ejercicio propuesto: Ecuaciones y variables

Crea una página web con el código del ejemplo anterior, y añade un par de párrafos adicionales con cualquier ecuación que desees y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código

El elemento <kbd>

El elemento HTML de entrada de teclado (<kbd>) representa un fragmento de texto en línea que denota una entrada del usuario, ya sea a través de un teclado convencional, comandos de voz o cualquier otro dispositivo de entrada de texto.

Por convención, el navegador renderiza el contenido de un elemento <kbd> utilizando su fuente monoespaciada predeterminada para que destaque visualmente. Veamos algunos ejemplos:

<p>
    Por favor, pulsa <kbd>Ctrl</kbd> + <kbd>Mayús</kbd> + <kbd>R</kbd> para recargar una página de MDN.
</p>

<p>
    Usa el comando <kbd>help micomando</kbd> para ver la documentación del comando "micomando".
</p>

<p>
    Puedes crear un nuevo documento utilizando el atajo de teclado <kbd>Ctrl</kbd> + <kbd>N</kbd>.
</p>

Ejercicio propuesto: Atajos de teclado

Crea una página web con el código del ejemplo anterior, añade un par de párrafos con cualquier atajo de teclado que conozcas y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.

El elemento <samp>

El elemento de muestra HTML (<samp>) se utiliza para encerrar texto en línea que representa la salida (output) de muestra o el resultado devuelto por un programa informático. Su contenido se muestra habitualmente utilizando la fuente monoespaciada predeterminada del navegador (como Courier o Lucida Console) para diferenciarlo del texto normal.

Veamos un par de ejemplos:

Código HTML del ejemplo:

<p>Estaba intentando arrancar mi ordenador, pero me salió este mensaje tan irónico:</p>

<p>
    <samp>Teclado no encontrado <br>Pulse F1 para continuar</samp>
</p>

<p>...</p>

<p>
    Cuando el proceso finalice, la utilidad mostrará el texto <samp>Escaneo completado. Se han encontrado <em>N</em> resultados.</samp> Entonces podrás proceder al siguiente paso.
</p>

Ejercicio propuesto: Salida de muestra

Crea una página web con el código del ejemplo anterior, junto con un par de párrafos más, y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código para asegurar que es correcto

Un ejemplo completo

Veamos ahora un ejemplo completo que combina todos estos elementos (<code>, <pre>, <var>, <kbd>, <samp>) para ver cómo interactúan entre sí.

A continuación mostramos el resultado visual:

var para = document.querySelector('p');

para.onclick = function() {
  alert('¡Ay, deja de pincharme!');
}

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

Y aquí el código fuente correspondiente:

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('¡Ay, deja de pincharme!');
}</code></pre>

<p>No deberías utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p>

<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>

<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

Ejercicio propuesto: Código, atajos y salida

Crea una página web con el código del ejemplo anterior, junto con algún bloque <pre>...</pre> adicional, y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .

Ejercicio propuesto: Comandos de Linux

Crea una página web que muestre una tabla con algunos de los comandos de Linux más importantes y su descripción de uso, siguiendo aproximadamente el modelo de la tabla que se muestra a continuación.

Debes cumplir los siguientes requisitos semánticos:
1. Utiliza la etiqueta <code> para los comandos en la columna de la izquierda.
2. Utiliza la etiqueta <kbd> para los ejemplos de entrada del usuario (user’s input) dentro de las descripciones.
3. Recuerda que la tabla debe tener encabezados (<th>) y un título o leyenda (<caption>).

Marcado de datos de contacto

HTML proporciona un elemento específico para marcar semánticamente la información de contacto: <address>. Este elemento es muy versátil y puede utilizarse en diversos contextos; por ejemplo, para facilitar los datos de contacto de una empresa en el encabezado o pie de página de un sitio web, o para indicar quién es el autor de un artículo o una publicación concreta.

Su funcionamiento es sencillo: basta con envolver los detalles de contacto dentro de esta etiqueta. Veamos un ejemplo básico:

<address>
    <p>Fernando Ruiz, IES San Vicente, España</p>
</address>

No obstante, el contenido del elemento <address> puede albergar un marcado mucho más complejo. De hecho, la información suministrada puede adoptar la forma que mejor se ajuste al contexto, incluyendo cualquier dato necesario: dirección física, URL, correo electrónico, número de teléfono, redes sociales, coordenadas geográficas, etc. .

Regla importante: Debes tener en cuenta que siempre hay que incluir, como mínimo, el nombre de la persona, grupo u organización a la que hacen referencia dichos datos de contacto.

Veamos un ejemplo más completo y estructurado:

<address>
    <p>
        Juan Pérez<br>
        Calle Mayor, 10<br>
        Madrid, 28013<br>
        España
    </p>

    <ul>
        <li>Tel: 91 123 45 67</li>
        <li>Email: [email protected]</li>
    </ul>
</address>

También es correcto utilizar este elemento para referenciar información de contacto que se encuentra en otra página o enlace, como en el siguiente caso:

<address>
    Puedes contactar con el autor en <a href="http://www.midominio.com/contacto">www.midominio.com</a>.<br>

    Si encuentras algún error, por favor <a href="mailto:[email protected]">contacta con el webmaster</a>.<br>

    También puedes visitarnos en:<br>
    Fundación Mozilla<br>
    331 E Evelyn Ave<br>
    Mountain View, CA 94041<br>
    EE. UU.
</address>

Ejercicio propuesto: Información de contacto

Crea una página web utilizando el código de los ejemplos anteriores y verifica el resultado en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código para asegurar que la estructura es correcta .

El elemento <figure>

El elemento HTML <figure> (Figura con leyenda opcional) representa contenido independiente (self-contained content), el cual puede ir acompañado de un título o leyenda opcional especificado mediante el elemento <figcaption>.

La figura, su leyenda y su contenido se referencian semánticamente como una única unidad.

Figuras con imágenes

Este es el uso más común: asociar imágenes con sus pies de foto. Por ejemplo:

---

Código HTML del ejemplo:

<figure>
    <img src="https://picsum.photos/id/235/300/200"
         alt="Paisaje nórdico.">
    <figcaption>Paisaje nórdico</figcaption>
</figure>

<hr>

<figure>
    <img src="https://picsum.photos/id/237/300/200"
         alt="Perro pidiendo algo de comida">
    <figcaption>Perro pidiendo comida</figcaption>
</figure>

Ejercicio propuesto: Imágenes con leyendas

Crea una página web utilizando el código del ejemplo anterior, añade un par de figuras (<figure>) nuevas con imágenes y elige una leyenda adecuada (<figcaption>) para cada una. Finalmente, comprueba los resultados en tu navegador. No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.

Puedes utilizar cualquier imagen que te guste; por ejemplo, las del servicio «https://picsum.photos/images«, tal como hicimos en ejercicios de la unidad anterior.

Figuras con poemas

El elemento <figure> no sirve solo para imágenes; también es excelente para enmarcar poemas o fragmentos literarios, como por ejemplo:

Código HTML del ejemplo:

<figure>
    <p>
        Caminante, son tus huellas<br>
        el camino y nada más;<br>
        Caminante, no hay camino,<br>
        se hace camino al andar.<br>
        Al andar se hace el camino,<br>
        y al volver la vista atrás<br>
        se ve la senda que nunca<br>
        se ha de volver a pisar.
    </p>
    <figcaption>
        <cite>Proverbios y cantares</cite>, de Antonio Machado
    </figcaption>
</figure>

Ejercicio propuesto: Poemas

Crea una página web con el código del ejemplo anterior (el de Machado), añade una nueva figura con otro poema que te guste (quizás de Lorca, Bécquer o Neruda) y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .

Figuras con código

El elemento <figure> es ideal para mostrar fragmentos de código que tienen un título descriptivo o que funcionan como ejemplos independientes.

Veamos un ejemplo práctico:

function EjemploNavigator() {
  var txt;
  txt = "Nombre en clave: " + navigator.appCodeName + "; ";
  txt+= "Nombre del navegador: " + navigator.appName + "; ";
  txt+= "Versión del navegador: " + navigator.appVersion + "; ";
  txt+= "Cookies habilitadas: " + navigator.cookieEnabled + "; ";
  txt+= "Plataforma: " + navigator.platform + "; ";
  txt+= "Cabecera User-agent: " + navigator.userAgent + "; ";
  
  console.log("EjemploNavigator", txt);
}

Código HTML del ejemplo:

<figure>
    <figcaption>Obtener detalles del navegador usando <code>navigator</code>:</figcaption>
    
    <pre><code>
      function EjemploNavigator() {
        var txt;
        txt = "Nombre en clave: " + navigator.appCodeName + "; ";
        txt+= "Nombre del navegador: " + navigator.appName + "; ";
        txt+= "Versión del navegador: " + navigator.appVersion + "; ";
        txt+= "Cookies habilitadas: " + navigator.cookieEnabled + "; ";
        txt+= "Plataforma: " + navigator.platform + "; ";
        txt+= "Cabecera User-agent: " + navigator.userAgent + "; ";
  
        console.log("EjemploNavigator", txt);
      }
    </code></pre>

</figure>

Ejercicio propuesto: Bloque de código en figura

Crea una página web con el código del ejemplo anterior, junto con otro más, y comprueba los resultados en tu navegador.

No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código .

Figuras con citas

Como vimos anteriormente, podemos usar <blockquote> por sí solo, pero si envolvemos la cita dentro de un elemento <figure>, podemos usar <figcaption> para indicar el autor o la fuente con mayor implicación semánticamente. Por ejemplo:

Código HTML del ejemplo:

<figure>
    <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
    <blockquote>
        Si depurar es el proceso de eliminar errores de software, 
        entonces programar debe ser el proceso de introducirlos.
    </blockquote>
</figure>

Ejercicio propuesto: Citas famosas (versión con figuras)

Crea una página web con el código del ejemplo anterior y añade algunas citas famosas más utilizando este mismo formato (<figure> + <figcaption> + <blockquote>) para mostrar al menos diez citas.

Finalmente, comprueba los resultados en tu navegador. No olvides incluir el resto de las etiquetas básicas de HTML y validar tu código.

Puedes reutilizar las citas que empleaste en ejercicios anteriores o buscar nuevas en los sitios que recomendamos previamente «https://proverbia.net/«, «https://www.mundifrases.com/«, o alguna en inglés como «https://www.brainyquote.com/«, o cualquier otra página web que conozcas.

Test

Comprueba tus conocimientos con este test sobre tablas y otros conceptos relacionados con esta unidad.