() translation by (you can also view the original English article)
Hoy en día se espera que los desarrolladores web conozcan y trabajen con múltiples lenguajes. Como resultado aprender todo lo que un lenguaje de programación tiene que ofrecer se convierte en algo complicado y es muy habitual no usar todo el potencial de algunas etiquetas más especializadas pero muy útiles.
Desafortunadamente no nos habíamos topado con todo el potencial de estas etiquetas HTML menos conocidas hasta ahora. Pero nunca es demasiado tarde para volver al terreno de juego y empezar a escribir código que emplee algunas de estas infrautilizadas etiquetas.
Aquí tienes diez de las etiquetas HTML menos usadas y frecuentemente incomprendidas. Aunque es posible que sean menos conocidas, siguen siendo de mucha utilidad bajo ciertas circunstancias.
1. <cite>
Todos nosotros estamos familiarizados con la etiqueta <blockquote>, ¿pero conocías a su hermana menor <cita>? <cite> te permite definir el texto situado dentro del elemento como referencia. Normalmente el navegador mostrará en itálica el texto dentro de la etiqueta, pero esto se puede cambiar un poco de CSS.
La etiqueta <cite> es realmente útil para mencionar bibliografías y hacer referencias de otros sitios web. Aquí tienes un ejemplo de cómo usar la etiqueta cita en un párrafo:
El libro de David Allen sobre la innovación en la organización de tares Getting Things Done ha provocado una tormenta en la web.
2. <outgroup>
La etiqueta <outgroup> es una forma genial de agregar un poco de información extra entre los grupos de opciones de de un cajetín de selección. Si necesitases por ejemplo agrupar un listado de películas por fecha, lo harías así:
1 |
|
2 |
<label for="showtimes">Showtimes</label> |
3 |
<select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select> |
Muestra:
Esto permite a la lista seleccionada separarse visualmente del resto de películas listadas.
3. <acronym>
La etiqueta <acronym> es una forma de definir o ampliar la explicación relativa a un grupo de palabras. Cuando te sitúas el cursor sobre el texto que tiene asignada la etiqueta <acronym>, aparecerá debajo una caja con el texto de la pequeña etiqueta. Por ejemplo:
1 |
|
2 |
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes. |
Muestra en vivo:
El SEO es absolutamente mágico y delicado.
4. <address>
La etiqueta <address> es una pequeña etiqueta bastante desconocida, pero eso no quiere decir que no sea útil. Como su nombre indica, te permite añadir HTML semántico a tu dirección y datos postales. Esta sutil etiqueta además convertirá en letra cursiva todo el texto que se encuentre en el interior de dicha etiqueta, aunque mediante simple CSS puedes cambiar este estilo fácilmente.
1 |
<address>Glen Stansberry
|
2 |
1234 Web Dev Lane |
3 |
Anywhere, USA |
4 |
</address>
|
5. <ins> y <del>
Si estás esperando mostrar la edición de revisiones mediante código, <ins> y <del> son la solución. Como su nombre implica, <ins> destaca las adiciones al documento mediante un subrayado, y <del> muestra aquello que ha sido eliminado mostrando el texto tachado con una línea.
1 |
|
2 |
John <del>likes</del> <ins>LOVES</ins> his new iPod. |
Muestra en vivo:
A John le gusta AMA su nuevo iPod.
6. <label>
Los elementos de los formularios son los más fáciles de olvidar cuando creamos código en un documento. Y de entre los elementos de formulario, uno de los más olvidados es la etiqueta <label>. No se trata solo de una forma rápida de denotar que es una etiqueta para un texto concreto, la etiqueta <label> también puede enviar un atributo "for" para especificar a que qué elemento se le asigna dicha etiqueta. Y no son solo geniales a la hora de aplicar los estilos, también te permiten hacer clicable la leyenda del elemento asociado.
1 |
|
2 |
<label for="username">Username</label> |
3 |
<input id="username" type="text" /> |
7. <fieldset>
Fieldset es un ingenioso pequeño atributo que puedes añadir a tus formularios para agrupar sus elementos de forma lógica. Una vez aplicada la etiqueta <fieldset>, ésta dibuja un rectángulo alrededor de los elementos integrados en ella. Otra útilidad de la etiqueta <label> es definir un título para un grupo de elementos dentro de la etiqueta <fieldset>.
1 |
|
2 |
<form><fieldset>
|
3 |
<legend>Are You Smarter Than a 5th Grader?</legend> |
4 |
Yes <input name="yes" type="radio" value="yes" /> |
5 |
|
6 |
No <input name="no" type="radio" value="no" /> |
7 |
</fieldset>
|
8 |
</form>
|
Muestra en Vivo
8. <abbr>
La etiqueta <abbr> es bastante parecida a la etiqueta <acronym>, excepto que la primera solo se usa para definir palabras abreviadas. Al igual que <acronym>, defines un título dentro de la etiqueta. Cuando un visitante sitúa el cursor sobre el texto abreviado, la definición ampliada emerge por debajo. La etiqueta rara vez se usa, pero son muchos los beneficios para los lectores de pantallas, los correctores ortográficos y los motores de búsqueda.
1 |
|
2 |
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album. |
Muestra en Vivo
Stg. Pepper's Lonely Hearts Club es mi album favorito. Pepper's Lonely Hearts Club es mi album favorito.
9. rel
Rel puede ser un atributo enfermizamente útil, ya que puede aplicarse a cualquier elemento HTML. Es útil para enviar variables extra que no se podrían especificar de otro modo. Es muy útil cuando usas Javascript con tu HTML. Si tienes un enlace que quieres editar "inline", podrías añadir:
1 |
|
2 |
<a rel="clickable" href="page.html">This link is editable</a> |
Javascript podría buscar un enlace con el atributo rel "clicable", y sabría como aplicarle algo de Ajax y permitirle editarlo en línea. Esta una de las muchas técnicas que podrías usar con el atributo el, las posibilidades son interminables.
. <wbr>
La etiqueta <wbr> es increíblemente opaca. Para ser honestos, dudo que muchos de vosotros hayáis entrado en contacto con ella, ya que prácticamente nunca se usa. (En verdad, no la había visto hasta que no comencé a investigar para crear este artículo.) En esencia, la etiqueta te permite especificar una ubicación preferente para un salto de línea, pero éste solo se produciría en caso necesario. La etiqueta es única ya que la inserción del salto de línea depende de la interpretación que de ella haga cada navegador. Es perfecta para crear maquetaciones de página en las que desees evitar las barras de desplazamiento horizontales.
Si quieres conseguir el mismo efecto son el uso de la etiqueta <wbr>, también podrías usar o . Falta advertir que ninguna de estas etiquetas está admitida por la totalidad de los navegadores. Para comprobar que navegadores admiten las etiquetas, revisa este artículo de Quirksmode.
1 |
|
2 |
<span>How do you say Supercalifragilistic<wbr>expialidocious?</span> |
