Partes de una página web: guía y ejemplos.
¿Cómo se divide una página web y para qué sirve cada sección? Descubre la cabecera, el menú, el hero, el contenido, las llamadas a la acción y el footer con un esquema visual interactivo y una plantilla HTML gratuita.
sentido.
Cada sección tiene una función.
DESCUBRIR ↗¿Cuáles son las partes de una página web?
Una página web suele organizarse en tres grandes áreas visuales: cabecera (header), cuerpo o contenido y pie de página (footer). Dentro de esas áreas encontramos otros elementos habituales: logotipo, menú de navegación, hero o sección de presentación, títulos, bloques de información, imágenes, llamadas a la acción (CTA), formularios y enlaces.
Por ejemplo, en la página de inicio de una empresa el visitante puede ver primero el logotipo y el menú, después una frase que explica qué ofrece el negocio, sus servicios, reseñas, un formulario de contacto y, al final, un footer con enlaces útiles. La estructura debe ayudar a comprender, encontrar información y realizar una acción, no simplemente rellenar la pantalla con secciones.
Importante: tres conceptos que se suelen confundir
Estructura visual: lo que ves (cabecera, hero, bloques, footer). Estructura HTML: etiquetas que dan significado al documento (por ejemplo, <header>, <main> o <footer>). Estructura del sitio: cómo se relacionan distintas URL (inicio, servicios, blog, contacto). En esta guía aprenderás las tres, sin confundirlas. MDN explica esta distinción estructural ↗.
Esquema de las partes de una web. Haz clic para explorarlas.
Selecciona cada zona de esta página de ejemplo para entender qué hace. Cambia entre escritorio y móvil: descubrirás que las partes no desaparecen necesariamente; se reorganizan. El ejemplo es conceptual y no representa una web real.
Cada zona es un botón accesible. Puedes recorrerlas también con el teclado.
Cabecera y navegación
Identifican el sitio y ayudan a encontrar rápidamente sus secciones principales. El logotipo suele enlazar a la página de inicio; el menú debe utilizar etiquetas claras y ser manejable desde móvil y con teclado.
Las 12 partes de una página web, una por una.
Estas son las piezas que encontrarás con más frecuencia en sitios corporativos, blogs y páginas comerciales. Cada una cumple una función distinta y algunas son opcionales. Un diseño eficaz combina las necesarias sin añadir módulos por inercia.
Cabecera o header
Es la zona superior que presenta la identidad del sitio y sus accesos principales. Puede contener logotipo, menú, buscador, selector de idioma o un botón destacado. Suele repetirse entre páginas, pero no tiene por qué ser idéntica en una landing.
Ejemplo: logotipo a la izquierda, Servicios · Proyectos · Blog · Contacto a la derecha. Evita saturarla con demasiadas decisiones.
HTML: <header>Menú de navegación
Es el conjunto de enlaces que ayuda al visitante a orientarse. En móvil puede mostrarse mediante un botón desplegable. Una web puede tener varios menús, como el principal y otro dentro del footer.
Ejemplo: Inicio, Servicios, Sobre nosotros y Contacto. Usa nombres comprensibles y un marcado semántico adecuado; el W3C recomienda representar menús como listas cuando corresponda.
HTML: <nav> + <ul> + <a>Hero o sección de portada
Es el bloque de presentación destacado, habitualmente situado al principio del contenido. Combina un mensaje principal, contexto visual y, a menudo, una CTA. No es una etiqueta HTML específica ni una obligación de todas las páginas.
Ejemplo: «Diseñamos webs para negocios que necesitan captar clientes» y el botón «Solicitar propuesta». Una propuesta concreta suele orientar mejor que un eslogan genérico.
DISEÑO: SECCIÓN HEROTítulos H1, H2 y H3
Organizan el contenido en niveles. El H1 describe el tema principal de la página; los H2 dividen grandes apartados y los H3 desarrollan subtemas. La jerarquía debe tener lógica, no elegirse solo por tamaño visual.
Ejemplo: H1 «Servicios de diseño web»; H2 «Qué incluye el servicio»; H3 «Diseño adaptable». No saltes niveles únicamente para conseguir una letra más pequeña.
HTML: <h1> … <h6>Contenido principal o main
Contiene la información singular de esa URL: textos, bloques visuales, servicios, precios, tablas o tutoriales. Se diferencia de lo que se repite globalmente en el sitio, como su navegación habitual.
Ejemplo: en una página de servicios, explica el problema que resuelves, cómo trabajas y qué recibe el cliente. En un artículo, responde primero a la duda central y profundiza después.
HTML: <main> + <section>Imágenes, vídeos y recursos
Apoyan lo que explica el texto: muestran un producto, documentan un resultado o hacen comprensible un proceso. Deben tener una función, una calidad adecuada y una carga optimizada.
Ejemplo: un ejemplo real de trabajo con una descripción clara suele ser más útil que una fotografía decorativa sin conexión con la oferta.
HTML: <img>, <video>, <figure>Llamada a la acción (CTA)
Es un enlace o botón que propone el siguiente paso: «Solicitar presupuesto», «Ver precios», «Descargar la guía» o «Comprar». Puede aparecer en el hero, entre bloques y al final del contenido.
Ejemplo: si vendes un servicio personalizado, «Cuéntame tu proyecto» puede ser más coherente que «Comprar ahora». La CTA debe conducir a un destino real.
INTERACCIÓN: ENLACE O BOTÓNPrueba social y elementos de confianza
Testimonios verificables, casos de estudio, trabajos, certificaciones pertinentes o información transparente sobre quién está detrás del negocio pueden facilitar una decisión.
Ejemplo: muestra un proyecto con su contexto y resultado real, sin inventar cifras ni reseñas. La credibilidad debe poder comprobarse.
CONTENIDO: CASOS, RESEÑAS, EQUIPOFormularios y contacto
Permiten enviar una consulta, reservar o solicitar información. Solo deberían pedir los datos necesarios para realizar la gestión; cada campo necesita una etiqueta comprensible.
Ejemplo: nombre, correo y mensaje pueden bastar para una primera consulta. Explica qué ocurre después de enviar y facilita la información de privacidad pertinente.
HTML: <form> + <label> + <input>Barra lateral o sidebar
Es un espacio complementario, no siempre presente. Puede incluir un índice, contenidos relacionados, filtros, datos de autor o una llamada a la acción secundaria.
Ejemplo: en un blog extenso, un índice lateral resulta útil si no distrae de la lectura. En móvil suele recolocarse debajo del contenido o desaparecer si no aporta valor.
HTML POSIBLE: <aside>Preguntas frecuentes y contenido final
Las preguntas frecuentes ayudan a aclarar dudas concretas sobre un servicio o tema. No todas las páginas necesitan una sección FAQ: añadir preguntas triviales solo alarga el contenido.
Ejemplo: en una página de diseño web, «¿Quién proporciona los textos?» o «¿Podré editar la web?» son preguntas relacionadas con la decisión de contratar.
HTML POSIBLE: <details> + <summary>Pie de página o footer
Cierra el documento visualmente y ofrece accesos de apoyo: contacto, navegación secundaria, enlaces de privacidad, avisos aplicables e información sobre la empresa. No es un almacén de enlaces sin jerarquía.
Ejemplo: logotipo, contacto, servicios principales, política de privacidad e información legal correspondiente a la actividad y jurisdicción.
HTML: <footer>¿Hay partes imprescindibles? Todo documento HTML tiene una estructura técnica, pero la composición visual depende del objetivo. Una landing puede prescindir del menú principal; una tienda necesita búsqueda y filtros; un artículo extenso puede beneficiarse de un índice. La pregunta correcta no es «¿cuántas secciones pongo?», sino «¿qué necesita saber y hacer la persona aquí?».
La estructura HTML: head, body, header, main y footer.
Cuando alguien pregunta por las partes de una página web, a menudo se mezclan nombres de diseño con etiquetas de código. Es importante diferenciarlos, sobre todo si vas a montar la web en WordPress, Elementor o HTML.
¿Es lo mismo <head> que <header>?
No. <head> contiene metadatos y configuraciones del documento, como el título de la pestaña, la descripción SEO y enlaces a hojas de estilo; normalmente no es una región visible. <header> es una región introductoria que sí puede mostrarse: logotipo, título, navegación o búsqueda. Esta diferencia está documentada por MDN: head y MDN: header.
¿Es lo mismo body que main?
Tampoco. <body> contiene el contenido del documento que se presenta al usuario; dentro pueden existir cabecera, navegación, contenido principal y pie. <main> identifica el contenido central de la página, único para esa URL. Una página debe tener un único <main> visible como contenido principal. En WordPress, normalmente lo proporciona la plantilla del tema, así que no debes añadir otro main dentro de un widget Elementor sin comprobar el HTML resultante. Referencia MDN ↗.
| Parte o etiqueta | Qué significa | ¿Visible? | Ejemplo habitual |
|---|---|---|---|
<head> | Metadatos del documento | No como región visual | Title, description, CSS |
<body> | Contenedor del contenido de la página | Su contenido, sí | Cabecera, contenido y footer |
<header> | Introducción de página o sección | Habitualmente sí | Marca y cabecera |
<nav> | Grupo de enlaces de navegación | Sí | Menú principal, índice |
<main> | Contenido principal único | Sí | Artículo o página de servicio |
<section> | Sección temática de contenido | Sí | Ventajas, proceso, preguntas |
<article> | Contenido autónomo reutilizable | Sí | Entrada de blog, noticia |
<aside> | Contenido relacionado o auxiliar | Sí | Índice lateral, datos de autor |
<footer> | Cierre de página o sección | Habitualmente sí | Enlaces legales, contacto |
| Hero, card, CTA | Patrones de diseño, no etiquetas HTML | Sí, si se usan | Portada, tarjeta, botón |
Ejemplo de estructura correcta en HTML
Este esquema reproduce un documento sencillo. Es didáctico: deberás adaptar el contenido, los metadatos y la navegación a tu web. En un CMS, estos elementos suelen repartirse entre la plantilla global y el contenido editable.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diseño web para negocios | Estudio Ejemplo</title>
<meta name="description" content="Diseñamos páginas web claras y adaptables para negocios.">
</head>
<body>
<header>
<a href="/" aria-label="Ir al inicio">Estudio Ejemplo</a>
<nav aria-label="Navegación principal">
<ul>
<li><a href="/servicios/">Servicios</a></li>
<li><a href="/proyectos/">Proyectos</a></li>
<li><a href="/contacto/">Contacto</a></li>
</ul>
</nav>
</header>
<main id="contenido">
<section aria-labelledby="titulo-principal">
<h1 id="titulo-principal">Diseño web pensado para tu negocio</h1>
<p>Creamos webs claras y fáciles de utilizar.</p>
<a href="/contacto/">Solicitar información</a>
</section>
<section aria-labelledby="servicios">
<h2 id="servicios">Nuestros servicios</h2>
<p>Diseño, desarrollo y mantenimiento web.</p>
</section>
</main>
<footer>
<p>Estudio Ejemplo · Contacto e información legal</p>
</footer>
</body>
</html>Para accesibilidad: identifica las regiones principales, usa títulos jerarquizados y etiqueta menús distintos. El tutorial de estructura de página del W3C explica por qué esto facilita la navegación con lectores de pantalla, teclado y otras tecnologías de apoyo.
Partes de una página web y páginas de un sitio: no son lo mismo.
Una cosa son las secciones que componen una URL; otra, las diferentes páginas que forman un sitio. Esta segunda distinción es importante para la navegación y para el SEO.
| Página del sitio | Objetivo | Qué suele contener |
|---|---|---|
| Inicio (home) | Presentar la propuesta global | Hero, servicios destacados, prueba social y CTA |
| Servicios | Explicar soluciones y resolver dudas | Beneficios, proceso, alcance, ejemplos y contacto |
| Sobre nosotros | Generar contexto y confianza | Trayectoria, equipo, método y valores demostrables |
| Proyectos o portfolio | Mostrar trabajo realizado | Casos, imágenes, contexto y resultados verificables |
| Blog o recursos | Responder consultas y educar | Artículos, categorías, índices y relacionados |
| Contacto | Facilitar una conversación | Formulario, correo y otros canales disponibles |
| Legales y privacidad | Informar y atender obligaciones aplicables | Información adaptada a la actividad y normativa |
Por ejemplo: Inicio → Servicios → Diseño web → Contacto representa una posible ruta de navegación entre páginas distintas. El menú ayuda a recorrerla, mientras que las secciones internas explican cada página. Una arquitectura clara permite enlazar de forma natural contenidos relacionados sin convertir todos los menús en listas interminables.
Cómo cambian las partes según el tipo de página web.
No existe una plantilla universal. El contenido, el orden y el peso de cada bloque deben adaptarse a lo que la persona necesita resolver.
Web corporativa o de servicios
Ejemplo: estudio de arquitectura, agencia o empresa industrial. Puede seguir este orden: header → hero con propuesta → servicios → proyectos → método → testimonios verificables → CTA → footer.
Objetivo: explicar qué hace el negocio, transmitir confianza y facilitar una consulta.
Tienda online
Ejemplo: ecommerce de ropa. Header con búsqueda y carrito → categorías → listado con filtros → fichas de producto → condiciones de entrega → checkout → footer.
Objetivo: ayudar a encontrar, comparar y comprar sin fricciones. En las fichas importan especialmente la imagen, el precio, la disponibilidad y la información de compra.
Blog o página de contenido
Ejemplo: guía de WordPress. Cabecera → título y autor → introducción → índice opcional → contenido dividido en H2/H3 → ejemplos y recursos → relacionados → footer.
Objetivo: responder a la búsqueda, facilitar lectura y permitir profundizar. Un exceso de CTA puede distraer.
Landing page de captación
Ejemplo: campaña de consultoría. Logo → propuesta concreta → beneficios → caso o evidencia → dudas habituales → formulario o CTA → información de confianza.
Objetivo: conseguir una acción definida. El menú completo puede reducirse cuando distrae de ese objetivo, siempre que la navegación y los accesos necesarios estén resueltos.
Un ejemplo de mejora: una clínica no debería copiar sin más la página de una tienda. Una persona que va a pedir cita suele necesitar servicios, profesionales, ubicación, horarios, confianza y un acceso claro a la reserva. La estructura correcta depende de esa necesidad concreta.
Cómo estructurar una página web paso a paso.
Antes de abrir Elementor, Figma o cualquier editor, define el contenido y la función de cada bloque. Este método sirve para una página sencilla y puede ampliarse a sitios más complejos.
Define el objetivo de la URL.
¿Informar, recibir contactos, vender o mostrar trabajos? Elige una acción principal medible. No intentes que una sola página cumpla todos los objetivos del negocio a la vez.
Identifica a quién va dirigida.
Recoge dudas, objeciones y contexto. Una persona que busca «precio de diseño web» necesita una respuesta distinta de quien busca «qué es un header».
Ordena las preguntas de mayor a menor prioridad.
Escribe qué necesita saber el usuario al entrar, qué prueba requiere para confiar y qué información le permite dar el siguiente paso.
Dibuja un wireframe simple.
Esboza cabecera, título principal, bloques, imágenes, CTA y footer en papel. Comprueba primero el orden y la jerarquía; deja tipografías y efectos para después.
Redacta titulares y textos concretos.
Cada H2 debe anticipar lo que explica la sección. Sustituye «Soluciones innovadoras» por un título que describa realmente el beneficio o servicio.
Construye la versión móvil.
Reorganiza columnas, comprueba el menú, mantén CTA legibles y evita tablas que rompan el ancho. El diseño adaptable no consiste solo en reducir tamaños.
Revisa accesibilidad y velocidad.
Usa encabezados lógicos, enlaces comprensibles, textos alternativos cuando aporten información, foco visible y recursos optimizados. Comprueba con teclado y dispositivo real.
Publica, mide y mejora.
Comprueba enlaces, metadatos, indexabilidad, formularios y datos de analítica. Después observa búsquedas y comportamiento para corregir problemas reales, no impresiones subjetivas.
Ejemplo práctico: estructura de la home de una empresa local
Supongamos una empresa de reformas en Girona. Su página de inicio podría presentar: 1) cabecera con servicios y contacto; 2) hero «Reformas integrales en Girona» con un botón para solicitar visita; 3) tipos de reformas; 4) proyectos con fotos reales; 5) método de trabajo; 6) testimonios auténticos; 7) preguntas sobre presupuestos y plazos; 8) CTA de contacto y footer. No necesita inventar una estadística ni añadir módulos que no ayuden a decidir.
Una buena estructura también debe funcionar en SEO, móvil y accesibilidad.
El esquema de bloques es solo el principio. Para que la página sea realmente útil, conviene evaluar el contenido, la comprensión y el comportamiento técnico.
SEO: organización clara, no acumulación de keywords
Relaciona un título principal descriptivo con secciones que resuelvan preguntas concretas. Escribe enlaces internos cuyo texto explique el destino, utiliza títulos de página únicos y evita repetir la misma keyword de forma artificial. Google prioriza contenido útil y fiable dirigido a personas; una estructura ordenada es valiosa si mejora la comprensión, no por contar más etiquetas.
Accesibilidad: que todos puedan recorrer la página
La estructura semántica ayuda a navegar por regiones y encabezados. Asegúrate de que los controles puedan manejarse con teclado, que se distinga el foco, que los enlaces tengan nombres comprensibles, que los formularios estén etiquetados y que el texto tenga contraste adecuado. No bases una instrucción únicamente en el color. Las guías WAI del W3C incluyen pautas sobre regiones y títulos, y su tutorial de menús muestra cómo estructurar navegación accesible.
Mobile first: misma información, otra composición
En pantallas estrechas, las tarjetas pueden apilarse y el menú pasar a un desplegable; pero el contenido esencial, los títulos y las acciones deben seguir siendo accesibles. Evita ocultar información relevante solo para que el móvil «se vea limpio». La guía de diseño responsive de web.dev explica cómo adaptar layouts, imágenes y tipografía a distintos dispositivos.
Rendimiento: estructura ligera y estable
Reserva espacio para medios que puedan desplazar el contenido, evita efectos que bloqueen la interacción y optimiza la imagen principal. Como referencias de buena experiencia de Google, Core Web Vitals establece LCP de 2,5 s o menos, INP de 200 ms o menos y CLS de 0,1 o menos, evaluados en el percentil 75 de usuarios. Son objetivos de experiencia de usuario, no garantías de posicionamiento. Consulta web.dev ↗.
Conversión: un siguiente paso coherente
El visitante no debería tener que adivinar dónde encontrar el precio, ejemplos o contacto. Nielsen Norman Group explica que las etiquetas de enlace claras ayudan a anticipar su destino, concepto conocido como information scent. Ver el análisis de NN/g ↗. Una CTA no arregla una oferta que no se entiende; primero explica, demuestra y después invita a actuar.
Dónde se configura cada parte en WordPress.
Si usas WordPress con Elementor, no todos los elementos se editan en el mismo lugar. El header y el footer suelen depender de la plantilla global; el contenido, de la página o entrada; y los metadatos, de WordPress o del plugin SEO.
| Componente | Dónde suele editarse | Precaución |
|---|---|---|
| Header / navegación | Theme Builder (si está disponible), opciones del tema o editor del sitio | Evita duplicar el menú con un bloque HTML |
| Hero, secciones y CTA | Editor de la página o entrada | Comprueba la jerarquía H1-H2-H3 |
| Footer global | Plantilla o personalización del tema | Consistencia entre páginas |
| Title y meta description | Plugin SEO o configuración correspondiente | No añadir un segundo head en Elementor |
| Formularios | Widget de formulario o plugin compatible | Validación, accesibilidad y privacidad |
| Diseño responsive | Opciones de estilos por dispositivo | Revisar orden y lectura en móvil |
Este artículo está preparado como un único widget HTML independiente, con clases CSS aisladas. No añade un nuevo <html>, <head> ni <main> porque normalmente WordPress ya los aporta. Antes de publicarlo, configura el título SEO, la canonical y la visibilidad en el plugin correspondiente, y comprueba que la plantilla de entrada no haya añadido otro H1 visible.
Plantilla gratis de estructura web en HTML y CSS.
Si has buscado «partes de una página web ejemplos» o «partes de una página web gratis», aquí tienes algo que puedes utilizar: una plantilla independiente y adaptable que incluye cabecera, menú, hero, bloques de contenido, CTA y footer. No requiere registrarse ni instalar librerías.
¿Qué incluye la plantilla descargable?
Un archivo .html que puedes abrir con doble clic en tu navegador, editar en un editor de texto y adaptar a un proyecto de prueba. Incluye CSS responsivo, enlaces de ejemplo que apuntan a secciones reales, un H1, varios H2 y la estructura semántica principal. No incluye un sistema de gestión de contenidos, formularios conectados ni backend: está pensada para aprender y prototipar.
Cómo utilizarla paso a paso
- Descarga el archivo y ábrelo en Chrome, Firefox o tu navegador habitual.
- Cambia los textos de «Estudio Ejemplo» por el nombre, la oferta y las secciones de tu proyecto.
- Reordena bloques según el objetivo. Un portfolio necesitará casos; una landing, pruebas y una CTA muy clara.
- Revisa el móvil y comprueba que todos los enlaces y botones funcionan.
- Si vas a publicar, sustituye datos y enlaces de ejemplo, añade tu propia información legal y verifica accesibilidad, SEO y rendimiento.
¿Quieres usar WordPress en vez de escribir código? Puedes reproducir exactamente el mismo orden con contenedores, títulos, párrafos, imágenes y botones de Elementor. La lógica de la página es la misma; cambia la herramienta de edición.
Errores al distribuir las partes de una página web.
Las webs suelen perder claridad no por falta de secciones, sino por ausencia de prioridades. Estos fallos aparecen con frecuencia en los primeros diseños y en rediseños hechos por acumulación.
Un menú que parece un sitemap.
Si incluyes cada servicio, sector, artículo y producto en la navegación principal, obligas a procesar demasiadas opciones. Agrupa y prioriza los accesos más relevantes.
Un hero bonito que no explica nada.
Una foto espectacular no sustituye una propuesta clara. El visitante debería entender a quién se dirige la oferta y qué puede hacer después.
Repetir botones sin aportar información.
Varias CTA idénticas no compensan que falten precios, ejemplos, condiciones o un proceso entendible. Inserta acciones cuando el lector tiene contexto suficiente.
Usar títulos por estética, no por jerarquía.
Elegir un H4 porque se ve pequeño rompe la lógica del documento. Define primero el nivel correcto y modifica después el tamaño con CSS.
Diseñar desktop y «reducir» para móvil.
Los contenidos requieren otro orden, otras proporciones y controles fáciles de pulsar. Revisa de verdad pantallas pequeñas, no solo una vista previa visual.
Confundir footer con un cajón de enlaces.
El pie debe permitir cerrar una búsqueda y localizar información de apoyo. Evita bloques duplicados, enlaces rotos e información desactualizada.
Checklist interactiva: ¿tu web tiene una buena estructura?
Marca las comprobaciones que ya cumples. La puntuación es solo una ayuda de autoevaluación, no una auditoría técnica ni un indicador SEO oficial. No guardamos tus respuestas ni las enviamos a ningún servidor.
Preguntas sobre las partes de una página web.
Respuestas rápidas a las dudas habituales de estudiantes, profesionales y personas que están creando su primera web.
¿Cuáles son las tres partes principales de una página web?
En una explicación visual básica son cabecera (header), cuerpo o zona de contenido y pie de página (footer). Técnicamente, el documento HTML se organiza de otra forma: head contiene metadatos y body incluye el contenido que se presenta al usuario.
¿Cuáles son las partes de una página web con ejemplos?
Por ejemplo, una web de servicios puede incluir logo y menú (cabecera), un hero con el mensaje principal, tarjetas de servicios, proyectos, testimonios, un formulario o botón de contacto y un footer con enlaces. Puedes seleccionar cada zona en el esquema interactivo de esta guía.
¿Qué es el header de una página web?
Es una región introductoria visible que suele incluir identidad y navegación. Puede contener logotipo, buscador, selector de idioma y una CTA. No es lo mismo que la etiqueta head, que recoge metadatos.
¿Qué es el hero y dónde se coloca?
Es la sección destacada de introducción de una página, a menudo situada debajo de la navegación. Suele contener un título, una breve explicación, recursos visuales y una acción. No existe una etiqueta HTML especial llamada hero.
¿Qué diferencia hay entre body y main?
Body es el contenedor del contenido del documento. Main identifica la región de contenido principal de esa página y excluye normalmente las partes repetidas del sitio, como la navegación global y el footer.
¿Qué es el footer y qué debe contener?
El footer o pie de página es el bloque final de la página o de una sección. En un sitio empresarial suele reunir contacto, navegación de apoyo e información legal y de privacidad pertinente. Su contenido exacto depende del proyecto.
¿Una página web necesita menú y sidebar?
No necesariamente. En una landing centrada en una acción puede reducirse la navegación; la sidebar es opcional. Lo importante es que el usuario pueda orientarse y acceder a la información necesaria.
¿Cuántas secciones debe tener una página web?
No hay una cifra correcta universal. Una landing sencilla puede resolver su objetivo con pocos bloques; una guía o una página de servicios complejos necesita más. Define el número a partir de las preguntas y decisiones del visitante, no de una plantilla fija.
¿Cuál es la diferencia entre página web y sitio web?
Una página web es un documento o recurso accesible mediante una URL; un sitio web agrupa diferentes páginas relacionadas. La home, los servicios y el contacto son páginas de un sitio; el hero y el footer son partes de una de esas páginas.
¿Cómo hacer la estructura de una página web desde cero?
Define objetivo y público, enumera las dudas esenciales, ordena los bloques en un wireframe, redacta títulos y contenido, construye una versión adaptable y comprueba accesibilidad, enlaces y rendimiento. Puedes descargar una base HTML funcional en esta guía.
¿Puedo descargar una plantilla gratis de las partes de una página web?
Sí. La sección de plantilla contiene un archivo HTML y CSS descargable desde el navegador que muestra una web de ejemplo con header, menú, hero, contenido, CTA y footer. Es editable y no requiere registro.
¿Cómo se crean estas partes en WordPress y Elementor?
Normalmente la cabecera y el footer se gestionan desde el tema o su sistema de plantillas, mientras que los bloques del cuerpo se editan en la página con contenedores, títulos, textos, imágenes y botones. Los metadatos SEO se configuran aparte. La disponibilidad exacta depende del tema, del editor y de la licencia.
¿Qué etiquetas HTML ayudan al SEO?
Las etiquetas semánticas ayudan a estructurar y comprender el documento, especialmente encabezados y regiones relevantes. Pero no garantizan posiciones: el contenido, su utilidad, la accesibilidad, los enlaces y muchos otros factores también importan. Evita usar etiquetas solo para insertar palabras clave.
¿Qué partes debe tener la home de una empresa?
Como punto de partida: cabecera, hero con propuesta, servicios prioritarios, pruebas de confianza reales, explicación del proceso, CTA y footer. Adapta el orden a lo que el cliente necesita saber para decidir.
Fuentes consultadas y criterio editorial.
Guía revisada el 17 de octubre de 2026. Para explicar el HTML y la accesibilidad se han priorizado referencias técnicas originales; para orientación de diseño y búsqueda se han contrastado recursos sobre UX y páginas comparables en español. Las recomendaciones de estructura son criterios prácticos, no reglas universales ni promesas de resultados.
Sobre el autor y la guía
Esta guía está publicada por Roger Llorens, profesional de diseño web, SEO y marketing digital en Girona. Su objetivo es explicar la estructura de una página web con ejemplos comprensibles y recursos que puedan utilizarse, no solo con definiciones. El esquema visual y la plantilla HTML son ejemplos creados para ilustrar estos conceptos; no proceden de un experimento científico ni equivalen a una medición del rendimiento comercial.
Las características de WordPress, Elementor, los buscadores y los estándares pueden evolucionar. Si necesitas implementar un requisito de accesibilidad o una función concreta, toma la documentación oficial vigente como referencia técnica y comprueba el resultado en tu sitio.
