Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Meter</title>
</head>
<body>
<header>
<h1>Etiqueta meter</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Barra de progreso con Meter</h1>
<h2>practica</h2>
</hgroup>
<p>barra de progreso</p>
<meter value="5" max="10" min="0">no soporto la etiqueta meter</meter>
</article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
Dentro del parrafo "p" ponemos texto indicando que es una barra de progreso.
Con la etiqueta meter le decimos al navegador que muestre la barra de progreso, en este caso le hemos puesto un valor = 5, con un maximo de 10 y un minimo de 0, podeis cambiar los valores por practicar y ver como queda. En caso de que el navegador no soporte esta etiqueta, lo mostrara imprimendo el texto indicando que no soporta dicha etiqueta.
Una de las utilidades de esta etiqueta es mostrar el progreso por ejemplo en la realizacion de un curso, con php es sencillo ir modificando el valor de dicha etiqueta en su momento de ejecucion segun los valores que se le indiquen desde el codigo.
