La máxima “Nunca se para de aprender” sirve también para las etiquetas HTML. A pesar de la flexibilidad de CSS deberíamos utilizar todas las etiquetas o tags (X)HTML a nuestra disposición para crear un código semántico, siempre y cuando sean estándar y compatibles con todos los navegadores.

El número de tags es finito y por eso creemos conocerlas todas, pero es que hay algunas que ni siquiera aparecen en los listados de referencia más habituales (1, 2) o en editores como Dreamweaver.

Recientemente se han publicado dos artículos sobre etiquetas (X)HTML “desconocidas” o poco habituales:

1. 5 obscure HTML tags that you should know and even use [en] – Ricardo Oliveira lo ha traducido a español.
2. 10 Rare HTML Tags You Really Should Know

Las etiquetas en cuestión son estas 14:

1. <cite>
2. <optgroup>
3. <acronym>
4. <address>
5. <ins>
6. <del>
7. <label>
8. <fieldset>
9. <abbr>
10. <rel>
11. <wbr>
12. <q>
13. <legend>
14. <bdo>

Debo reconocer que a pesar de que hago mis deberes hay 2 que desconocía. Me he quedado más tranquilo cuando he comprobado que no son compatibles en todos los navegadores.

Mis dos grandes desconocidas

<q>

Hace que el explorador entrecomille un texto. Todos los navegadores la soportan a excepción de versiones de IE anteriores a IE8

Ejemplo

&lt;q&gt; de <q>quote</q>, de cita

Resultado:

<q> de quote, de cita

 

<wbr>

Esta es la etiqueta que titula el artículo. No hace mucho que escribí un artículo titulado 9 formas de separar por sílabas textos web y debía de haber al menos mencionado esta etiqueta, <wbr> de “word break” o más bien “word wrap” ya que lo que hace es un “Ajuste de línea condicional”.

Si un texto es demasiado largo y hemos insertado esta etiqueta el navegador romperá la línea si lo considera necesario y añadirá un salto de línea, evitando el incómodo scroll horizontal. Puede sernos útil para la partición o separación por sílabas pero recordemos que no añadirá ningún guión de separación.

Ejemplo

Dependiendo de la resolución de tu monitor verás el siguiente texto como una sola línea o dos líneas, estrecha el ancho de la ventana de tu navegador y verás cómo se va rompiendo la línea en los sitios que hemos insertado la etiqueta <wbr>:

Pluriblanduzcosplusgrandifecho<wbr>entrifugadlPluriblanduzcosplusgrandifechocentrifugadlo<wbr>smurciélagoPluriblanduzcosplusgrandifecho<wbr>centrifugadlosmurciélagoPluriblanduzcosplusgrandifecho<wbr>centrifugadlosmurciélagoélago

Resultado:

PluriblanduzcosplusgrandifechocentrifugadlosmurciélagoPluriblanduzcosplusgrandifechocentrifugadlosmurciélagoPluriblanduzcosplusgrandifechocentrifugadlosmurciélago

* Las palabras del ejemplo son palabras largas donde ninguna letra se repite.

Peter-Paul Koch, autor de estas famosas tabla de compatibilidad explica que precisamente hace uso de <wbr> para crearlas.

Como ves la etiqueta <wbr> está soportada por IE, Firefox, Safari 4.0+ pero no soportado en Opera. Lo he testeado en Opera 9.6.4 bajo XP.

Hay dos soluciones a través de CSS para Opera pero que haría que no pudiésemos tampoco validar el CSS:

1.- Con la propiedad display y el valor inline-block:

wbr {

display: inline-block;

}

2.- Añadiendo mediante la propiedad content la entidad HTML  ​

wbr:after { content: "\00200B"; }

Así que después del descubrimiento me sigo quedando con las alternativas, estas dos entidades HTML: ​ y ­

La diferencia es si queremos que se inserte un guión de separación ( ­ ) o no ( ​ ).