PUBLISHED IN HTML

HTML y su estructura: Todo lo que debemos saber

August 3, 2026

El esqueleto de la Web

Imagina cuántas horas al día dedicamos en navegar por internet ya sea para leer noticias, chatear con amigos, hacer alguna compra por Amazon o simplemente consumir algún tipo de información, vayas donde vayas esa página web que carga en tu navegador, tiene toda una estructura… algo así como el esqueleto humano, con sus 206 huesos y cada uno cumpliendo una función importante.

Antes de pensar en colores llamativos, animaciones fluidas o botones interactivos, es fundamental comprender que ningún edificio se mantiene en pie sin unos cimientos sólidos. En el mundo digital, esa base es la que sostiene todo el contenido que consumimos. Del mismo modo que el cuerpo humano necesita de sus huesos para dar soporte a los músculos y la piel, una página web requiere de una arquitectura interna organizada para poder existir. Esta estructura fundamental, que actúa como el soporte invisible de todo lo que ves, es lo que conocemos técnicamente como HTML.

¿Qué es HTML? Los cimientos del desarrollo web

HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el componente más básico de la Web. Su función principal es definir el significado y la organización del contenido.

Para entender cómo encaja en el ecosistema del desarrollo, debemos visualizarlo como el primero de tres pilares esenciales que trabajan en conjunto para crear la experiencia digital completa:

Tecnología	Rol Principal (¿Qué hace?)
HTML	Definir significado y estructura.
CSS	Describir apariencia o presentación.
Javascript	Funcionalidad o comportamiento.

Para dominar este lenguaje, primero debemos desglosar la esencia de su nombre, empezando por el concepto que revolucionó la forma en que consumimos información: el “Hipertexto”.

El poder del “Hipertexto”: Más que simples palabras

El “Hipertexto” no es otra cosa que los enlaces o links que conectan las páginas web entre sí. Esta interconectividad es lo que hace que la Web sea “World Wide”. Sin enlaces, estaríamos leyendo documentos aislados; con ellos, navegamos por una red global de conocimiento.

“Al publicar contenido en Internet y enlazarlo con páginas creadas por otras personas, te conviertes en un participante activo de la World Wide Web.”

Pero, para que esos enlaces y el contenido tengan un lugar y una jerarquía, necesitamos un sistema que le indique al navegador qué es cada cosa. Aquí es donde entra en juego el concepto de “Marcado”.

El concepto de “Marcado” y la anatomía de una etiqueta

El “Marcado” consiste en utilizar etiquetas para identificar y categorizar los diferentes elementos de una página. Como desarrolladores, usamos estas etiquetas para “envolver” nuestro contenido, dándole un propósito semántico. La sintaxis es sencilla pero estricta: utilizamos los símbolos menor que (<) y mayor que (>) para delimitar nuestras instrucciones.

Antes de empezar a escribir código, como mentor siempre recalco estas reglas de sintaxis que separan a un principiante de un profesional:

Uso de etiquetas: El nombre del elemento siempre va rodeado por los símbolos < y >. Generalmente, tenemos una etiqueta de apertura y una de cierre para contener el elemento.
Sensibilidad a mayúsculas: HTML técnicamente no distingue entre mayúsculas y minúsculas. El navegador entenderá igual <TITLE>, <Title> o <title>.
Mejor práctica: Aunque el lenguaje sea flexible, la convención profesional y el estándar de la industria es escribir siempre en minúsculas. Esto no es solo por estética; facilita la legibilidad, reduce errores en entornos colaborativos y asegura la compatibilidad con sistemas de procesamiento de datos más estrictos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

Entendida la gramática del lenguaje, veamos cuáles son las piezas fundamentales que conforman nuestro catálogo de construcción.

Catálogo de etiquetas: Estructura y Semántica

Para que un documento HTML sea “grokable” (fácil de entender de un vistazo), clasificamos las etiquetas según su función. Como desarrollador Senior, te aseguro que elegir la etiqueta correcta no solo ayuda al navegador, sino que es vital para la accesibilidad y el SEO.

Etiquetas de Estructura y Contenedores Estas etiquetas definen las grandes zonas de nuestro esqueleto digital y organizan la jerarquía global:
- <html>: El elemento raíz que envuelve todo el documento.
- <head> y <body>: Separan los metadatos (configuración invisible) del contenido que el usuario realmente ve.
- <header> y <footer>: Definen el encabezado y el pie de página del sitio o de una sección.
- <section>, <nav> y <div>: Se utilizan para segmentar el contenido y crear menús de navegación.
- <main> representa el contenido principal del <body> de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación.

Nota: no debe haber más de un elemento <main> en un documento, y este no debe ser descendiente de un elemento <article>, <aside>, <footer>, <header>, o <nav>.

Al combinar estas piezas con criterio, transformamos un simple archivo de texto en una experiencia interactiva y estructurada que cualquier navegador del mundo puede interpretar.

Dominar la estructura es y será siempre lo primero. Entender cómo marcar los elementos y cómo conectarlos a través del hipertexto te otorga el poder de transformar una pantalla vacía en una herramienta de comunicación global. Aunque quisiera agregar también que es importante por el SEO, pero eso lo iremos viendo mas adelante.

Back to portfolio