Etiquetas HTML avanzadas: guía completa

Miriam Martínez Canelo

hace 5 meses

Si estás aquí, es porque ya dominas las etiquetas básicas de HTML y estás listo/a para mejorar tus habilidades. Imagina que HTML es una gran caja de herramientas, y hasta ahora solo has estado usando el martillo y el destornillador. Pues bien, ¡prepárate para descubrir todo un arsenal de material útil que hará que tus páginas web se vean y funcionen estupendamente. En esta guía, vamos a mostraros algunas etiquetas HTML avanzadas, su uso y ejemplos prácticos. ¡Vamos allá!

Qué es HTML

HTML (HyperText Markup Language) es el lenguaje estándar para crear y diseñar páginas web. Mientras que las etiquetas básicas como <p>, <a>, y <img> son bien conocidas, HTML también ofrece un conjunto de etiquetas avanzadas que pueden enriquecer la funcionalidad y la semántica de tus páginas web.

Etiquetas HTML avanzadas

1. Etiqueta <canvas>

La etiqueta <canvas> se utiliza para dibujar gráficos mediante scripts (usualmente JavaScript). Puedes dibujar gráficos 2D, gráficos 3D, y animaciones.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Canvas Example</title>

</head>

<body>

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

    <script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        ctx.fillStyle = "#FF0000";

        ctx.fillRect(0, 0, 150, 75);

    </script>

</body>

</html>

En este ejemplo, se crea un rectángulo rojo dentro de un lienzo de 200×100 píxeles.

2. Etiqueta <svg>

La etiqueta <svg> (Scalable Vector Graphics) se utiliza para definir gráficos vectoriales. Los gráficos SVG no pierden calidad cuando se escalan o se cambian de tamaño.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>SVG Example</title>

</head>

<body>

    <svg width="100" height="100">

        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

    </svg>

</body>

</html>

Este ejemplo muestra cómo dibujar un círculo rojo con un borde negro.

3. Etiqueta <video>

La etiqueta <video> se usa para incrustar videos en una página web. Soporta múltiples formatos de video y proporciona controles de reproducción.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Video Example</title>

</head>

<body>

    <video width="320" height="240" controls>

        <source src="movie.mp4" type="video/mp4">

        <source src="movie.ogg" type="video/ogg">

        Your browser does not support the video tag.

    </video>

</body>

</html>

Este ejemplo incrusta un video con opciones de control como reproducir, pausar y ajustar el volumen.

4. Etiqueta <audio>

La etiqueta <audio> permite la reproducción de archivos de audio en la web. También soporta múltiples formatos de audio.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Audio Example</title>

</head>

<body>

    <audio controls>

        <source src="audio.mp3" type="audio/mpeg">

        <source src="audio.ogg" type="audio/ogg">

        Your browser does not support the audio element.

    </audio>

</body>

</html>

Aquí se inserta un archivo de audio con controles para reproducir y pausar.

5. Etiqueta <progress>

La etiqueta <progress> representa el progreso de una tarea en curso.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Progress Example</title>

</head>

<body>

    <label for="file">Downloading file:</label>

    <progress id="file" value="32" max="100"> 32% </progress>

</body>

</html>

Este ejemplo muestra una barra de progreso que indica que se ha completado el 32% de una tarea.

6. Etiqueta <meter>

La etiqueta <meter> representa una medida escalar dentro de un rango conocido, o una fracción.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Meter Example</title>

</head>

<body>

    <label for="disk">Disk Usage:</label>

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

</body>

</html>

Este ejemplo muestra el uso del disco al 60%.

7. Etiqueta <details> y <summary>

Las etiquetas <details> y <summary> se utilizan para crear widgets de divulgación que el usuario puede abrir y cerrar.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Details Example</title>

</head>

<body>

    <details>

        <summary>More Information</summary>

        <p>This is additional information that can be toggled by the user.</p>

    </details>

</body>

</html>

Al hacer clic en «More Information», se muestra el contenido adicional.

8. Etiqueta <datalist>

La etiqueta <datalist> proporciona una lista de opciones predefinidas para un elemento <input>.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Datalist Example</title>

</head>

<body>

    <input list="browsers" name="browser" id="browser">

    <datalist id="browsers">

        <option value="Chrome">

        <option value="Firefox">

        <option value="Safari">

        <option value="Edge">

        <option value="Opera">

    </datalist>

</body>

</html>

Aquí se crea una lista de sugerencias que aparece mientras el usuario escribe en el campo de entrada.

9. Etiqueta <template>

La etiqueta <template> se utiliza para mantener contenido HTML que no se renderiza al cargar la página pero que se puede instanciar más tarde usando JavaScript.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Template Example</title>

</head>

<body>

    <button id="show">Show Template</button>

    <template id="my-template">

        <p>This is a template content!</p>

    </template>

    <script>

        document.getElementById('show').onclick = function() {

            var template = document.getElementById('my-template');

            var clone = document.importNode(template.content, true);

            document.body.appendChild(clone);

        }

    </script>

</body>

</html>

En este ejemplo, el contenido del template se añade al DOM cuando se hace clic en el botón.

10. Etiqueta <mark>

La etiqueta <mark> se utiliza para resaltar texto.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Mark Example</title>

</head>

<body>

    <p>Search results for <mark>HTML5</mark>.</p>

</body>

</html>

En este caso, la palabra «HTML5» está resaltada.

Tabla Resumen de etiquetas avanzadas

A continuación, se presenta una tabla resumen de las etiquetas avanzadas descritas:

Etiqueta	Descripción	Ejemplo de Uso
<canvas>	Dibujo de gráficos mediante scripts	Crear gráficos y animaciones
<svg>	Gráficos vectoriales escalables	Dibujar formas y gráficos escalables
<video>	Incrustar videos	Reproducir videos en la web
<audio>	Reproducir archivos de audio	Añadir audio a las páginas web
<progress>	Indicar progreso de una tarea	Barra de progreso de descargas o procesos
<meter>	Medida escalar dentro de un rango conocido	Mostrar niveles como uso de disco o batería
<details>	Crear widgets de divulgación	Mostrar/ocultar información adicional
<datalist>	Proveer lista de opciones para un campo input	Sugerencias en campos de entrada
<template>	Mantener contenido no renderizado	Contenido HTML que se puede instanciar con JavaScript
<mark>	Resaltar texto	Resaltar términos de búsqueda o información importante

Conclusión

Las etiquetas HTML avanzadas proporcionan una mayor flexibilidad y funcionalidad para diseñar páginas web ricas y dinámicas. Aprender y utilizar estas etiquetas puede mejorar significativamente la experiencia del usuario y la interactividad de tus proyectos web.

¿Qué te han parecido? ¿Las conocías? Coméntanos en nuestras redes sociales y síguenos en nuestro canal de YouTube para mantenerte al día sobre lo último en programación.