Entrar al aula
×

Las capas en HTML5

Con la utilización de las divisiones, las cuales son llamadas capas por muchos desarrolladores, podremos crear distintas secciones dentro del contenido de la página, dependiendo del significado que tenga dicho contenido. Dichas secciones además podrán ser situadas en cualquier punto de la página y se le podrán asociar hojas de estilos.

Por lo tanto, se puede afirmar que, mediante el uso de divisiones, lo que se pretende es tener más facilidades a la hora de poder establecer un diseño sobre un contenido determinado. Al contrario que con los marcos, el uso de las divisiones es lo más recomendado a la hora de definir la estructura de la página Web.

Definición de capas

Para poder definir una división en HTML, es necesario utilizar la etiqueta <div></div>. Además, en la definición de la etiqueta, para poder asignarle estilos será recomendable utilizar el atributo id para asociarle un nombre identificativo mediante el cual definiremos los estilos para la sección. También existe la posibilidad de utilizar el atributo class, que permite definir una clase con unos estilos que puedan ser comunes a varias secciones.

Una vez que hemos definido la división podremos establecer en su interior todo el contenido que queramos mostrar en ella. Además, esta etiqueta permite utilizar un atributo para modificar sus propiedades, que es el siguiente:

align
Este atributo no está soportado en HTML5, pero con él se puede establecer la alineación del contenido que se defina dentro de la sección. Admite los valores left, right, center y justify.

Todas las demás características que se quieran modificar en cada sección hará necesario la utilización de estilos.

A continuación, vemos un ejemplo de cómo se puede definir una sección para el pie de una página Web:

 <div id="pie">Copyright de la página Web</div>
Además de la etiqueta div, HTML5 incorpora nuevas etiquetas para definir la estructura de la página Web y que también ayudan a identificar de una manera más fácil el contenido que se define en su interior. Se recomienda su uso para no utilizar en todas las secciones la etiqueta div y para aportar un mayor significado semántico a los contenidos que los motores de búsqueda Es un sistema informático que se encarga de buscar por los diferentes archivos que componen los sitios Web de Internet, almacenando en sus bases de datos las palabras clave que se encuentren en los mismos y que serán la base de las futuras búsquedas que se hagan desde los buscadores de Internet. vayan a indexar.

Dichas etiquetas son las siguientes:

<header>

Con esta etiqueta podemos declarar la cabecera que tendrá la página Web. Podemos incluir por ejemplo un título para la página, o un menú de navegación hacia los distintos apartados de la Web. Otro de los elementos que se definen generalmente dentro de esta etiqueta es el logotipo de la Web.

Pueden añadirse tantos elementos header como se considere necesario, pero no podrán estar situados nunca dentro de los elementos footer, address u otro header.

A continuación, vemos un ejemplo de la definición del elemento header en una página Web:

 <header>
    <h1>Título de la página Web</h1>
    <p>Información sobre la página Web</p>
</header>
<nav>

Utilizaremos esta etiqueta para declarar un menú de navegación hacia los distintos apartados que tenga la página Web. No es necesario que todos los enlaces de la página se declaren en el interior de esta sección, sino únicamente los utilizados como menú para la Web. Además, el uso de esta etiqueta mejora la accesibilidad Es una norma mediante la cual se busca que la mayoría de usuarios puedan utilizar una página Web correctamente, independientemente de la discapacidad que sufran o de las características del equipo que utilicen para acceder a la Web. Para ello es necesario seguir una serie de pautas que se definen por la WAI o Iniciativa para la Accesibilidad Web, que es un organismo creado por el W3C. de la página, ya que hay herramientas como los lectores de pantalla, que pueden identificar el menú de forma rápida para facilitar la navegación al usuario.

A continuación, vemos un ejemplo de la definición del elemento nav en una página Web:

 <nav>
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="nosotros.html">Nosotros</a></li>
        <li><a href="contacto.html">Contacto</a></li>
    </ul>
</nav>
<article>

Mediante el uso de esta etiqueta se puede definir un contenido determinado que puede ser externo a la página Web, como por ejemplo una noticia de un periódico, un mensaje de un foro, etc. Este elemento suele utilizarse cuando un contenido tiene el mismo sentido si se separa del resto del contenido de la página Web. Además, dentro de un elemento article también pueden definirse los elementos header y footer para establecer una cabecera y un pie para el contenido.

A continuación, vemos un ejemplo de la definición del elemento article en una página Web:

 <article>
    <h2>Título de la noticia</h2>
    <p>Contenido de la noticia</p>
</article>
<section>

Esta etiqueta define una sección que se quiere establecer para agrupar un contenido determinado, como por ejemplo por capítulos, una introducción al contenido, etc. Generalmente el contenido de este elemento también tiene un encabezado, y su uso solo está recomendado cuando el contenido no puede ser definido en los elementos article, nav o aside.

A continuación, vemos un ejemplo de la definición del elemento section en una página Web:

 <section>
    <h1>Encabezado</h1>
    <p>Contenido</p>
</section>
<aside>

Usando esta etiqueta se puede definir un contenido que está relacionado con otra parte de la página Web, y también para definir un determinado contenido que sirva como complemento del de la Web, como por ejemplo definiciones de términos, enlaces a páginas relacionadas, etc.

A continuación, vemos un ejemplo de la definición del elemento aside en una página Web:

 <aside>
    <h3>HTML</h3>
    <p>HTML es un lenguaje...</p>
</aside>
<footer>

Usaremos esta etiqueta para definir un contenido que quiera ser mostrado en el pie de página de la Web, como por ejemplo el autor de la página Web, los derechos de autor, etc. Pueden definirse tantos elementos footer como sean necesarios dentro de la página Web.

A continuación, vemos un ejemplo de la definición del elemento footer en una página Web:

 <footer>
    <p>Página Web desarrollada por ...</p>
</footer>
<address>

Con esta etiqueta se puede definir cierta información relacionada con el autor del contenido de la página Web, como por ejemplo sobre una noticia, sobre la propia página Web, etc. A la hora de definir este elemento habrá que tener en cuenta que la información definida en su interior estará relacionada con el contenido de su elemento padre. Es decir, si se define dentro de un article se establecerá información sobre el autor de dicho contenido.

Generalmente, cuando la información que se quiere mostrar está relacionada con el autor de la página Web, el elemento address debe estar definido dentro del elemento footer.

A continuación, vemos un ejemplo de la definición del elemento address en una página Web:

 <address>
    Nombre del autor<br>
    E-mail<br>
    Dirección...
</address>
Actividad de autoevaluación: Divisiones con capas

Creación de capas  

Mediante la definición de varias divisiones dentro de la página Web podemos crear la estructura en la que posteriormente añadiremos el contenido que queremos mostrar a los usuarios de la Web. Generalmente, a la hora de desarrollar una página Web podemos definir las siguientes secciones:

1
Cabecera
2
Menú de navegación
3
Contenido
4
Pie

 

Cabecera

Por lo tanto, a la hora de definir la estructura de una página Web debemos empezar por la parte superior de la página, es decir, por la cabecera, e ir bajando hasta la parte inferior, hasta el pie. Así que, para comenzar a definir la estructura, empezaremos estableciendo la cabecera, y para ello tendremos que utilizar la etiqueta <header>. En su interior podremos colocar un logotipo identificativo para la página Web, y también un título, entre otras cosas.

A continuación, vemos el código HTML necesario para poder definir la cabecera de la página Web:

 <header>
    <img src="logotipo.png" alt="Logotipo de la página">
    <h1>Bienvenidos a mi página Web</h1>
</header>
Menú

Una vez que ya hemos definido la cabecera, vamos a crear un menú de navegación justo debajo, a través del cual los usuarios puedan acceder a cualquiera de los apartados del sitio Web. Para ello tendremos que utilizar la etiqueta <nav>, y en su interior tendremos que colocar todos los enlaces a las distintas páginas del sitio Web. Al establecer los estilos para esta sección, es conveniente que los elementos del menú aparezcan de forma horizontal y siempre en el mismo sitio, para que el usuario no se pierda.

A continuación, vemos el código HTML necesario para poder definir el menú de la página Web:

 <nav>
    <a href="inicio.html">Inicio</a>
    <a href="noticias.html">Noticias</a>
    <a href="empresa.html">Nuestra empresa</a>
    <a href="contacto.html">Contactar</a>
</nav>
Contenido
Lo siguiente que tendremos que hacer es definir la estructura para el contenido principal de la página Web. Para ello utilizaremos varias etiquetas, ya que por ejemplo podemos crear un determinado artículo que tenga una cabecera y un pie, además de la información del propio artículo. Por lo tanto, para comenzar a definir el artículo utilizaremos la etiqueta <article>.

En su interior lo primero que haremos será crear una cabecera con el título del artículo, por lo que tendremos que utilizar la etiqueta <header>. Debajo tocará establecer la información del artículo, para lo que podemos utilizar las etiquetas <p>. Para acabar la redacción del artículo podemos añadirle un pie mediante la etiqueta <footer>, en la que definiremos la información respecto al autor del artículo.

A continuación, vemos el código HTML necesario para poder definir un artículo en la página Web:

 <article>
    <header>
        <h1>Título del artículo</h1>
    </header>
    <p>Contenido del artículo</p>
    <footer>
        <p>Artículo escrito por...</p>
    </footer>
</article>
Pie

Por último, solamente nos quedará definir el pie para la página Web, donde se puede colocar cierta información respecto al autor de la página Web, cualquier información de contacto, logotipos de la página con un tamaño menor que en la cabecera, información sobre los derechos de autor de la Web, etc. Para ello tendremos que utilizar la etiqueta <footer>.

A continuación, vemos el código HTML necesario para poder definir el pie de la página Web:

 <footer>
    <p>Todos los derechos reservados</p>
    <p>Página Web desarrollada por...</p>
    <img src="logotipo.png" alt="Logotipo de la página">
</footer>

Si juntamos las distintas secciones que acabamos de crear para la página Web, vemos que la estructura final queda de la siguiente manera:

 <!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Estructura de la Web</title>
    </head>
    <body>
        <header>
            <img src="logotipo.png" alt="Logotipo de la página">
            <h1>Bienvenidos a mi página Web</h1>
        </header>
        <nav>
            <a href="inicio.html">Inicio</a>
            <a href="noticias.html">Noticias</a>
            <a href="empresa.html">Nuestra empresa</a>
            <a href="contacto.html">Contactar</a>
        </nav>
        <article>
            <header>
                <h1>Título del artículo</h1>
            </header>
            <p>Contenido del artículo</p>
            <footer>
                <p>Artículo escrito por...</p>
            </footer>
        </article>
        <footer>
            <p>Todos los derechos reservados</p>
            <p>Página Web desarrollada por...</p>
            <img src="logotipo2.png" alt="Logotipo de la página">
        </footer>
    </body>
</html>

 

Actividad de autoevaluación: Uso de capas

 

Utilización de las capas 

Gracias a las divisiones que podemos hacer en las páginas Web, conseguimos dotar a las secciones de contenido formato específico mediante las hojas de estilos. Además, una de las ventajas respecto a los frames es que permiten a los buscadores que indexen la página Web de manera correcta. Incluso permiten mejorar la accesibilidad de la Web, puesto que los usuarios que necesiten una herramienta externa podrán conocer en qué parte de la página se encuentran.

Por lo tanto, se puede afirmar que cuando se quiere definir la estructura de la página Web es muy importante utilizar las distintas etiquetas para realizar divisiones, ya que actualmente es el estándar que se sigue.