Hablemos de HTML, sí, leiste bien de HTML.
HTML ha ido creciendo y evolucionando junto con nosotros. ¿Alguna vez te ha pasado que ves a una persona que nació allá por los lejanos 2000 y no puedes creer lo mucho que creció y que ya en realidad es mayor de edad?
Bueno, algo así pasa con HTML, era de una forma muy diferente allá en los 2000, pero ahora cuando le volvemos a dar un vistazo a ver qué paso con el viejo y conocido HTML, seguimos viendo esa cara conocida pero con nuevas etiquetas destinadas a hacer quizá nuestra maquetación un poco más sencilla.
Y te estarás preguntando ahora ¿cuáles son esas etiquetas de las que me hablas Alex? Bueno empecemos a revisarlas una por una.
1. Color picker
En HTML la etiqueta input nos ofrece gran variedad de elementos de entrada, entre ellos tenemos un selector de color, el cual muestra una interfaz que permite al usuario seleccionar un color.
El valor del este input del tipo color es una cadena de siete caracteres en la cual se especifica un color RGB en su forma hexadecimal, por lo que los valores de color seleccionados por el usuario son compatibles con CSS.
<input type="color">
Este input puede contener otros atributos como el value para definir un color predeterminado en el selector de color.
<input type="color" value="#00FF00">
2. Progress bar
¿Quieres indicar en tu página el progreso de una tarea? Bueno, HTML ya tiene una etiqueta que te muestra una barra de progreso sin mucha complicación.
Su sintaxis básica es la siguiente, pero se puede jugar con sus atributos para sacarle todo el jugo.
<progress></progress>
Los atributos de la etiqueta progress son value y max, los cuales se usan para definir el valor actual de la barra de progreso y el valor máximo de la misma.
<progress id="progress-bar" max="100" value="30"></progress>
3. Optgroup
Esta etiqueta permite agrupar diferentes opciones de un select, esto permite hacer agrupaciones por temáticas. El nombre de cada grupo se define con el atributo label, esto es lo que usarán los navegadores para mostrar como nombre del grupo.
<select>
<optgroup label="Comida mexicana">
<option>Tacos</option>
<option>Enchiladas</option>
</optgroup>
<optgroup label="Comida colombiana">
<option>Bandeja Paisa</option>
<option>Arepas</option>
</optgroup>
</select>
4. Acronym
La etiqueta acronym sirve para definir un acrónimo, es decir, las siglas de una palabra. Tiene un funcionamiento similar a la etiqueta abbr con la diferencia de que acronym es exclusivamente para acrónimos la anterior es para abreviaciones.
<acronym title="World Wide Web">WWW</acronym>
5. Figure
Figure es una etiqueta que permite agregar una imagen, ilustración o diagrama y a su vez asociarle una descripción o título.
La clave de esta etiqueta es que nos permite asociar cualquier cosa con una descripción, de tal forma que quedan asociados semánticamente, para lograr esto se utiliza en conjunto con figcaption para la descripción.
<figure>
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24">
<figcaption>Banana con fondo rosa.</figcaption>
</figure>
6.Map
Esta etiqueta como su nombre lo indica es un mapa, pero no es cualquier mapa, es un mapa de imagen que se puede utilizar para generar uno o más hipervínculos en una imagen.
En otras palabras, map es una imagen con área en la que se puede hacer clic y trabaja en conjunto con la etiqueta area la cual es la encargada de definir los espacios interactivos de la imagen.
<img class="map" src="https://medplus.co.nz/media/thumbnails/blog/entry/2020/05/15/Green_and_red_800__600_horizontal.png.0x300_q90_crop-smart_upscale.png" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="0,0,350,110" href="https://en.wikipedia.org/wiki/Green">
<area shape="rect" coords="0,110,350,220" href="https://en.wikipedia.org/wiki/Red">
</map>
7. Párrafo editable
La etiqueta de párrafo, mejor conocida como p tiene un atributo llamado contenteditable que permite a cualquier párrafo volverse editable en el navegador.
<p contenteditable="true">Este es un parrafo editable.</p>
8. Tooltip
¿Sabías que el párrafo no es la única etiqueta que tiene atributos que le dan ciertos superpoderes? El span los tiene, en este caso es el de title que crea un tooltip utilizando únicamente HTML.
<span title="Este es un tooltip.">¡Pasa el mouse sobre mí!</span>
9. Noscript
Esta etiqueta permite definir un contenido alternativo que será mostrado en caso de que el usuario tenga deshabilitado los scripts en su navegador o que use un navegador que no admita scripts.
<noscript>
<h2>Sorry, your browser does not support JavaScript!</h2>
</noscript>
10. Source
La última etiqueta es source la cual permite definir diferentes versiones de un archivo multimedia, o sea, audio, video o imágenes. Un elemento multimedia puede contener uno o más elementos source, cada uno con una versión diferente, en el caso de las imágenes, cada source tendrá una imagen en formato diferente o en resolución diferente.
<picture>
<source media="(min-width:650px)" srcset="https://images.unsplash.com/photo-1514848567240-a81cb051807a">
<source media="(min-width:465px)" srcset="https://images.unsplash.com/photo-1618252256389-7c0963af7b8a">
<img src="https://images.unsplash.com/photo-1585742943500-0162472c7bf9" alt="Flowers">
</picture>
En este CodePen podrás encontrar todos los ejemplos mostrados, no dudes en ir a revisarlos y experimentar con ellos.
👋🏻 Concluyendo
HTML ha crecido muchísimo desde su primera aparición en los 80’s, ahora es ese lenguaje de marcado chévere que quiere hacernos la vida más fácil a los desarrolladores incluyendo más funcionalidades en sus etiquetas.
Si conoces más etiquetas que creas que deberían estar en esta lista déjalas en los comentarios y si quieres perfeccionar tus habilidades con HTML te invito a tomar el Curso Definitivo de HTML y CSS con nuestro excelente profesor Diego de Granda.
Curso Definitivo de HTML y CSS
