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:
- 5 obscure HTML tags that you should know and even use [en] «“ Ricardo Oliveira lo ha traducido a español.
- 10 Rare HTML Tags You Really Should Know
Las etiquetas en cuestión son estas 14:
- <cite>
- <optgroup>
- <acronym>
- <address>
- <ins>
- <del>
- <label>
- <fieldset>
- <abbr>
- <rel>
- <wbr>
- <q>
- <legend>
- <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
<q> 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:
Pluriblanduzcosplusgrandifechocentrifugadlo
smurciélagoPluriblanduzcosplusgrandifecho centrifugadlosmurciélagoPluriblanduzcosplusgrandifecho centrifugadlosmurcié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 ( ​
).
Excelente articulo, en realiadad me soluciona un problema que tenia desde hace mucho tiempo con el texto seguido no sabia como partirlo y se pasaba del buen aporte