Formateo de texto avanzado

This translation is incomplete. Please help translate this article from English

Hay muchos otros elementos en HTML para dar formato al texto que no explicamos en el artículo fundamentos del HTML. Los elementos que describiremos en este artículo son menos conocidos pero muy útiles (aun así, no se trata de la lista completa). En este artículo hablaremos de cómo marcar las citas, las listas de descripción, el código informático y otros textos relacionados, los subíndices y superíndices, la información de contacto y mucho más.

Prerrequisitos: Conocimientos básicos de HTML, que encontrarás en Introducción al HTML. Texto de formato HTML, que explicamos en Fundamentos de texto en HTML.
Objetivo: Aprender a utilizar los elementos HTML menos conocidos para marcar características semánticas avanzadas.

Listas descriptivas

En los fundamentos de texto HTML, hablamos de la forma de crear listas básicas en HTML, pero no mencionamos el tercer tipo de lista que hay: las listas descriptivas. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, tales como términos y definiciones, o preguntas y respuestas. Echemos un vistazo a un ejemplo de términos y definiciones:

soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Las listas descriptivas utilizan una etiqueta diferente al resto: <dl>. Además, cada término se etiqueta con <dt> (description term o detalles de la descripción), y cada descripción con un elemento <dd> (description definition o descripción de la definición). Vamos a completar la información con un ejemplo:

<dl>
  <dt>soliloquio</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
  <dt>monólogo</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
  <dt>aparte</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
</dl>

Los estilos por defecto del navegador mostrarán listas descriptivas con las descripciones en sangría. Los estilos de MDN siguen esta convención bastante al pie de la letra, pero también refuerzan los términos con una negrita para darles más definición.

soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Ten en cuenta que un mismo término puede tener diversas descripciones. Por ejemplo:

aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o una información adicional.
Si la obra es escrita, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta pior separado (a menudo en una caja de texto en el margen.)

Aprendizaje activo: Marcar un conjunto de definiciones

Es hora de practicar las listas descriptivas: añade al texto elementos sin formato en el área de Entrada para que aparezca como una lista descriptiva en el área de Salida. Puedes usar tus propios términos y descripciones si lo deseas.

Si cometes un error, siempre puedes volver a empezar con el botón de Reinicio. Si te quedas atascado, pulsa el botón Mostrar la solución para ver la respuesta.

Citas

El HTML también dispone de elementos para el marcado de citas; qué elemento se debe utilizar depende de si la cita se marca como un bloque independiente o como un elemento en línea.

Cita en bloque independiente

Si citas un fragmento de un texto de otro documento como un bloque de contenido independiente (ya sea un párrafo, varios párrafos, una lista, etc.), debes delimitarlo con un elemento <blockquote> que lo defina como tal e incluir una URL que apunte a la fuente de la cita dentro de un atributo cite . Por ejemplo, la siguiente anotación viene de la página del elemento <blockquote> de MDN:

<p>El <strong> elemento HTML <code>&lt;blockquote&gt; </code> </strong> (o <em> elemento HTML de cita
en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada. </p>

Para convertir esto en una cita en bloque independiente, tenemos que hacer lo siguiente:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p> El <strong> elemento HTML <code>&lt;blockquote&gt; </code> </strong> (o <em> elemento HTML de cita
  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada. </p>
</blockquote>

El estilo por defecto del navegador hará que se vea como un párrafo sangrado para indicar que se trata de una cita. El MDN a parte de hacer lo mismo, añade algo más de estilo:

El elemento HTML <blockquote> (o elemento HTML de citado en bloque independiente) indica que el texto al que delimita es una cita ampliada.

Citas en línea

Las citas en línea funcionan exactamente de la misma manera, salvo que utilizan el elemento <q>. Por ejemplo, el siguiente fragmento de marcado contiene una cita de la página <q> de MDN:

<p>El elemento de cita (<code>&lt;q&gt;</code>) se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> utiliza en
citas cortas que no requieren saltos de párrafo.</q></p>

Los estilos por defecto del navegador harán que se vea entre comillas para indicar que es una cita:

El elemento de cita (<q>) está destinado a citas cortas que no requieren saltos de párrafo.

Citas

El contenido del atributo cite puede parecer útil, pero desafortunadamente los navegadores, lectores de pantalla, etc., no suelen trabajar con él. No hay manera de conseguir que el navegador muestre el contenido de la cita sin necesidad de que escribas tu solución utilizando JavaScript o CSS. Si deseas disponer de la fuente de la cita en la página, tienes que utilizar un enlace o buscar otra solución que resulte apropiada.

También está el elemento <cite>, pero está destinado a contener el título del recurso que se cita. Por ejemplo, el nombre del libro. No obstante, no hay razón para que no puedas vincular el texto <cite> a la fuente de la cita de alguna manera:

<p>De acuerdo con la <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>página de MDN de citas en bloque independiente</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>El <strong> elemento HTML <code>&lt;blockquote&gt; </code> </strong> (o <em> Elemento de cita
  de bloque HTML</em>) 
indica que el texto adjunto es una cita extendida. </p>
</blockquote>

<p> El elemento de cita (<code>&lt;q&gt;</code>) se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> utiliza en
las citas cortas que no requieren saltos de párrafo. </q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite> página de MDN de q </cite></a>.</p>

Las citas se muestran en cursiva por defecto. Puede ver el código en acción en nuestro ejemplo quotations.html.

Aprendizaje activo: ¿Quién dijo qué?

¡Tiempo para otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:

  1. Conviertas el párrafo del medio en una cita en bloque independiente que incluya un atributo cite.
  2. Conviertas parte del tercer párrafo en una cita en línea que incluya un atributo cite.
  3. Incluyas un elemento <cite> en cada enlace que especifique el título de la fuente citada.

Las fuentes de citación que necesitas son:

  • http://www.brainyquote.com/quotes/authors/c/confucius.html para las citas de Confucio
  • http://www.affirmationsforpositivethinking.com/index.htm para «la necesidad de eliminar los pensamientos negativos».

Si cometes un error, siempre puedes volver a empezar con el botón de Reinicio. Si te quedas atascado, pulsa el botón Mostrar la solución para ver la respuesta.

Abreviaturas

Otro elemento bastante común cuando navegas por la web es <abbr> que se utiliza para delimitar una abreviatura o un acrónimo y proporcionar una expansión completa del término, incluido dentro de un atributo title. Veamos un par de ejemplos:

<p> Utilizamos <abbr title="Hypertext Markup Language">HTML</abbr> para estructurar nuestros documentos web. </p>

<p> Creo que el <abbr title="Reverend">Rev.</abbr> Green lo mató en la cocina con la motosierra. </p>

Presentarán un aspecto parecido a este (la expansión aparecerá en una etiqueta de información cuando se pase el cursor por encima):

Utilizamos HTML para estructurar nuestros documentos web.

Creo que el Rev. Green lo mató en la cocina con la motosierra.

Nota: Hay otro elemento, <acronym>, que hace básicamente lo mismo que <abbr>y que está destinado específicamente a los acrónimos en lugar de las abreviaturas. Sin embargo, ha caído en desuso (no recibió el mismo apoyo por parte de los navegadores que tuvo <abbr> y tiene una función tan similar que consideraron inútil conservar ambas. Solo tienes que utilizar <abbr>.

Aprendizaje activo: marcar una abreviatura

En esta sencilla tarea de aprendizaje activo, simplemente marcaremos una abreviatura. Puedes utilizar el ejemplo que encontrarás a continuación, o sustituirlo por otro de tu elección. 

Marcar la información de contacto

El HTML tiene un elemento para marcar la información de contacto: <address>. Este elemento simplemente delimita su información de contacto, por ejemplo:

<address>
  <p> Chris Mills, Manchester, The Grim North, Reino Unido </p>
</address>

También podría incluir etiquetas más complejas y más detalles de la información de contacto, por ejemplo:

<address>
  <p>
    Chris Mills<br>
    Manchester<br>
    The Grim North<br>
    Reino Unido
  </p>

  <ul>
    <li>Telf: 01234 567 890 </li>
    <li> E-mail: me@grim-north.co.uk </li>
  </ul>
</address>

Observa que el ejemplo siguiente también es correcto si la página vinculada contiene la información de contacto:

<address>
  <p> Página escrita por Chris Mills <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superíndice y subíndice

En ocasiones tendrás que utilizar superíndices y subíndices en elementos como fechas, fórmulas químicas o ecuaciones matemáticas para que tengan el significado correcto. Los elementos <sup> y <sub> se ocupan de ello. Por ejemplo:

<p>Vivo en un 5<sup>º</sup> piso.</p>
<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>Si x <sup>2</sup> es 9, x debe ser igual a 3 o -3.</P>

La salida de este código presenta el aspecto siguiente:

Vivo en un 5º piso.

La fórmula química de la cafeína es C8H10N4O2.

Si x2 es 9, x debe ser igual a 3 o -3.

Representación del código informático

HTML dispone de una serie de elementos para el marcado de código informático:

  • <code>: Para marcar fragmentos genéricos de código informático.
  • <pre>: Para respetar los espacios en blanco (en general, en los bloques de código). Si se utiliza la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas <pre></pre>, los espacios en blanco se representarán de forma idéntica a como se ven en el editor de texto.
  • <var>: Para marcar específicamente nombres de variables.
  • <kbd>: Para marcar entradas de teclado (y de otro tipo) en el ordenador.
  • <samp>: Para marcar la salida de un programa de ordenador.

Veamos algunos ejemplos. Juega con estas etiquetas (descárgate una copia de nuestro archivo de muestra other-semantics.html):

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

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

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

<p>En el ejemplo anterior de JavaScript, <var>para</var> representa un elemento del 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 bytes de datos
64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

El código anterior se vería así:

Marcar horas y fechas

El HTML también ofrece el elemento <time> para marcar las horas y fechas en un formato legible por la máquina. Por ejemplo:

<time datetime="2016-01-20">20 de enero de 2016</time>

¿Por qué es útil? Los seres humanos anotan las fechas de muchas maneras distintas. La fecha anterior se puede escribir como:

  • 20 de enero 2016
  • 20 de enero del año 2016
  • 20 en. 2016
  • 20/01/16
  • 01/20/16
  • El día 20 del próximo mes
  • 20e Janvier 2016
  • 2016年1月20日
  • Y mucho más

Pero un ordenador no puede reconocer ninguna de ellas fácilmente. ¿Qué sucedería si quisieras recabar automáticamente las fechas de todos los eventos de una página e insertarlos en un calendario? El elemento <time> te permite adjuntar una hora/fecha inequívoca y legible por una máquina.

El ejemplo básico anterior solo proporciona una fecha simple legible por una máquina, pero hay muchas otras opciones posibles, por ejemplo:

<!-- Fecha simple estándar -->
<time datetime="2016-01-20">20 enero 2016</time>
<!-- Solo año y mes -->
<time datetime="2016-01">Enero 2016</time>
<!-- Solo mes y día -->
<time datetime="01-20">20 enero</time>
<!-- Solo tiempo, horas y minutos -->
<time datetime="19:30">19:30</time>

<!-- ¡También puedes marcar los segundos y milisegundos! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Fecha y hora -->
<time datetime="2016-01-20T19:30">19:30, 20 enero 2016</time>
<!-- Fecha y hora con el desplazamiento correspondiente a la zona horaria -->
<time datetime="2016-01-20T19:30+01:00">Las 19:30, 20 enero 2016, 18:30 en Canarias</time>
<!-- Una semana del año específica -->
<time datetime="2016-W04">La cuarta semana de 2016</time>

¡Pon a prueba tus habilidades!

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML.

Resumen

Hemos llegado al final de nuestro estudio de la semántica de los elementos de texto de HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de los elementos de texto HTML. Solo hemos pretendido exponer los elementos esenciales y algunos de los más comunes que puedes encontrarte ahí afuera, o por lo menos que puedan resultar interesantes. Puedes encontrar más elementos HTML en nuestras referencias sobre elementos HTML (la sección Semántica de texto en línea es un buen lugar para empezar). En el próximo artículo veremos los diferentes elementos HTML que puedes usar para estructurar las diferentes partes de un documento HTML.

En este módulo