01
Una web está formada por secciones.
Cuando observas una página profesional, normalmente puedes dividirla mentalmente en diferentes bloques.
Por ejemplo:
Cabecera y navegación.
Presentación principal.
Información sobre el proyecto.
Servicios o contenido.
Llamada a la acción.
Pie de página.
HTML nos permite representar esa organización mediante elementos semánticos.
02
¿Qué significa HTML semántico?
HTML semántico significa utilizar elementos cuyo nombre describe la función que cumplen dentro de la página.
Algunos de los más importantes son:
<header>
Representa una cabecera de la página o de una sección.
<main>
Contiene el contenido principal de la página.
<footer>
Representa el pie de página o de una sección.
03
La cabecera de la web.
Empezaremos creando el encabezado y el menú de navegación.
<nav>
<a href="index.html">Mi proyecto</a>
<a href="#sobre">Sobre</a>
<a href="#servicios">Servicios</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
El elemento nav indica que ese bloque contiene enlaces de navegación.
04
Crea el contenido principal.
Después del header añadiremos:
</main>
Dentro de main colocaremos las diferentes secciones de nuestra página.
05
Construye la presentación principal.
La primera sección suele utilizarse para explicar rápidamente qué ofrece la web.
<h1>Diseño digital para proyectos con propósito</h1>
<p>
Creamos soluciones digitales claras,
funcionales y profesionales.
</p>
<a href="#servicios">Ver servicios</a>
</section>
Aquí tenemos tres elementos fundamentales: un título, una explicación y una llamada a la acción.
06
Añade una sección Sobre.
Ahora podemos crear una segunda sección.
<h2>Sobre el proyecto</h2>
<p>
Ayudamos a transformar ideas en
experiencias digitales claras y profesionales.
</p>
</section>
Hemos añadido:
Ese identificador permite crear un enlace directamente hacia esta sección.
Por eso en el menú podemos utilizar:
07
Añade una sección de servicios.
Podemos utilizar varios elementos article para representar contenidos independientes dentro de una sección.
<h2>Servicios</h2>
<article>
<h3>Diseño web</h3>
<p>Páginas claras y profesionales.</p>
</article>
<article>
<h3>SEO</h3>
<p>Optimización para buscadores.</p>
</article>
</section>
08
Añade una llamada a la acción.
Una página profesional debería orientar al visitante hacia un siguiente paso.
Podemos añadir una sección de contacto:
<h2>¿Tienes un proyecto?</h2>
<p>
Cuéntanos qué necesitas y hablemos.
</p>
<a href="mailto:hola@ejemplo.com">
Contactar
</a>
</section>
09
Termina con el footer.
El footer aparece normalmente al final de la página.
<p>© 2026 Mi proyecto</p>
</footer>
Más adelante podríamos añadir enlaces legales, redes sociales, información de contacto u otros elementos.
10
Tu página completa.
Si juntamos todo lo aprendido, la estructura general será:
<header>
<nav>...</nav>
</header>
<main>
<section>
Presentación
</section>
<section id="sobre">
Sobre
</section>
<section id="servicios">
Servicios
</section>
<section id="contacto">
Contacto
</section>
</main>
<footer>
Pie de página
</footer>
</body>
Ya tenemos el esqueleto de una página web completa.
RESUMEN
Lo que has aprendido.
- Una página web puede dividirse en diferentes secciones.
- HTML semántico describe la función del contenido.
- header representa la cabecera.
- nav contiene la navegación.
- main contiene el contenido principal.
- section organiza grandes bloques de contenido.
- article puede representar contenido independiente.
- footer representa el pie de página.
- Los atributos id permiten enlazar secciones.
PONLO EN PRÁCTICA
Construye el esqueleto de tu web.
Abre el proyecto mi-primera-web que empezamos en las lecciones anteriores.
Sustituye el contenido de tu body por una estructura que contenga:
- Un header.
- Un menú nav.
- Un main.
- Una sección principal con h1.
- Una sección Sobre.
- Una sección Servicios.
- Una sección Contacto.
- Un footer.
Puedes utilizar tus propios textos. Lo importante en este momento es construir una estructura clara.