Sé el primero en comentar
La estructura de una página web está compuesta por una serie de elementos estructurales que se utilizan para dar forma a un documento web. Estos elementos estructurales se conocen como «etiquetas» de html. Cada etiqueta tiene una función específica y, al combinarse, permiten crear un documento web completo.
Cabe destacar que la estructura web no es lo mismo que la arquitectura web.
Mientras que la estructura web determina las diferentes partes de una página web, la otra determina cómo está estructurada en su totalidad, es decir, de forma global.
Diferenciar la estructura de una página es prácticamente obligatorio para cualquier diseñador web en barcelona o profesional que se dedique a crear páginas web.
Definición: Qué es una estructura Web
En resumen, la estructura web está compuesta por una serie de elementos estructurales que se utilizan para dar formato y estilo a un documento web.
Entonces, cuando hablamos de estructura web nos referimos a la estructura HTML que sigue cualquier página web. Es la manera más efectiva de hacer una página web dividiéndola en zonas o elementos.
Partes de la estructura de una página web
A continuación veremos las diferentes partes esta estructura e indagaremos un poco más sobre cada una de ellas.
Header
El header (encabezado) de una página web en html es la parte que se encuentra en la parte superior de la misma y que generalmente contiene el logo de la marca, el título de la página y algunos botones de navegación. A veces, el header también se utiliza para colocar un pequeño banner publicitario o alguna otra información relevante para los usuarios. Sin embargo, en la mayoría de los casos, el header suele ser un elemento muy simple que no contiene mucha información.
En cualquier caso, el header es un elemento importante de una página web ya que es lo primero que ven los usuarios cuando acceden a ella y, por tanto, es fundamental que transmita la imagen y los valores de la marca de manera correcta. Además, el header suele ser el lugar donde se encuentra el link principal para acceder a la home page, por lo que es importante que sea fácil de encontrar.
En resumen, el header de una página web en html es un elemento importante que se encarga de dar la bienvenida a los usuarios y que les permite acceder fácilmente a la home page de la misma.
Body
El body de una página web es el área que contiene todo el contenido visible de la página, es decir, todo lo que se muestra en pantalla cuando se accede a la misma.
Se encuentra entre la sección de head y el footer, y su contenido puede incluir texto, imágenes, videos o cualquier otro elemento que se desee mostrar en la página. El body también es responsable de colocar todos los elementos en su lugar correcto utilizando etiquetas HTML. Sin el body, una página web no sería capaz de mostrar nada al usuario.
Es importante saber que la etiqueta body engloba la parte del header y del footer.
Sidebar
El sidebar en HTML es un elemento que se utiliza para mostrar información adicional o de navegación en una página web. Se coloca generalmente a un lado del contenido principal de la página. El sidebar puede contener diversos elementos, como enlaces, imágenes, widgets y formularios. Puede ser estático o dinámico.
En muchas páginas web, el sidebar suele ser el lugar donde se colocan los enlaces de navegación principales. Otros sitios web lo usan para mostrar información adicional como la fecha o el clima. Algunos sidebar también contienen widgets, que son pequeños programas que hacen una función específica. Por ejemplo, un widget de reloj digital puede mostrar la hora actual en un sidebar.
Los sidebar también pueden contener formularios, que permiten a los usuarios ingresar datos. Los formularios pueden ser utilizados para realizar diversas acciones, como buscar contenido en un sitio web o registrarse para un servicio.
En algunos sitios web, el sidebar se actualiza dinámicamente para mostrar información relevante para el usuario. Por ejemplo, si un sitio web tiene un sidebar que muestra los artículos más populares, este sidebar se actualizará para mostrar los artículos más populares en función de las acciones realizadas por el usuario.
Footer
El footer es una sección que se encuentra al final de un documento o página web. En general, suele contener información adicional como el nombre del autor, la fecha de creación o actualización, contacto o enlaces a otros sitios.
En HTML, el footer se define con la etiqueta. Esta etiqueta puede incluir otros elementos como títulos, párrafos, listas o incluso tablas. Algunos diseñadores prefieren utilizar divs anidados para crear su footer en lugar de la etiqueta que, aunque sigue siendo válido, se considera obsoleto.
Ejemplo de estructura Web
Por ejemplo, en nuestro caso, en la página de Atrahunt se puede apreciar de forma muy fácil todas las secciones que hemos visto anteriormente.
Empezando por el header, que engloba la parte del logo y del menú de navegación principal.
Ejemplo de encabezado o header
Empezando por el header, que engloba la parte del logo y del menú de navegación principal.
Como se puede apreciar, el header de la página es algo minimalista con unos pocos elementos principales de navegación.
Ejemplo de cuerpo o body
El cuerpo de la página presenta toda la información importante como hemos vista antes. En el siguiente ejemplo se muestras varias secciones de la página principal de atrahunt.
Si hablamos de un artículo de blog o página similar el body sería la parte del contenido, desde el título de la página hasta el final (incluyendo también el header y el footer).
Ejemplo de barra lateral o sidebar
En nuestro caso, tenemos el sidebar justo encima del footer. Es decir, utilizamos la última sección que aparece antes del footer cómo sidebar para presentar algunos widgets que pueden ser de utilidad para el usuario o que nos interesa mostrar. Por ejemplo, artículos destacados o últimas noticias, boletín de notícias, llamadas a la acción, etc.
En este caso es un sidebar dinámico que muestra los artículos relacionados del propio post.
Ejemplo de pie de página o footer
Y por último, tenemos nuestro footer, sí, parece muy simple, pero es muy efectivo y contiene toda la información que el usuario quiera disponer en caso de no encontrarla en otro sitio. Además, ofrece varias opciones de navegación positivas tanto a nivel de SEO, como para la experiencia de usuario.
Y hasta aquí el ejemplo de estructura web de una página web, como has podido comprobar es algo muy fácil de detectar y que todo diseñador web o persona que trabaje con sitios web ha de conocer.