21. Elementos semánticos menos conocidos

Mark Norman Francis. 8 de julio del 2008. Última modificación: 10 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: dirección, sub, sup, samp, abbr

En este apartado presentaremos algunos de los elementos semánticos del HTML más oscuros y menos conocidos y utilizados. Hablaremos del etiquetado de código de programación, interacción con ordenadores, citas y abreviaturas, visualización de los cambios realizados en los documentos y más.

Los contenidos de este apartado son los siguientes:

• 21.1. Destacar la información de contacto
• 21.2. Lenguajes y código de programación
• 21.3. Mostrar la interacción con ordenadores
• 21.4. Variables
• 21.5. Citas
• 21.6. Abreviaturas
• 21.7. Instancias definidoras
• 21.8. Superíndice y subíndice
• 21.9. Saltos de línea
• 21.10. Líneas horizontales
• 21.11. Cambios en los documentos (insertar y suprimir)
• Resumen

21.1. Destacar la información de contacto

El elemento address es probablemente el que tiene el nombre más equivocado y peor entendido de HTML. A primera vista, con un nombre como address (dirección) parecería que se utiliza para encapsular direcciones, ya sean electrónicas o postales, o cosas similares. Esto sólo es así en parte.

Por ejemplo:

<address> 
   <span>Mark Norman Francis</span>,
   <span class="tel">1-800-555-4865</span>
</address>

Archivo fuente: "Simple address example"

En el ejemplo siguiente, la dirección se encuentra en el párrafo del pie de página y es un enlace hacia otra página del sitio web. La información de contacto ampliada de la página a la que apunta este enlace puede contener muchos más datos, y de esta manera no hay que repetirla una y otra vez en el sitio web.

<p class="footer">© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>

Archivo fuente: "Advanced address example"

(Evidentemente, si el sitio web tuviera más de un autor, se podría utilizar este mismo patrón y definir enlaces hacia páginas de contacto diferentes para los diferentes autores.)

Lo que es incorrecto es utilizar el elemento address para indicar cualquier otro tipo de direcciones, como lo que podéis ver en la página web de ejemplo incorrecto.

<p> Our company address: </p>
   <address>
      Opera Software ASA,
      Waldemar Thranes gate 98,
      NO-0175 OSLO,
      NORWAY
   </address>

Archivo fuente: "Incorrect address example"

(Evidentemente, si Opera asumiera la responsabilidad colectiva por el artículo, este código sería correcto aunque nosotros, y no todo el personal de Opera, fuéramos los autores reales de esta página en concreto.)

Para cualquier dirección general, podéis utilizar lo que se conoce como "microformato" para indicar que un párrafo contiene una dirección. Encontraréis más información sobre los microformatos en otros artículos de la página web de Opera.

21.2. Lenguajes y código de programación

<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>

En caso de muestras de código más grandes que pueden ocupar múltiples líneas, podéis utilizar un bloque preformateado, tal como se explica en el apartado Etiquetado del contenido de texto en HTML.

Aunque no hay ningún método definido para indicar el lenguaje de programación o el código informático dentro del elemento code, podéis utilizar el atributo class. Una práctica muy habitual (que se menciona en la especificación de HTML5) es utilizar el prefijo language- (lenguaje) y entonces añadirle el nombre del lenguaje.

Así pues, el ejemplo anterior se convertiría en:

<p>It is bad form to use event handlers like 
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

Archivo fuente: "Second code example"

Algunos lenguajes de programación tienen nombres que no se pueden representar fácilmente en clases, como por ejemplo C#. La manera correcta de escribir este nombre sería class='language-c\#', que puede resultar confuso y se puede escribir mal con mucha facilidad. Aconsejaríamos utilizar una clase consistente sólo en letras y guiones y deletrearla completamente. Así pues, en este caso se podría utilizar class='language-csharp'.

21.3. Mostrar la interacción con ordenadores

Por ejemplo:

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>
<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
   <samp>PING google.com (64.233.187.99): 56 data bytes
   64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

   --- google.com ping statistics ---
   1 packets transmitted, 1 packets received, 0% packet loss
   round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
   </samp></pre>

Archivo fuente: "Computer interaction example"

El elemento samp indica un ejemplo de la salida de un programa informático. Tal como se puede ver en este ejemplo, con el atributo class se pueden indicar diferentes tipos de salidas. A pesar de ello, no hay ninguna convención que se haya adoptado de una manera general sobre el tipo de clases que se debe utilizar.

El elemento kbd indica la entrada por parte del usuario que interactúa con el ordenador. Aunque tradicionalmente estas entradas se hacen desde el teclado (y por ello se utiliza la contracción kbd, del inglés keyboard –teclado–), también se debe utilizar para indicar otros tipos de entradas, como por ejemplo por voz.

21.4. Variables

Por ejemplo:

<p>The value of <var>x</var> in
 3<var>x</var>+2=14 is 4.</p>
 
<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>

Archivo fuente: "Variables example"

21.5. Citas

Por ejemplo:

<p>La frase <q>Mi reino por un caballo</q>, como tantas otras, la escribió
  Shakespeare en su <cite>Ricardo III</cite>.</p>

21.6. Abreviaturas

El texto de la abreviatura se encuentra dentro del elemento abbr y la versión completa se sitúa dentro del atributo title, es decir:

<p>Styling is added to <abbr title="Hypertext Markup Language">HTML</abbr>
 documents using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Archivo fuente: "Abbreviations example"

21.7. Instancias definidoras

La diferencia es que el término utilizado en dfn no debe formar parte de una lista de términos y definiciones y que se puede utilizar como parte del flujo de texto normal, incluso en un estilo de prosa conversacional. Veamos, pues, un ejemplo del uso de dfn:

<p><dfn>HTML</dfn>: HTML significa "HyperText Markup Language". Es el 
 llenguatge que es fa servir per descriure el contingut de documents web.</p>

Aparece el término HTML seguido inmediatamente de su definición, con lo cual es el lugar ideal para utilizar el elemento dfn. Lo deberíais utilizar sólo una vez en una página, en el punto en el que se define el término por primera vez; de todas maneras, los términos se deben definir sólo una vez en una página, por lo que no es demasiado problemático.

Todo eso está muy bien, pero un ejemplo aislado no es demasiado práctico; el uso de dfn se recomienda cuando una abreviatura se utiliza más de una vez en una página. Por ejemplo, en el módulo "Fundamentos del HTML" de este curso, la abreviatura HTML aparecía más de cuarenta veces. Utilizar el código <abbr title="HyperText Markup Language">HTML</abbr> todas y cada una de las veces que se utiliza esta abreviatura sería un despilfarro de ancho de banda, sería visualmente muy molesto y para los usuarios de lectores de pantallas sería probablemente muy pesado y aburrido, ya que HTML se expande una y otra vez aunque ya se ha explicado qué significa. En lugar de ello, lo que se podría hacer es insertar el código en el punto en el que se define por primera vez para los lectores:

<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is 
 a language to describe the contents of web documents.</p>

Archivo fuente: "First defining instances example"

Entonces, cada vez que se utilice HTML se puede etiquetar simplemente como <abbr>HTML</abbr>. Así, un agente de usuario podría poner a disposición del usuario algún método para recuperar la instancia definidora de la abreviatura. Desafortunadamente, hoy por hoy no existe ningún agente de usuario que lo haga, ni siquiera los lectores de pantalla. Por lo tanto, sería mejor utilizar también el atributo title para ofrecer esta información:

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
 ("HyperText Markup Language") is a language to describe the contents of web 
 documents.</p>

Archivo fuente: "Second defining instances example"

Ahora, sin embargo, hemos doblado el término ampliado para HTML, lo cual puede ser un problema para los usuarios de lectores de pantalla. No obstante, el hecho de dejar la ampliación visible provoca que el documento sea menos útil para los usuarios videntes, que en prácticamente todos los casos serán la mayoría.

Creemos que éste es un compromiso aceptable cuando sólo hay una o dos abreviaturas que necesitan una definición (en páginas que exigen un número mayor de definiciones, quizá sería mejor crear una sección de glosario o una página en la que se pueda utilizar el etiquetado más riguroso de las listas de definiciones). Si esto es un tema que os afecta, el código podría ser:

<p><abbr title="HyperText Markup Language">HTML</abbr> 
(<dfn>HyperText Markup Language</dfn>) is a language to 
 describe the contents of web documents.</p>

Archivo fuente: "Third defining instances example"

No obstante, el agente de usuario debería tener algún método para conectar la definición con todas las apariciones del término definido. Actualmente, no hay ningún navegador que haga algo útil con dfn, aunque sigue siendo un vínculo útil para aplicar estilos con CSS. La solución propuesta anteriormente es actualmente la mejor que tenemos.

Éste es un caso muy desgraciado de una especificación que se ha creado sin unas directrices claras sobre cómo se debe utilizar un elemento; probablemente no se basó en ningún uso de este elemento en el mundo real, ya que en caso contrario habría algún método para combinar el término con su descripción o definición completa. La especificación HTML 5 entra en muchos más detalles sobre el uso de dfn, pero sigue siendo sólo un borrador y todavía no se puede utilizar en la web.

21.8. Superíndice y subíndice

Algunos lenguajes necesitan estos elementos para el uso correcto de las abreviaturas y se pueden utilizar para etiquetar contenido matemático de poca envergadura, ya que así se evita recurrir a MathML (un lenguaje de marcas matemático específico pero bastante complicado creado con el único objetivo de etiquetar fórmulas matemáticas complicadas).

Un ejemplo de los dos tipos:

<p>The chemical formula for water is H<sub>2</sub>O, and it
 is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
 by Albert Einstein is E=mc<sup>2</sup> – energy 
 is equal to the mass multiplied by the speed of light 
 squared.</p>

Archivo fuente: "Superscript and subscript example"

21.9. Saltos de línea

Teniendo en cuenta el modo como HTML define el espacio en blanco, no es posible controlar el lugar al que saltarán las líneas de texto (por ejemplo, etiquetar una dirección postal como un único párrafo pero querer que tenga un aspecto visual en el que cada parte de la dirección aparezca en una línea independiente) simplemente apretando la tecla de retorno mientras se va escribiendo el texto.

Algunas veces puede ser más fácil utilizar un bloque de texto preformateado en lugar de insertar elementos br. O, si queréis que una parte concreta de un texto aparezca en una línea independiente, aunque eso es puramente una cuestión de estilo, podéis poner esta parte en un elemento span y definirla a fin de que se muestre como un elemento de bloque.

Así, por ejemplo, podéis escribir la dirección de contacto de Opera que hemos visto antes en este apartado cuando hablábamos sobre el elemento address de la siguiente manera:

<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>

Archivo fuente: "Line breaks example"

Evidentemente, si escribís en XHTML en lugar de HTML, el elemento debería ser autocerrado, así:
<br />.

21.10. Líneas horizontales

Algunos dicen que éste es un efecto inherentemente no semántico y puramente visual y de presentación, pero de hecho hay precedentes en la literatura que justifican la existencia de un elemento así. En un capítulo (que se podría describir como una sección de un libro) en ocasiones aparece una línea horizontal entre escenas que tienen lugar en tiempos y/o lugares diferentes. En la poesía también se utilizan algunas separaciones decorativas para delimitar las diferentes estrofas del poema.

Ninguno de estos usos justificaría la existencia de un elemento de encabezamiento nuevo, que es la manera aceptada de marcar los límites entre secciones de un documento.

El elemento hr no tiene ningún atributo y su estilo se deberá definir con el CSS en caso de que el aspecto por defecto no sea satisfactorio.

También, igual que en el salto de línea, si escribís en XHTML y no en HTML deberéis utilizar la forma autocerrada: <hr />.

21.11. Cambios en los documentos (insertar y suprimir)

Si se han introducido cambios en un documento desde la primera vez que estuvo disponible, podéis marcar estos cambios para que las personas que lo vuelvan a leer o los procesos automatizados puedan saber qué se ha cambiado y cuándo.

Estos dos elementos pueden tener dos atributos que aportan más significado a las ediciones.

Si la razón del cambio se explica en la página o en algún otro lugar de la web, deberíais crear un enlace hacia este documento o fragmento del atributo de cita. Lo que estamos diciendo en realidad es que "Este cambio se ha hecho por la razón siguiente".

También podéis indicar la hora en la que se realizó el cambio con el atributo datetime. El valor debería ser una marca horaria conforme al estándar ISO, que normalmente tiene la forma "AAAA-MM-DD HH:MM:SS ±HH:MM" (encontraréis más información sobre esto en la Wikipedia).

Un ejemplo que utiliza los dos atributos:

<p>We should only solve problems that actually arise. As
 <cite><del datetime="2008-03-25 18:26:55 Z"
 cite="/changes.html#revision-4">Donald Knuth</del><ins
 datetime="2008-03-25 18:26:55 Z"
 cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
 said: <q>premature optimization is the root of all 
 evil</q>.</p>

Archivo fuente: "Inserting and deleting example"

Resum

En este apartado hemos explicado algunos de los elementos semánticos del HTML menos conocidos y que menos se utilizan. En el apartado siguiente seguiremos examinando el uso correcto de dos elementos semánticos de HTML semánticamente neutros: div y span.