5 Elementos HTML que Quizás No Sepas Utilizar

Familiar pero desconocida, o completamente nueva, ocurre que pasamos por alto partes de la sintaxis HTML que podrían resultar ser conocimientos importantes a los que podemos dar un buen uso. Por eso, tanto si se trata de las nuevas características de HTML como de sus aplicaciones menos conocidas que aún no han entrado en tu radar, las cubrimos con bastante frecuencia en este sitio.

En el post de hoy, analizaremos cinco elementos HTML, algunos de los cuales puedes utilizar con frecuencia, pero probablemente no en todo su potencial.

<data>

El elemento <data> tiene una función similar a la de los atributos data-*. Puede utilizarse para proporcionar datos legibles por máquina para un contenido fácil de usar. El atributo value de este elemento lleva la información añadida.

<p>Los tres volúmenes de la novela de El Señor de los Anillos son:
  <data value='0-345-24032-4'>"La Comunidad del Anillo" (The Fellowship of the Ring)</data>,
  <data value='0-345-23510-X'>"Las Dos Torres" (The Two Towers)</data>, y
  <data value='0-345-24034-0'>"El Retorno del Rey" (The Return of the King)</data>.</p>
<p><i>ISBN de los libros mencionados en esta página:</i>
    <span id='ISBNListBlank'></span></p>

En el HTML anterior, el ISBN de cada libro se añade en el atributo value del elemento <data> que encierra el título del libro. En el mercado del libro, el ISBN se utiliza para identificar un libro de forma única.

const ISBNListBlank = document.querySelector('#ISBNListBlank');
const dataElements = document.querySelectorAll('data');
const ary = [];
dataElements.forEach((dataElement) => ary.push(dataElement.textContent + ' : ' + dataElement.getAttribute('value')));
ISBNListBlank.textContent = ary.join(', ');

Para mostrar a grandes rasgos cómo extraer los valores <data> en JavaScript, el script anterior extrae los ISBN de la etiqueta <data> y los muestra, junto con los títulos de los libros, en un lugar designado de la página.

<label>

Lo más probable es que ya estés familiarizado con el elemento <label>, sin embargo no es sólo para casillas de verificación. También puede controlar otros elementos etiquetables, realizando sus acciones de la misma forma que realiza las acciones de las casillas de verificación.

Sólo tienes que utilizar el mismo valor para el atributo id del elemento HTML que deseas controlar y el atributo for de la etiqueta <label> perteneciente.

<label for='alertBtn'>
  Al hacer clic en este texto, se activa el botón de abajo.
</label><br>
<button id='alertBtn' onclick="javascript:alert('Hola')">
  ALERTA
</button>

Al hacer clic en el texto de <label> se activará el evento de clic de <button> y se mostrará el mensaje de alerta dado.

<ruby>

Este elemento se utiliza sobre todo para las lenguas de Asia Oriental, pero no es el único caso. El propósito de <ruby> es simplemente añadir anotaciones o pronunciación a los textos, y esto también se puede hacer con contenidos en inglés.

El elemento incluye dos subelementos principales: <rb> y <rt>. La etiqueta <rb> contiene el texto que deseas anotar (llamado texto base) y <rt> contiene la anotación propiamente dicha.

<p>Una persona que crea una o varias empresas, asumiendo riesgos
con la esperanza de obtener beneficios, se denomina <ruby><rb>entrepreneur</rb><rt>ˌäntrəprəˈnər</rt></ruby>; un promotor en la industria del entretenimiento.</p>

Es importante tener en cuenta que la etiqueta <ruby> no es una etiqueta comúnmente utilizada para anotaciones en inglés, ya que su uso está más asociado con caracteres chinos y japoneses. En inglés, es más común proporcionar la pronunciación entre paréntesis o mediante transcripciones fonéticas. Sin embargo, si deseas usar la etiqueta <ruby> para anotar pronunciaciones en otros idiomas, es posible hacerlo como se muestra en este ejemplo.

<ol>

El elemento <ol> para listas ordenadas es otro elemento con el que puedes estar familiarizado. Crea una lista que tiene elementos numerados, a diferencia de una lista desordenada creada con ul>.

Es posible que conozcas el orden, pero ¿sabías que el orden puede invertirse? En lugar de un orden creciente, la numeración decreciente también se puede realizar mediante <ol>, utilizando el atributo reversed.

<ol reversed type=I>
  <li>Scrabble</li>
  <li>Mahjong</li>
  <li>Monopoly</li>
  <li>Ajedrez</li>
  <li>Jenga</li>
</ol>

El atributo reversed invierte la numeración, mientras que el atributo type determina el tipo de numeración. La I mayúscula denota numeración romana mayúscula.

Así es como se ve en la pantalla:

1. Scrabble
2. Mahjong
3. Monopoly
4. Ajedrez
5. Jenga

<dfn>

El elemento <dfn> está pensado para envolver un término definido por el texto que lo rodea. El texto encerrado por la etiqueta <dfn> es estilizado por los navegadores con cursiva, lo que significa que éste es el término que se está definiendo.

Puedes añadir la definición del término dentro de <dfn> en el valor de su atributo title, lo que resulta útil para definir palabras que no están necesariamente definidas por el texto que las rodea.

El elemento <dfn> funciona de forma similar a <abbr>, que muestra el significado de una abreviatura dada en su atributo title cuando el usuario pasa el ratón por encima del elemento.

<p>Existe una 
<dfn title='una división o contraste entre dos cosas
que están o están representadas como opuestas o completamente diferentes'>
  dicotomía</dfn> entre el diseño y el prototipo.</p>

Este es el estilo por defecto del navegador, sin embargo, en un sitio de producción, es posible que desees utilizar un estilo diferente:

Al situar el cursor sobre la palabra definida, la página mostrará la definición añadida en el atributo title.