Repasamos una lista de elementos o etiquetas HTML que no son muy conocidas y te resultarían muy útiles en el día a día para trabajar en tu página web. No queremos enredar con el lenguaje de programación, sino presentarte aquellos recursos que podrían aportar algo más de semántica al contenido y facilitar la vida a los buscadores, a la vez de mejorar la accesibilidad de las páginas.
Elementos fieldset y legend
Estos dos elementos sirven para crear bloques de campos de formulario, con los que conseguir mejorar el aspecto y la experiencia de usuario, útiles sobre todo en aquellos formularios que incluyen un alto número de campos.
Concretamente, el tag fieldset crea un bloque de formulario mientras que legend permite aplicar un título a ese bloque. Podemos ver un ejemplo a continuación.
<fieldset>
<legend>Datos personales</legend>
<p>
<label for="name">Nombre:</label>
<input type="text" name="name" id="name">
</l>
<p>
<label for="surname">Apellidos:<span>
<input type="text" name="surname" id="surname">
</p>
</fieldset>
Etiquetas figure y figcaption
Estas etiquetas apenas se usan pero sirven de manera excelente para hacer algo tan típico como agregar una leyenda visible a una figura. La figura puede ser cualquier cosa, como una tabla o una imagen. La leyenda es el texto que acompaña y que sirve para describir el sentido o utilidad para la que se incluye la figura.
Un ejemplo de código HTML de uso lo podemos ver a continuación:
<figure>
<img src="https://picsum.photos/300/200" alt="Lorem ipsum image">
<figcaption>Lorem ipsum caption</figcaption>
</figure>
Etiqueta mark
Quizás hayas querido más de una vez resaltar una parte del texto de un párrafo. Para ello acabamos usando etiquetas <span> que no aportan ninguna semántica al documento, sobre las que aplicamos CSS para conseguir el efecto deseado.
Pocos conocen la etiqueta <mark> que lo soluciona de una manera rápida y sencilla. Si no nos gusta el amarillo del resaltado (o el color que cada navegador pueda usar) podemos cambiar por supuesto el estilo con CSS. En cualquier caso, estaremos aportando algo más de valor a las partes destacadas.
<p> Lorem ipsum dolor <mark>sit amet</mark>, consectetur adipisicing elit. Id ut nulla accusantium <mark>officia repudiandae ab illo consequuntur</mark>, enim excepturi eos ullam, a quasi ad, error voluptate qui suscipit commodi. Illum!</p>
Etiqueta abbr
Cuando usamos acrónimos es muy útil apoyarnos en la etiqueta <abbr> ya que nos permite indicar al navegador y los lectores que esa palabra consiste en una abreviación.
Pero además, si añadimos el atributo title a la etiqueta <abbr> conseguiremos que, al pasar el ratón por encima del texto, aparezca un tooltip con el contenido incluido en el atributo.
<p>
Dentro de los <abbr title="Content Management System">CMS</abbr> WordPress es el más extendido.
</p>
Otras etiquetas HTML poco usadas que quizás deberías tener en cuenta
Ya para finalizar os dejamos aquí otra serie de etiquetas HTML poco usadas que puede que conozcas actualmente pero que quizás has dejado olvidadas en el tintero. Si no las conoces puedes consultar rápidamente su sintaxis y usos en Internet.
- <area>: quizás hayas oído hablar de los mapas de imágenes. Aunque pasaron algo de moda siguen siendo bastante útiles. Sirven para definir partes de una imagen que deben tener enlaces a distintas URL.
- <sup> y <sub>: para crear subíndices y superíndices en un texto cualquiera.
- <dl>, <dd> y <dt>: las denominadas listas de definición que permiten crear una colección de términos con sus definiciones.
- <progress>: que nos permite mostrar una barra de progreso, sin necesidad de aplicar plugins o componentes personalizados.
- <details>: otro elemento que crea una interfaz para la que generalmente acabamos usando plugins o custom elements y que realmente el propio navegador puede implementar de manera nativa. Nos permite crear un campo desplegable con detalles.
- <bdo>: para definir la dirección del texto, normalmente de izquierda a derecha, pero en otros idiomas y culturas se escribe de derecha a izquierda.
Esperamos que estas sugerencias y te sirvan para mejorar tu conocimiento del lenguaje HTML y a mejorar las funcionalidades de tus páginas web.