Muchas veces nos encontramos con que queremos hacer un modal, un popover, un acordion, o una busqueda con autocompletado, y como muchas veces despreciamos el poder de HTML, nos vamos directo a usar JavaScript, pero en este post te voy a mostrar 5 elementos de HTML que te pueden ayudar a resolver estos problemas.

1. <details>

La etiqueta <details> se utiliza para crear un elemento de detalles que puede contener información oculta que el usuario puede mostrar u ocultar. Es utilizado para crear secciones desplegables como un acordeón.

Te muestro un ejemplo básico sobre como usarlo:

<details>
	<summary>Click para ver más detalles</summary>
	<p>
		Aquí puedes colocar información adicional que estará oculta inicialmente.
	</p>
</details>

En el ejemplo, <summary> es el texto que se muestra inicialmente, y cuando el usuario hace clic, se muestra el contenido dentro de <p>.

Este es el resultado:

2. <meter> y <progress>

Aunque estos dos elementos son muy similares, tienen pequeñas diferencias. Ambos se utilizan para mostrar el progreso de algo. <meter> se utiliza para mostrar el progreso de un valor numérico, mientras que <progress> se utiliza para mostrar el progreso de una tarea.

<meter value="0.6">60%</meter>

<progress value="0.6">60%</progress>

3. <dialog>

La etiqueta <dialog> se utiliza para crear un cuadro de diálogo o una ventana emergente. Este elemento se superpone de todos los demas por lo que el usuario no puede interactuar con la página mientras el cuadro de diálogo está abierto.

<dialog>
	<p>Este es un cuadro de diálogo</p>
</dialog>

Para mostrar el cuadro de diálogo, debes usar el método showModal() en JavaScript.

Aca te dejo un ejemplo de como usarlo:

<dialog>
	<p>Este es un cuadro de diálogo</p>
	<button id="cerrar-dialogo">Cerrar Diálogo</button>
</dialog>

<button id="abrir-dialogo">Abrir Diálogo</button>

<script>
	const dialogo = document.querySelector('dialog')
	const abrirBoton = document.getElementById('abrir-dialogo')
	const cerrarBoton = document.getElementById('cerrar-dialogo')

	abrirBoton.addEventListener('click', () => {
		dialogo.showModal()
	})

	cerrarBoton.addEventListener('click', () => {
		dialogo.close()
	})
</script>

Este es el resultado:

Abrir Diálogo

4. popover

Es similar a la etiqueta <dialog>, pero este deja al usuario interactuar con la página mientras el cuadro de diálogo está abierto.

<button popovertarget="info-popover" popovertargetaction="show">
	Abrir popover
</button>

<article id="info-popover" popover="auto">
	<h2>Este es un popover personalizado</h2>
	<p>Aquí puedes agregar tu contenido personalizado.</p>
	<button popovertarget="info-popover" popovertargetaction="hide">Close</button>
</article>

En este caso, se utiliza el atributo popovertarget para definir el nombre del popover, y el atributo popovertargetaction para definir la acción que se realizará.

Este es el resultado:

5. <datalist>

El elemento <datalist> se utiliza para crear una lista de opciones para un elemento <input>. Es similar a un <select> pero con la diferencia de que el usuario puede escribir cualquier valor en el campo de entrada.

<label for="programming-language"
	>Selecciona un lenguaje de programación:</label
>
<input
	list="programming-languages"
	id="programming-language"
	name="programming-language"
/>

<datalist id="programming-languages">
	<option value="JavaScript"></option>
	<option value="Python"></option>
	<option value="Java"></option>
	<option value="C++"></option>
	<option value="Ruby"></option>
</datalist>

Este es el resultado: