Aprender sobre la estructura HTML es el primer y más crucial paso para crear páginas web. HTML (HyperText Markup Language) es el lenguaje fundamental que actúa como el esqueleto de un sitio: define sus cimientos y organiza todo el contenido que ves en internet. Sin una correcta estructura de código base, no hay página web funcional.
Desde su creación en los 90, HTML ha evolucionado enormemente (ver Historia de HTML). Hoy usamos HTML5, una versión moderna y poderosa que nos permite añadir fácilmente video, audio y crear sitios que se adaptan a cualquier dispositivo.
Tabla de Contenido
El Núcleo de la Estructura HTML: 3 Etiquetas Obligatorias
Todo documento HTML se construye sobre tres etiquetas principales que nunca pueden faltar. Son el verdadero ADN de cualquier página web.
<html>: Es la etiqueta raíz que envuelve todo el contenido. Su función es decirle al navegador: “¡Todo lo que está aquí dentro es una página web!”.
<head>: Es el “cerebro” técnico de la página. Contiene metadatos vitales que no se ven directamente pero que son cruciales para el SEO y el funcionamiento: el título de la pestaña, la codificación de caracteres y los enlaces a archivos CSS (estilo) y JavaScript (interactividad).
<body>: Es el cuerpo visible de la página y el lienzo para la maquetación web. Todo lo que el usuario ve —textos, imágenes, botones y enlaces— se encuentra dentro de esta etiqueta.
Consulta también: Referencia de Elementos HTML.
Estructura Básica: Tu Primer “Hola, Mundo” en HTML
Para entender cómo funcionan estas etiquetas juntas, veamos la estructura más simple posible. Este es el punto de partida de todo desarrollador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Esta es mi primera página web creada con HTML.</p>
</body>
</html>¿Qué significa cada línea?
<!DOCTYPE html>: Declara al navegador que el documento usa el estándar HTML5. (Lee ¿Qué es Doctype?: Para qué Sirve y Ejemplos)<html lang="es">: La etiqueta raíz que indica que el contenido está en español.<head>: Comienza la sección de metadatos.<meta charset="UTF-8">: Asegura que caracteres especiales como acentos (á) o la eñe (ñ) se muestren correctamente.<meta name="viewport"...>: Esencial para el diseño responsivo, logrando que la página se adapte a móviles.<title>: El texto que se muestra en la pestaña del navegador.<body>: Aquí empieza todo el contenido visible para el usuario.<h1>y<p>: Son etiquetas de contenido, un encabezado principal y un párrafo.
Este ejemplo demuestra la estructura básica de un documento HTML. Cada elemento tiene su lugar y propósito, lo que permite al navegador interpretar y mostrar correctamente el contenido de la página.
Del Código Base al Esqueleto de una Página Real
El ejemplo anterior es perfecto para aprender, pero un sitio web real tiene una estructura más organizada y con mayor significado. Para esto usamos las etiquetas semánticas de HTML5, que ayudan a los buscadores y a otros desarrolladores a entender el propósito de cada bloque de contenido.
Ahora, veamos una plantilla o esqueleto HTML más profesional. Esta es la base que podrías usar para empezar tus propios proyectos.
Plantilla HTML5 Profesional
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
<meta name="description" content="Una descripción concisa de esta página para los buscadores.">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="icon" href="/img/favicon.png">
</head>
<body>
<header>
Cabecera del sitio (logo, título principal)
<nav>
Menú de navegación principal (Inicio, Acerca de, Contacto)
</nav>
</header>
<main>
<h1>Título Principal del Contenido</h1>
<section>
<h2>Sección 1</h2>
<p>Aquí va el contenido más importante de la página.</p>
</section>
</main>
<aside>
Barra lateral con contenido relacionado (publicidad, enlaces extra)
</aside>
<footer>
Pie de página (copyright, enlaces a redes sociales, etc.)
</footer>
<script src="/assets/js/main.js" defer></script>
</body>
</html>Explicación de las Etiquetas Semánticas
<header>: Define la cabecera de la página, que suele contener el logo y la navegación.<nav>: Se usa específicamente para el menú de navegación principal.<main>: Envuelve el contenido principal y único de la página.<section>: Agrupa contenido temáticamente relacionado, como un capítulo de un artículo.<aside>: Representa una sección con contenido secundario, como una barra lateral (sidebar).<footer>: Define el pie de página del sitio.<link>: Conecta recursos externos, como hojas de estilo CSS y el ícono de la pestaña (favicon).<script>: Enlaza un archivo JavaScript. Se coloca al final por rendimiento, para no retrasar la carga del contenido.
¡Felicidades! Dominar la estructura HTML es el primer gran paso para convertirte en desarrollador web. Con este esqueleto, ya tienes una base sólida y profesional para construir cualquier proyecto que imagines.
Quiero comentar algo