En la actualidad hay un total de 142 elementos HTML estandarizados por el W3C, excluyendo los que se encuentran en las fases iniciales de estandarización y los que han quedado obsoletos. Dicho esto, es posible pasar por alto u olvidar algunos de ellos que pueden ser útiles cuando se necesitan.

En este artículo, exploraremos 10 cosas verdaderamente interesantes que las etiquetas HTML pueden hacer. Prepárate para sorprenderte con las capacidades versátiles y emocionantes de estas etiquetas y llevar tus proyectos web al siguiente nivel.

Mapas de Imágenes

Los elementos HTML <map> pueden utilizarse para crear mapas de imágenes. Los mapas de imágenes son básicamente imágenes con áreas sobre las que se puede hacer clic, que pueden hiperenlazarse a otra página web o a otras partes del mismo documento. Puedes definir qué áreas de una imagen son clicables simplemente mencionando las correspondientes coordenadas X Y de esos puntos en los elementos <area> anidados dentro de <map>.

Nota

Las áreas clicables no pueden ser estilizadas a través de CSS por lo que, si deseas que esos marcadores sean estilizados, utiliza un simple software de edición de imágenes para dibujar los marcadores.

Consejo

Si quieres saber las coordenadas de un punto en una imagen, abre la imagen en un programa de edición de imágenes y mueve el cursor a ese punto, deberías poder ver las coordenadas del mismo en el propio programa. En el caso de GIMP se muestra a la izquierda de la barra inferior.

See the Pen Untitled by Alex (@htmldesdecero) on CodePen.

Sugerencias de Entrada

Utiliza <datalist> para proporcionar una lista de sugerencias relevantes que aparecen al escribir un valor de entrada.

See the Pen Input suggestions by Alex (@htmldesdecero) on CodePen.

Texto Resaltado

El texto resaltado suele tener un color oscuro con un fondo claro. Puedes conseguir ese efecto de texto resaltado sólo con marcas. Cualquier texto encerrado dentro <mark> de tendrá ese efecto.

Puedes personalizar el color de resaltado con la propiedad CSS background-color de <mark> y el color del texto con la propiedad color.

See the Pen Highlight Text by Alex (@htmldesdecero) on CodePen.

Definir Plantillas

Junto con HTML5 llegó el nuevo elemento <template>. El elemento <template> contiene en su interior marcado que no es renderizado por los navegadores, el marcado encerrado por él debe ser usado para generar contenidos dinámicos en la página usando JavaScript.

Por ejemplo, supongamos que tienes un <table> donde las filas deben ser añadidas dinámicamente, puedes simplemente poner el markup de una fila vacía de esa tabla dentro de la etiqueta <template> y cuando sea necesario llamar a una función JavaScript que contenga script para copiar el markup desde dentro de las etiquetas template y añadirlo al markup de la tabla. Esto no es compatible con IE.

See the Pen Define Templates by Alex (@htmldesdecero) on CodePen.

Letra Pequeña

Por letra pequeña se entiende el texto de un documento que suele imprimirse en tamaño muy pequeño y que contiene información como condiciones, términos, restricciones, citas, derechos legales, etc. La etiqueta <small> de HTML puede utilizarse para mostrar la letra pequeña. A partir de HTML5, la etiqueta <small> no sólo mostrará un texto con estilo de letra pequeña, sino que también lo definirá semánticamente como renuncias legales y advertencias.

See the Pen Fine Print by Alex (@htmldesdecero) on CodePen.

Asignar una URL Base

El elemento <base>HTML es muy útil cuando tienes múltiples enlaces en tu documento con el mismo dominio URL, te permite añadir una URL base al documento que a su vez te permite añadir sólo URLs relativas a otros enlaces en la página según sea necesario.

Nota

Todas las URLs relativas en la página serán referidas en base a la URL base, si tienes algún enlace con un dominio diferente no olvides asignarle la URL completa.

See the Pen Base URL by Alex (@htmldesdecero) on CodePen.

Imágenes Responsivas

El desarrollo web adaptable está de moda con el creciente acceso móvil. Las imágenes se pueden adaptar a diferentes tamaños de pantalla con el marcado. El elemento <picture> HTML5 permite añadir varias fuentes de imagen para diferentes medios para la imagen que contiene.

See the Pen Responsive Images by Alex (@htmldesdecero) on CodePen.

Esta etiqueta es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.

Selector de Color

HTML5 introdujo muchos nuevos elementos de tipo input; el elemento <input type="color"> es uno de ellos. Te permite elegir un color en una página web con la ayuda de un selector de color.

See the Pen Color Picker by Alex (@htmldesdecero) on CodePen.

Agrupar Opciones

Si tienes muchas opciones en una lista desplegable y quieres mostrarlas agrupadas, el elemento <optgroup> hará el trabajo. También puedes aplicar estilo a los grupos con CSS.

See the Pen Group options by Alex (@htmldesdecero) on CodePen.

El Elemento <noscript>.

El navegador sólo muestra el contenido de <noscript> cuando el script está deshabilitado. Esta etiqueta es útil para informar a los usuarios de que el script está deshabilitado en su navegador y para proporcionar un mecanismo alternativo a los componentes de las páginas web que dejarán de funcionar sin JavaScript.

HTML
<head>
<noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript>
</head>
<body>
<noscript><h2>Javascript está desactivado en tu navegador.</h2></noscript>
</body>

En resumen, las etiquetas HTML ofrecen una amplia gama de posibilidades para mejorar la estructura, presentación y funcionalidad de nuestras páginas web. Hemos explorado 10 cosas interesantes que se pueden lograr con estas etiquetas. ¿Deseas dejar alguna extra en los comentarios? Adelante!

2.5/5 - (14 votos)