Comprender cómo se construye una página web es más sencillo de lo que parece cuando entiendes un solo concepto: las etiquetas. HTML funciona exactamente como etiquetas físicas que organizan y describen cada parte visible de un sitio, desde el encabezado hasta el pie de página.
¿Qué son las etiquetas en HTML y por qué importan?
Una etiqueta en HTML es una instrucción que le dice al navegador qué tipo de contenido debe mostrar y cómo organizarlo. Piensa en ellas como cajitas que contienen información. Cada cajita tiene un propósito específico y puede incluso contener otras cajitas dentro de sí misma [01:07].
Por ejemplo, cuando defines la estructura básica de una página web, usas etiquetas como:
- Header: define la cabecera o parte superior de la página.
- Contenido: agrupa la información principal que el usuario verá.
- Footer: representa el pie de página.
Con solo estas tres etiquetas ya tienes una estructura funcional de página web. Así de directo es HTML.
¿Cómo se anidan etiquetas dentro de otras?
Uno de los aspectos más poderosos de HTML es que puedes colocar etiquetas dentro de otras etiquetas. Esto se conoce como anidamiento. Dentro de la cajita de contenido puedes poner una imagen, un texto descriptivo e incluso otra cajita de contenido con más elementos [02:04].
Este principio permite crear interfaces complejas partiendo de bloques simples. Todo en una página web está definido a base de etiquetas apiladas y organizadas jerárquicamente.
¿Cuál es la anatomía de una etiqueta HTML?
Cada etiqueta sigue una estructura clara [02:50]:
- Nombre de la etiqueta: indica qué tipo de elemento es.
- Contenido: lo que va entre la etiqueta de apertura y la de cierre.
- Cierre: se marca con una diagonal (
/) antes del nombre.
Además, las etiquetas pueden incluir atributos, que son propiedades que describen características adicionales del elemento.
¿Qué son los atributos y las etiquetas de autocierre?
Los atributos son valores que complementan la información de una etiqueta. Un ejemplo claro es la etiqueta img, que se utiliza para insertar imágenes [03:10]. Esta etiqueta no necesita cierre, es lo que se conoce como una etiqueta de autocierre (self-closing tag).
Un ejemplo práctico:
html
<img width="500" height="500" src="mistermichi.jpg">
En este caso los atributos son:
width: define el ancho en píxeles.height: define el alto en píxeles.src (source): indica la ruta o ubicación del archivo de imagen.
Con esta sola línea de código obtienes una imagen de 500 por 500 píxeles renderizada en el navegador. Así de directo funciona HTML.
¿Qué tipos de etiquetas HTML existen?
HTML ofrece una gran variedad de etiquetas para distintos propósitos [03:55]:
- Etiquetas de texto para párrafos y contenido escrito.
- Etiquetas de encabezado (
h1 a h6) para títulos y subtítulos.
- La etiqueta
body para definir el cuerpo del documento.
- Etiquetas genéricas como
div y span para agrupar contenido.
- La etiqueta
img para imágenes.
- La etiqueta
footer para el pie de página.
No es necesario memorizar todas las etiquetas existentes. A medida que construyes proyectos, vas incorporando las que necesitas y puedes consultar referencias en línea en cualquier momento.
Lo fundamental es interiorizar que toda página web es una composición de etiquetas organizadas de forma jerárquica, donde cada una cumple un rol específico. Con ese entendimiento claro, escribir código HTML se convierte en un proceso lógico y predecible.
Si ya visualizas las etiquetas como cajitas que contienen y organizan contenido, estás listo para empezar a escribir tus primeras líneas de código. ¿Qué etiqueta te gustaría probar primero?
