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.
