Logo de Mosaic
El texto central de HTML
Elementos semánticos menos conocidos

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.

Nota

Después de cada ejemplo de código hay un enlace "Archivo fuente", que, al hacer clic en él, os llevará a la visualización del resultado de este código fuente en un archivo diferente; de esta manera, podréis ver ejemplos reales de cómo aparece realmente este código fuente en el navegador, aparte del código en sí.

Los contenidos de este apartado son los siguientes:

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.

El significado real de address es ofrecer información de contacto correspondiente al article que lo contiene. En el caso en que no esté contenido en ningún article, debe interpretarse como la información de contacto de la página. Esta información puede ser un nombre, una dirección electrónica, una dirección postal o un enlace a otra página con más información de contacto.

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

El elemento code se utiliza para indicar el código informático o los lenguajes de programación, como PHP, JavaScript, CSS, XML y otros. En el caso de muestras cortas dentro de una frase, simplemente debéis rodear el elemento con el elemento code, como por ejemplo:

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

Archivo fuente: "First code example"

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.

Ved también

Podéis ver el apartado 15 de este módulo.

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

Los dos elementos samp y kbd se pueden utilizar para indicar la entrada y la salida de la interacción con un programa informático.

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

El elemento var se utiliza para indicar variables en el contenido textual. Esto puede incluir expresiones matemáticas algebraicas o dentro del código de programación.

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

El elemento cite (cita) representa el título de una obra. cite no debe usarse para referenciar nombres de persona.

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 elemento abbr se utiliza para indicar dónde hay abreviaturas y ofrece un método para desarrollarlas sin interrumpir innecesariamente el flujo del documento.

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"

Ved también

Daremos más detalles sobre los estilos de texto en el apartado 29 del módulo "CSS".

21.7. Instancias definidoras

Existe cierta confusión sobre el uso adecuado de dfn, que se describe en la especificación HTML como "la instancia definidora del término incluido". Este concepto es muy parecido a la idea del elemento dt (término de definición) utilizado en las listas de definiciones.

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

Para etiquetar una parte de un texto como superíndice o subíndice (ligeramente por encima o por debajo del resto del texto) hay que utilizar los elementos sup y sub.

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.

Con el elemento br es posible introducir un salto de línea en el documento. No obstante, sólo se debería utilizar para forzar saltos de línea en los lugares en los que sea estrictamente necesario, y nunca para aplicar más espaciado vertical entre párrafos o similares en un documento; eso se debería hacer con CSS.

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

Las líneas horizontales se crean en HTML con el elemento hr. Este elemento inserta una línea en el documento que representa un límite entre secciones diferentes.

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.

El texto nuevo (inserciones) se debe poner dentro del elemento ins. El texto que se ha eliminado (supresiones) se debe poner dentro del elemento del. Si en un punto concreto del documento se ha hecho una supresión y una inserción, la manera correcta de proceder es poner primero el texto suprimido y después el texto insertado.

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.

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :