Definición y Propósito de los Contenedores HTML

Las capas o contenedores son unos recuadros o espacios rectangulares que pueden colocarse en cualquier parte de la página web. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseño a las páginas HTML.

En estos contenedores, puede situar texto, imágenes, formularios, enlaces, tablas, etc. También puede tener contenedores más «pequeños», como para resaltar una o varias palabras o para definir una celda de una tabla. Los contenedores también sirven para estructurar sus páginas. De esta manera, puede utilizarlos para insertar un encabezado de página, una columna de desplazamiento (un sidebar), un pie de página, una barra de navegación, etc.

Uso y Combinación con CSS

¿Cómo se usan los contenedores? Se combinan con CSS para definir estilos, posiciones y comportamientos. Por ejemplo, la etiqueta <div> se usa para agrupar elementos sin aportar significado, mientras que <section> indica que el contenido tiene una temática común.

Tipos de Contenedores Semánticos y Estructurales

A continuación, se detallan los tipos de contenedores más comunes:

1. Contenedor Genérico: <div>

Podemos insertar una capa o contenedor a través de las etiquetas <div> y </div>. El elemento <div> es uno de los contenedores más antiguos del HTML. Permite crear una capa estructural en la página. En estas capas, podemos situar cualquier contenido, incluso otros contenedores (como otras capas <div>, párrafos, listas, etc.). Estas capas permiten realizar paginaciones con ayuda de contenedores «neutros», es decir, sin contenido semántico definido.

2. Contenedores Semánticos

• Elemento <header>: Aquí va el título de la página web. Permite insertar una zona de visualización para los encabezados.
• Elemento <nav>: En esta sección se colocan las listas, palabras clave o botones para navegar en el contenido de la página web. El elemento <nav> se dedica a la visualización de una barra de navegación con enlaces de hipertexto.
• Elemento <section> o Content: Es la capa donde se va a visualizar, dinámicamente, todo el contenido de la página web. El elemento <section> permite agrupar los elementos que comparten una misma temática.
• Elemento <article>: Es una capa opcional que se puede colocar en una página web. Permite insertar un contenido autónomo. Está calificado como autónomo porque se puede reutilizar en cualquier lugar en el sitio web sin que su comprensión se vea afectada. El uso más habitual es la creación de artículos de blog y de actualidad.
• Elemento <aside>: Es una sección exclusiva para colocar banners o anuncios publicitarios. Adicionalmente, el elemento <aside> permite mostrar un contenido relacionado con un contenido principal al que se le asocia. Esto se corresponde habitualmente con las clásicas barras de desplazamiento (sidebar), las zonas de componentes de interfaz (widgets), los complementos sobre los artículos o cualquier otro contenido textual.
• Elemento <footer>: Sección donde se colocará el año de creación, nombre de la empresa o nombre personal junto con el símbolo de derechos reservados o copyright ©. El elemento <footer> permite insertar una zona de visualización para los pies de página. Estos pies de página se pueden definir para la página o para otra zona de visualización de esta, como un artículo.

Ventajas y Desventajas de Usar Estructuras Contenedoras

Ventajas de usar estructuras contenedoras

• Mejora la accesibilidad.
• Facilita el mantenimiento del código.
• Mejora el SEO (los buscadores entienden mejor la jerarquía del contenido).
• Permite diseños más organizados y responsivos.

El SEO (Search Engine Optimization) es una herramienta que se usa para mejorar el ranking de los sitios web en los motores de búsqueda. El SEO incluye una variedad de métodos, desde la optimización de contenidos hasta la creación de enlaces de calidad y la mejora de las estructuras de los sitios web.

Desventajas (Uso Excesivo de <div>)

• Falta de semántica: La etiqueta <div> no tiene significado propio. No comunica el propósito del contenido que agrupa, lo que dificulta la comprensión para motores de búsqueda y tecnologías de asistencia como lectores de pantalla.
• Código confuso y difícil de mantener: El uso excesivo de <div> genera estructuras poco claras. Es más difícil identificar secciones específicas del sitio. Complica la colaboración entre desarrolladores y el mantenimiento a largo plazo.
• Impacto negativo en SEO y accesibilidad: Las etiquetas semánticas como <section>, <article> y <nav> mejoran el posicionamiento en buscadores. La etiqueta <div> no aporta valor semántico, lo que puede afectar la visibilidad y accesibilidad del sitio.
• Diseño menos estructurado: Al no tener una función específica, la etiqueta <div> puede usarse de forma arbitraria. Esto lleva a diseños desorganizados o inconsistentes si no se combina con buenas prácticas de CSS y JavaScript.

Ejemplos de Estructuras Semánticas

Estructura Semántica Básica

Una estructura semántica básica podría incluir:

• Un encabezado <header> en la parte superior, con un logo y un eslogan.
• Una barra de navegación <nav> en la parte izquierda de la página.
• Toda la actualidad del sitio web se podrá situar en elementos <article>.
• Para terminar, el pie de página <footer> podrá contener las menciones legales, los enlaces de contacto, etc.

Estructura Semántica Elaborada

A continuación, se muestra una segunda estructura más elaborada:

• Un encabezado <header> en la parte superior.
• Más abajo, una barra de navegación <nav> para la navegación general del sitio web (para navegar entre las páginas).
• A la izquierda, una segunda caja <nav> para la navegación secundaria (para los enlaces relacionados directamente con el contenido de la página mostrada).
• A la derecha, un elemento <aside> muestra la información relacionada con el contenido de la página, como los enlaces promocionales, los contenidos relacionados, etc.
• El contenido de la página se muestra en dos elementos <section>, que permiten de esta manera diferenciar correctamente estos dos contenidos.