HTML5: Más semántico, más funcional. Parte 2


Hoy estaremos viendo otras de las nuevas etiquetas incluidas en HTML5, también estaremos viendo algunas etiquetas básicas utilizadas para el trabajo con texto (algunas de estas etiquetas son heredadas de versiones anteriores de HTML) y algunas de las etiquetas que han quedado en desuso pues la operación que se realizaba con ellas ahora puede hacerse utilizando las bondades de CSS3.

Aspectos importantes

Las nuevas etiquetas incluidas por HTML5 funcionan de forma similar a los div y span, pero con estas se mejora la estructura y la semántica, además se elimina la cantidad de etiquetas div que a veces utilizamos de forma abusiva en nuestros sitios web, y con ello le hacemos la vida más fácil a todo aquel que deba leer nuestro código, a nosotros mismos a la hora de dar mantenimiento o corregir algún error o a los navegadores que tendrán menos etiquetas que procesar.

Pasemos ahora a revisar algunas de las nuevas etiquetas de HTML5 que no vimos en los artículos anteriores sobre el tema.

Figure

Esta etiqueta es utilizada para crear una sección que contendrá imágenes, diagramas, ilustraciones, fotos o ejemplos de código, puede ser utilizada además para colocar multimedia en la web, ejemplo de esto, videos.

En su interior podemos colocar varios de estos elementos. Su importancia radica en la semántica que adiciona a nuestras páginas, indicando al navegador qué tipo de contenido encontrará en su interior. A menudo es utilizada de conjunto con la etiqueta figcaption, que se encarga de proporcionar una leyenda o descripción de los contenidos que alberga la etiqueta figure. Puede ser utilizada sola una vez en cada etiqueta figure y puede aparecer antes o después del o los elementos que incluyamos en esta etiqueta. A continuación te muestro un ejemplo de su uso:

<figure>
	<img src="imagen1.png" alt="Imagen 1">
	<img src="imagen2.png" alt="Imagen 2">
	<figcaption>Algunas imágenes</figcaption>
</figure>
Visualización de la etiqueta figure de HTML5 en el navegador

Fig1: Visualización de la etiqueta figure de HTML5 en el navegador

Mark

Generalmente cuando queremos que algunas palabras clave dentro de un texto sean luego fáciles de encontrar las subrayamos con un marcador, bueno pues la etiqueta mark nos permite hacer lo mismo en nuestras páginas web, resalta con un fondo de color amarillo las palabras que queramos. El color de fondo se puede cambiar fácilmente utilizando CSS, a través de la propiedad background-color. A continuación te muestro como utilizar esta etiqueta:

<div style="height:200px; width:400px">
	<p>
		En la ficha <mark>Insertar</mark> incluyen elementos diseñados para crear una bella <mark style="background-color:red; color:white">portada</mark>. Puedes utilizar <mark>encabezados</mark>, pies de páginas y listas.
	</p>
</div>
Visualización de la etiqueta mark en el navegador

Fig2: Visualización de la etiqueta mark en el navegador

Progress

Esta etiqueta muestra el progreso de cierto trabajo o tarea que estemos realizando en nuestro sitio web, generalmente es utilizado para visualizar el porciento de descarga o subida de archivos.

Tiene un atributo max que define el máximo valor que tomará la barra de progreso (si se omite este valor será 1) y un atributo value que representa la parte completada de la tarea en cuestión.

Por defecto la barra de progreso se orienta en sentido horizontal, pero esto se puede cambiar con la propiedad -moz-orient de CSS, indicando el valor vertical.

Con la utilización de JavaScript podemos hacer que la barra aumente su valor paulatinamente, a continuación te muestro una forma de hacerlo, y de paso observas cómo utilizar la etiqueta:

	
<progress id="progress" value="0" max="100"></progress> <span></span>

<script>
var i = 0;
var id_value = setInterval(function() {
	i++;
	if (i>100) {
		clearInterval(id_value);
	}
	else{
		progress.value++;
		document.querySelector("progress + span").innerHTML = i + "&";
	}
}, 100);	
</script>
Etiqueta progress en ejecución

Fig3: Etiqueta progress en ejecución

Output

Esta etiqueta es introducida con el fin de ayudarnos con las operaciones matemáticas en los formularios, operaciones que anteriormente debíamos realizar con JavaScript o con código en el servidor. Su utilización es bastante sencilla, debajo te dejo un ejemplo:

<form oninput="resultado.value = parseInt(a.value) + parseInt(b.value)">
	<input type="number" name="a" value="0"> +
	<input type="number" name="b" value="0"> =
	<output type="number" name="resultado" for="a b"></output>
</form>

Observa que los input los definimos de tipo number, para que solo acepten valores numéricos. En el formulario el evento oninput toma los valores de los dos input y muestra la suma de estos en el output. En el navegador el código anterior se visualiza así:

 Etiqueta output

Fig4: Etiqueta output

Texto

El mayor porciento del contenido de nuestras páginas web está formado por texto, por tal motivo es de vital importancia conocer las etiquetas básicas que se utilizan en el trabajo con este.

Algunas de estas etiquetas son la etiqueta p, utilizada para definir párrafos, la etiqueta b y strong por si queremos resaltar algún texto en negrita, la etiqueta i y em para los textos en cursiva, las etiquetas ins y del para el subrayado y tachado respectivamente de los textos, no dejar de mencionar las etiquetas utilizadas para crear encabezados, estas van de h1 hasta h6, disminuyendo el tamaño de fuente a medida que aumenta el número que acompaña a la h. Veamos a continuación un ejemplo con las etiquetas mencionadas anteriormente:

<div style="height:200px; width:400px">
	<h3>Etiquetas para el trabajo con texto</h3>
	<p>
		En la ficha <b><i>Insertar</i></b> incluyen elementos diseñados para crear una bella <ins>portada</ins>. Puedes utilizar <del>encabezados</del>, pies de páginas y listas.
	</p>
</div>
Etiquetas útiles para el trabajo con texto

Fig5: Etiquetas útiles para el trabajo con texto

Etiquetas en desuso

Con la llegada de HTML5 quedan en desuso un grupo de etiquetas, dado a que sus funciones se pueden realizar con CSS o con otras etiquetas, una de estas etiquetas es tt, que se utilizaba para darle un espacio a todas las palabras de la oración donde se estuviese utilizando.

Otra de las etiquetas que quedó en desuso fue la etiqueta u, esta etiqueta se usaba para subrayar una palabra o texto según donde se colocara dicha etiqueta. Para el trabajo con palabras grandes se utilizaba la etiqueta big, esta podía utilizarse doble para darle un mayor tamaño a las palabras sin necesidad de utilizar los encabezados. Con el uso en HTML5 de la etiqueta abbr, queda en desuso la etiqueta acronym, que realizaba la misma función.

Conclusiones

En este artículo te ofrecí un poco de información acerca de algunas de las nuevas etiquetas que HTML5 ha incorporado, utilizando para ello ejemplos prácticos, así como algunas etiquetas que se mantienen con el paso de los años para el trabajo con textos y otras que han quedado en desuso con la llegada de la quinta versión de HTML.