Etiquetas de guión en HTML con ejemplos

Las etiquetas de guión en HTML son utilizadas para incluir scripts (generalmente de JavaScript) en una página web. Esto permite agregar interactividad, realizar validaciones, manipular elementos del DOM y más. La etiqueta principal es <script>. A continuación, te explico en detalle su uso y variantes con ejemplos:

Etiqueta <script>

La etiqueta <script> permite incrustar o vincular código JavaScript en un documento HTML. Puede colocarse tanto en el <head> como al final del <body>.

Incluir JavaScript interno

El código JavaScript se escribe directamente dentro de la etiqueta <script>.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Interno</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    <button onclick="saludar()">Haz clic aquí</button>

    <script>
        function saludar() {
            alert("¡Hola desde JavaScript!");
        }
    </script>
</body>
</html>

Incluir JavaScript externo

Permite vincular un archivo .js externo, facilitando la organización del código.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Externo</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>JavaScript desde archivo externo</h1>
    <button onclick="mostrarMensaje()">Haz clic aquí</button>
</body>
</html>

Archivo script.js:

				
					function mostrarMensaje() {
    alert("Este mensaje viene desde un archivo externo.");
}

Cargar scripts de forma diferida (defer)

La propiedad defer asegura que el script se ejecute después de que todo el contenido HTML haya sido cargado.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script con Defer</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Ejemplo con defer</h1>
    <p>El script no interrumpe la carga del contenido HTML.</p>
</body>
</html>

Cargar scripts de forma asíncrona (async)

La propiedad async hace que el script se descargue y se ejecute de manera asíncrona, es decir, en paralelo con la carga del contenido HTML.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script con Async</title>
    <script src="script.js" async></script>
</head>
<body>
    <h1>Ejemplo con async</h1>
    <p>El script puede ejecutarse antes de que todo el HTML se cargue.</p>
</body>
</html>

Especificar el tipo de script

Aunque no es obligatorio en HTML5, puedes usar el atributo type para indicar que el script es JavaScript.

				
					<script type="text/javascript">
    console.log("Este es un script de JavaScript.");
</script>

Deshabilitar un script temporalmente

Puedes utilizar el atributo type="text/plain" para deshabilitar un script.

				
					<script type="text/plain">
    console.log("Este script no se ejecutará.");
</script>

Scripts que manipulan elementos del DOM

Es recomendable colocar los scripts al final del <body> o usar defer para evitar errores al manipular elementos que aún no han sido cargados.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulación del DOM</title>
</head>
<body>
    <h1 id="titulo">Texto original</h1>
    <button id="boton">Cambiar texto</button>

    <script>
        const boton = document.getElementById('boton');
        boton.addEventListener('click', () => {
            document.getElementById('titulo').innerText = "Texto cambiado con JavaScript";
        });
    </script>
</body>
</html>

Ejemplo avanzado: Usando APIs del navegador

Este ejemplo utiliza console.log para registrar información en la consola y fetch para interactuar con una API.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Fetch API</title>
</head>
<body>
    <h1>Datos de una API</h1>
    <div id="resultado"></div>

    <script>
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => response.json())
            .then(data => {
                document.getElementById('resultado').innerText = `Título: ${data.title}`;
            })
            .catch(error => console.error('Error al cargar los datos:', error));
    </script>
</body>
</html>

La etiqueta <script> es una de las herramientas más poderosas en HTML, ya que habilita la interacción entre el usuario y la página web mediante JavaScript. Ya sea que estés incluyendo código interno, externo o controlando el momento de su ejecución con atributos como async o defer, dominar su uso te permitirá construir experiencias dinámicas y atractivas. ¡Con práctica, puedes aprovechar todo su potencial!

[pvc_stats postid="" increase="1" show_views_today="1"]