La estructura de HTML funciona como un árbol jerárquico donde cada etiqueta abre y cierra en orden, y dentro de ese árbol puedes inyectar lógica con la etiqueta script para empezar a programar con JavaScript. Si estás dando tus primeros pasos en desarrollo web, entender este orden te ahorra horas de errores silenciosos.
Aquí vas a ver cómo se anidan html, head y body, dónde colocar tu primer script, y por qué los paréntesis cambian por completo el resultado de una suma cuando concatenas texto y números.
¿Por qué la estructura de HTML se comporta como un árbol?
Piensa en tu archivo como cajas dentro de cajas. La raíz es html y de ahí salen siempre dos hijos: head y body. Lo que abre primero, cierra al final.
- La etiqueta
html envuelve todo el documento.
- El
head contiene lo que el navegador procesa primero pero no se ve, como title o script.
- El
body contiene lo visible: títulos h1, párrafos p y demás contenido.
Si abres un head, debes cerrarlo antes de abrir el body. Una etiqueta nunca puede cerrar fuera de su contenedor padre, porque rompe la jerarquía y el navegador deja de entender tu intención.
¿Qué es la estructura de árbol en HTML? Es la jerarquía donde html es la raíz, con head y body como hijos. Cada etiqueta anidada se convierte en una rama que debe abrir y cerrar dentro de su contenedor padre.
¿Cómo se carga un documento HTML paso a paso?
El navegador lee tu archivo de forma secuencial, no aleatoria. Primero procesa html, luego entra al head, lee el title, ejecuta el script y solo después renderiza el body con el h1 y la p.
Esta secuencia explica por qué la etiqueta script suele ir dentro del head: el código tiene que estar disponible antes de que el navegador pinte el contenido visible.
¿Dónde se coloca la etiqueta script en HTML?
La etiqueta script se conecta al head, no al body. Es la puerta de entrada para escribir JavaScript dentro de un archivo HTML, y todo lo que pongas entre <script> y </script> deja de ser HTML y pasa a ser código ejecutable.
Una buena práctica al escribir tu código es usar la tecla tab para indentar las etiquetas hijas. No es obligatorio, pero te permite ver de un vistazo qué va dentro de qué. La programación está llena de estas convenciones que facilitan la lectura.
Otra flexibilidad útil: hay etiquetas que abren y cierran en líneas distintas, como head, y otras que lo hacen en la misma línea, como title o script cuando son cortas. Tú decides según la legibilidad.
html
<html>
<head>
<title>Mi primera programada</title>
<script>
a = 1;
b = 2;
alert("El valor de A más B es " + (a + b));
</script>
</head>
<body>
<h1>Hola</h1>
</body>
</html>
¿Qué hace la función alert en JavaScript?
alert muestra un mensaje emergente en el navegador. En el ejemplo, recibe un texto entre comillas seguido de un signo + que concatena el resultado de una operación matemática envuelta en paréntesis.
Lo que se abre se tiene que cerrar: paréntesis con paréntesis, comillas con comillas. Romper esa simetría es uno de los errores más comunes al empezar.
¿Por qué los paréntesis cambian el resultado al sumar variables?
Aquí viene lo interesante. Si declaras a = 1 y b = 2 y escribes alert("El valor de A más B es " + (a + b)), el navegador muestra 3. Pero si quitas los paréntesis internos y dejas "El valor de A más B es " + a + b, el resultado pasa a ser 12, leído como "uno dos".
¿Por qué? Porque sin paréntesis, la operación se ejecuta de izquierda a derecha:
- El texto
"El valor de A más B es " se une al número 1, y todo se convierte en texto.
- Ese texto se une al número
2, pegándolo al final como una cadena más.
- El resultado es una concatenación, no una suma.
Con paréntesis, lo más profundo se ejecuta primero, igual que en álgebra. a + b se resuelve como 1 + 2 = 3, y solo después ese 3 se concatena al texto.
¿Qué es la concatenación en JavaScript? Es la operación de unir valores de texto y números en una sola cadena usando el operador +. Cuando hay un texto involucrado, los números se tratan como caracteres y se pegan en lugar de sumarse.
¿Cuál es la diferencia entre variables de texto y de número?
JavaScript distingue tipos de variable: las numéricas permiten operaciones matemáticas, mientras las textuales se concatenan. Si sumas 5 + 235 con paréntesis, obtienes 240. Sin paréntesis dentro de un texto, obtienes 5235.
Esta distinción es el pan de cada día en programación y la vas a ver un millón de veces. La mejor forma de interiorizarla es romper el código a propósito: quita paréntesis, cambia valores y observa qué responde el navegador.
¿Cómo aplico esto en mi propio archivo?
Abre tu archivo HTML, agrega un script dentro del head, declara dos variables, ejecuta un alert con y sin paréntesis y guarda con Ctrl + R para recargar el navegador. Cuando veas la diferencia entre 3 y 12, vas a entender por qué la jerarquía de operadores importa tanto.
Programar en el bloc de notas funciona, pero existe una herramienta profesional que hace todo más cómodo: Visual Studio Code. ¿Ya lo probaste? Cuéntame en los comentarios qué resultado te dio tu primer alert con concatenación.
