Hay gente que piensa que un desarrollador frontend conoce todas y cada una de las etiquetas HTML que existen y absolutamente toda la funcionalidad disponibles en ellas. Sin embargo, es muy común pasar por alto algunas etiquetas que se crearon más recientemente y que pueden facilitarnos mucho la vida a la hora de maquetar páginas web.
Tristemente hay etiquetas HTML que, además de no ser usadas con frecuencia, están infravaloradas. No obstante, nunca es tarde para empezar a hablar de ellas. Pensando en ello, el día de hoy te traemos algunos elementos HTML que no conoces y que son super útiles.
¿Qué etiquetas HTML son especialmente útiles?
HTML sigue siendo uno de los pilares indispensables del desarrollo web frontend. Sin embargo, la evolución tecnológica del sector ha causado que, en cierto modo, que el lenguaje HTML sea visto como algo viejuno y apolillado.
Pero esto no es para nada real. HTML sigue avanzando con el paso del tiempo de forma increíble. Gracias a ello, hay gran cantidad de elementos HTML que no conoces y que son super útiles. El día de hoy te contamos los más importantes:
1. <cite>
Es posible que te sea más común el elemento <blockquote>, pero hay un elemento asociado a este que se conoce como <cite>. La función de esta etiqueta no es otra que la definición el origen de una cita. Por lo general, el navegador muestra el texto ubicado dentro de este elemento en itálica.
Puedes usar este tipo de elemento de HTML para añadir esta información semántica en tu web, que además te favorecerá de cara al SEO, si necesitas hacer mención a otras páginas web y referencias bibliográficas.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
2. <abbr>
Este definitivamente es uno de los elementos HTML que no conoces y que son super útiles. Con la etiqueta <abbr> se puede usar en la definición de palabras abreviadas.
Cuando usas este elemento y te posicionas con el cursor sobre el texto que decidiste abreviar, la definición se puede leer en un tooltip emergente.
Su utilización es poco usual, pero a nivel de lectura tiene grandes ventajas. Por otra parte, ayuda en la revisión de la ortografía y a posicionar en los motores de búsqueda.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
3. <details>
Este es uno de los elementos HTML que no conoces y que son super útiles más importante que puedes encontrar. Su función principal es mostrar un elemento «resumen»(summary) que al ser clicado revela otro más extenso.
Es bastante funcional y tiene aplicaciones interesantes. Por ejemplo, puedes usarla en la creación de un toggle interactivo para que el usuario pueda abrirlo o cerrarlo según desee. Una ventaja importante de este elemento es que todo tipo de contenido se puede colocar en el interior de la etiqueta.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
4. <dialog>
Aunque no lo creas, esta etiqueta se ha usado desde hace mucho tiempo tanto en documentos web como en algunos programas para escritorio.
La etiqueta <dialog> fue pensada con el objetivo de mostrar un cuadro de diálogo emergente.
Podemos usarlo junto con Javascript para crear una ventana modal, que podrá ser abierta o cerrada alterando su atributo booleano «open».
El uso de este elemento en lugar de un <div> tiene la ventaja de que bloquea el efecto de los clicks que se hagan fuera del diálogo.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
5. <mark>
El elemento <mark> es de gran importancia cuando necesitas resaltar una sección de texto para hacer referencia encontrándote en otro documento. Todo con el objetivo de poder realizar un análisis o explicación.
Esta etiqueta se aplica comúnmente en zonas del texto en las que necesitas centrarte en algún momento o por su importancia en la actividad que estás haciendo en un momento dado. En palabras simples, puedes usar <mark> para destacar frases en una cita.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
6. <meter>
Siguiendo en el conteo de los elementos HTML que no conoces y que son super útiles, tenemos la etiqueta <meter>. Básicamente, este elemento se usa para poder limitar proporciones dentro de una medida conocida.
Se trata de un elemento relativamente nuevo en HTML y es de gran utilidad al momento de mostrar medidas en distintos casos. Algunos ejemplos de su aplicación son: resultados de una encuesta, datos iguales en una consulta, el espacio disponible en un disco, ancho de banda, cantidades de dinero, memoria, etc.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
7. <hr>
La etiqueta <hr> se usa con la intención de mostrar una partición en un texto. Esta división permite que el documento se fragmente en dos secciones con temáticas distintas como dos escenas de una historia, por ejemplo.
En la mayoría de los casos, se suele representar esta etiqueta como una línea en sentido horizontal.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
8. <outgroup>
Sin duda, esta etiqueta no puede faltar en los elementos HTML que no conoces y que son super útiles. El elemento <outgroup> es un modo estupendo para añadir más contenido adicional entre las opciones que brinda un cajetín de selección.
Para entender un poco mejor, es bastante útil si necesitas, por ejemplo, agrupar una lista de películas en orden cronológico. Esto hace posible que la lista de tu preferencia se pueda separar visualmente de las demás películas mostradas, en este caso.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
9. <input>
La etiqueta input es casi todopoderosa. Está pensada para representar un campo de formulario en el cual puedes introducir datos, y puede adaptarse a multitud de tipos de dato distinto.
Buenos ejemplos de esta versatilidad son los campos selectores de fecha que podemos representar con <input type=»date»>
También podemos conseguir un selector de fecha y hora usando <input type=»datetime-local»>
Y, mi favorito, el selector de color <input type=»color»>
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
10. <datalist>
Este, sin duda es uno de los elementos HTML que no conoces y que son super útiles. A pesar de su gran desconocimiento, es importante destacar su funcionalidad.
Haciendo honor a su nombre <datalist> hace posible especificar una serie de opciones predefinidas para rellenar nuestro input.
En la práctica, es como si tuviéramos un <input> con auto-completar.
Ejemplo:
See the Pen Untitled by Diego Castaño (@dowrow) on CodePen.
Cuéntame tu experiencia con estas etiquetas HTML
Estos son tan solo algunos de los elementos HTML que no conoces y que son super útiles. La realidad es que hay gran cantidad de etiquetas desconocidas para muchos en el lenguaje HTML. En cualquier caso, lo más importante es informarse de la función de cada una y sacarles el máximo provecho.
¿Tienes alguna otra etiqueta HTML favorita? Déjala en los comentarios.
