Lots of times we find ourselves wanting to make a modal, a popover, an accordion, or a search with autocomplete. Often due to underestimating the capabilities of HTML, we immediately resort to using JavaScript. However in this post I’ll show you 5 HTML elements that can help you solve these problems.

1. <details>

The <details> tag is used to create a details element that can contain hidden information that the user can show or hide. It is used to create dropdown sections like an accordion.

I’ll show you a basic example of how to use it:

<details>
	<summary>Click to see more details</summary>
	<p>
		Here you can place additional information that will be hidden initially.
	</p>
</details>

In this example, summary is the text that is initially displayed, and when the user click, it shows the content inside <p> element.

This is the result:

2. <meter> and <progress>

However these two elements are very similar, they have small differences. Both are used to show the progress of something. <meter> is used to show the progress of a numeric value, while <progress> is used to show the progress of a task.

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

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

3. <dialog>

The <dialog> tag is used to create a dialog box or a popup window. This element is superimposed on all others so that the user cannot interact with the page while the dialog box is open.

<dialog>
	<p>This is a dialog box</p>
</dialog>

To show the dialog box, you must use the showModal() method in JavaScript.

Here I leave you an example of how to use it:

<dialog>
	<p>This is a dialog box</p>
	<button id="cerrar-dialogo">Close dialog</button>
</dialog>

<button id="abrir-dialogo">Open dialog</button>

<script>
	const dialog = document.querySelector('dialog')
	const openDialog = document.getElementById('abrir-dialog')
	const closeDialog = document.getElementById('cerrar-dialog')

	// Abre el cuadro de diálogo cuando se hace clic en "Abrir Diálogo"
	openDialog.addEventListener('click', () => {
		dialog.showModal()
	})

	// Cierra el cuadro de diálogo cuando se hace clic en "Cerrar Diálogo"
	closeDialog.addEventListener('click', () => {
		dialog.close()
	})
</script>

This is the result:

Open Dialog

4. Popover

The popover attribute is used to create a popover. It is similar to the <dialog> tag, but this one allows the user to interact with the page while the dialog box is open.

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

<article id="info-popover" popover="auto">
	<h2>This is a custom popover</h2>
	<p>You can add your custom content here.</p>
	<button popovertarget="info-popover" popovertargetaction="hide">Close</button>
</article>

In this case, the popovertarget attribute is used to define the name of the popover, and the popovertargetaction attribute is used to define the action that will be make.

This is the result:

5. <datalist>

The <datalist> element is used to create a list of options for an <input> element. It is similar to a <select> but with the difference that the user can write any value in the input field.

<label for="programming-language">Select a programming language:</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>

This is the result: