• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Estructurar tu página

Log in or subscribe for free to enjoy all this course has to offer!

Estamos gradualmente llegando al punto. Si nuestra página web no se parece mucho a las páginas que conocemos es porque aún no sabemos cómo diseñar la página.

En general, una página web consiste en un encabezamiento (parte superior derecha), menús de navegación (en la parte superior o en los lados), varias secciones en el centro... y un pie de página (abajo a la derecha).

En este capítulo vamos a ver las nuevas etiquetas HTML para estructurar nuestra página. Estas etiquetas fueron introducidas por HTML5 (antes no estaban disponibles) y nos permitirán decir: «Este es mi encabezado», «este es mi menú de navegación», etc.

De momento no vamos a hacer ningún diseño de página. De hecho, vamos a preparar nuestro documento HTML para ser capaces de hablar del diseño de la página web en los siguientes capítulos.

Etiquetas estructurales HTML5

Voy a mostrarte las nuevas etiquetas introducidas por HTML5 para estructurar nuestras páginas. Verás que no cambiará el aspecto de nuestra página mucho, pero estará bien construida y perfecta para mostrar después.

<header>: el encabezado

La mayoría de las páginas web normalmente tienen un encabezado. La mayoría suelen contener un logo, un banner, el eslogan de tu web, etc.

Tienes que colocar esta información dentro de la etiqueta <header>:

<header>
    <!-- Pon tu encabezado aquí -->
</header>

La figura siguiente, por ejemplo, muestra parte de la página de OpenClassrooms y puedes ver su encabezado.

Etiqueta de encabezado
Etiqueta de encabezado

El encabezado puede contener lo que quieras: imágenes, enlaces, textos, etc.

<footer>pie de página

A diferencia del encabezado, el pie de página normalmente esta en la parte inferior derecha del documento. Contiene información como enlaces de contacto, nombre del autor, informes legales, etc.

<footer>
    <!-- Pon tu pie de página aquí -->
</footer>

La figura siguiente muestra cómo es el el pie de página de la página de OpenClassrooms.

Etiqueta de pie de página
Etiqueta de pie de página

<nav>: enlaces de navegación principales

La etiqueta <nav> tiene que incluir todos los enlaces de navegación principales de la página. Por ejemplo, contendría el menú principal de tu página web.

El menú normalmente toma la forma de una lista con viñetas dentro de la etiqueta <nav>:

<nav>
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="forum.html">Foro</a></li>
        <li><a href="contact.html">Contacto</a></li>
    </ul>
</nav>

En la figura siguiente, puedes ver el menú de navegación principal, que podría usar la etiqueta <nav>.

Nav tag
Etiqueta Nav

<section>: una sección de la página

La etiqueta <section> incluye una porción del contenido según su tema. Generalmente cubre una porción del contenido en el centro de la página.

<section>
    <h1>Sección de mi página</h1>
    <p>Bla bla bla bla</p>
</section>

En la página de inicio de Wikipedia, hay varios bloques que podrían considerarse secciones de página (figura siguiente).

Etiqueta de sección
Etiqueta de sección

<aside>: información adicional

La etiqueta <aside> está diseñada para contener información adicional al documento visto. Esta información está normalmente situada en el lado (aunque no tiene que ser así).

<aside>
    <!-- Pon aquí más información sobre tu contenido -->
</aside>

La página podría contener varios bloques <aside>.

En Wikipedia, por ejemplo, el artículo que se está viendo a menudo tiene un bloque de información adicional a la derecha. Así, la página que describe una estrella (siguiente figura) contiene un bloque dando las características de la estrella (dimensiones, peso, etc.).

Aside tag
Etiqueta aparte

<article>: un artículo independiente

La etiqueta <article> se usa para cubrir una porción de la página que generalmente es independiente. Es una parte de la página que podría ser rechazada en otra página. Este es el caso, por ejemplo, de las noticias (artículos en periódicos o blogs).

<article>
    <h1>Mi artículo</h1>
    <p>Bla bla bla bla</p>
</article>

Por ejemplo, un artículo en la página de OpenClassrooms se muestra en la siguiente figura.

Etiqueta de artículo
Etiqueta de artículo

Resumen

Uf, son muchas etiquetas nuevas para recordar.
¡Afortunadamente, te he hecho un pequeño diagrama (figura siguiente) para ayudarte a recordar lo que hacen!

Secciones de página identificadas por etiquetas
Secciones de página identificadas por etiquetas

Ejemplo práctico del uso de etiquetas

Usemos las etiquetas que acabamos de descubrir en la estructura de nuestra página web. El siguiente código muestra todas las etiquetas que acabamos de ver, en una página web completa:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Zozor - La página web</title>
    </head>

    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Diarios de viaje</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Resumen</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>Sobre el autor</h1>
                <p>¡Soy yo, Zozor! Nací el 23 de noviembre de 2005.</p>
            </aside>
            <article>                
                <h1>Soy un gran viajero</h1>
                <p>Bla bla bla bla (texto del artículo)</p>
            </article>
        </section>
        
        <footer>
            <p>Zozor Copyright - Todos los derechos reservados<br />
            <a href="#">¡Contacta conmigo!</a></p>
        </footer>
        
    </body>
</html>

Este código puede ayudarte a comprender cómo las etiquetas deben colocarse. Puedes ver que contiene un encabezado, un menú de navegación, un pie de página, etc., y , en el centro, una sección con un artículo y un bloque <aside> que ofrece información sobre el autor del artículo.

¿A qué se se parece la página que acabamos de crear?

¡A nada!
Si compruebas el resultado, verás texto negro sobre fondo blanco (figura siguiente). ¡Es normal, no hay CSS! La página está, sin embargo, bien estructurada, lo que encontramos últil para el siguiente paso.

Una página que está bien estructurada pero sin CSS
Una página que está bien estructurada pero sin CSS

No entiendo el objetivo de estas etiquetas. ¡Podrías obtener también el mismo resultado sin usarlas!

Es verdad. De hecho, estas etiquetas sólo están ahí para explicarle al ordenador «Este es el encabezado», «este es mi pie de página», etc. No especifican, al contrario de lo que podríamos pensar, dónde debería estar colocado el contenido. Eso es lo que hace CSS, como vamos a ver.

Para ser honesto, estas etiquetas no son muy útiles por ahora. También podrías usar las etiquetas genéricas <div> para incluir las diferentes porciones de nuestro contenido. De hecho, así es cómo fue hecho antes de la llegada de estas nuevas etiquetas HTML5.

Sin embargo, es muy posible que en e futuro cercano, los ordenadores empiecen a sacar beneficio de estas nuevas etiquetas. ¡Podrías imaginar, por ejemplo, un navegador que elija mostrar los enlaces de navegación <nav> para que siempre estuvieran visibles! Una vez que el ordenador «comprende» la estructura de la página, todo se vuelve posible.

Asegurar la compatibilidad con IE

Las nuevas etiquetas que acabamos de ver sólo han sido reconocidas por Internet Explorer desde su versión 9 (IE9). Esto va a ser un problema porque las versiones antiguas de IE no conocen la etiqueta... no gestionan la página correctamente (no puedes editar su CSS, por ejemplo).

Afortunadamente, esto puede ser resuelto fácilmente usando un script JavaScript Los scripts son pequeños trozos de código que le permiten al usuario interactuar con la web y realizar algunas acciones. Como no nos vamos a preocupar por el JavaScript (no es materia de este curso), ten en cuenta que este tipo de script se llama en las páginas HTML de forma parecida a como los archivos CSS son llamados.

Los archivos JavaScript normalmente tienen la extensión .js. En el código HTML, normalmente estás cituados en la etiqueta <head> con esta etiqueta:

<script src="myscript.js"></script>

La razón por la que te estoy dando una visión general de JavaScrip es que un pequeño trozo de script con el bonito nombre HTML5shiv te permite asegurarte de que las etiquetas que acabamos de ver ( <header>, <footer>, <section>…) se muestran correctamente en las versiones más antiguas de Internet Explorer (IE6, IE7, IE8).. En práctica, simplemente añades las siguientes líneas a tu código:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Introduce este código en la etiqueta <head> como esta:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script>
        <![endif]-->
        <title>Inclusión de HTML5shiv</title>
    </head>

    <body>

    </body>
</html>

¡Y aquí tienes, tu página web ahora se mostrará sin problemas en Internet Explorer!

En resumen

  • Varias etiquetas fueron introducidas con HTML5 para delienar las diferentes áreas al construir la página web:

    • <header>: encabezado;

    • <footer>: pie de página;

    • <nav>: principaes enlaces de navegación;

    • <section>: sección de página;

    • <aside>: información adicional;

    • <article>: artículo independiente.

  • Estas etiquetas pueden anidarse unas con otras. Una sección puede tener así su propio encabezado.

  • Estas etiquetas no están incluidas en el diseño de la página. Sólo le dicen al ordenador qué significa el texto que contienen. También podrías poner el encabezado en la parte baja de la página si quisieras.

  • El código JavaScript HTML5shiv se usa para asegurar que estas etiquetas son reconocidas por versiones de Internet Explorer anteriores a IE9.

Example of certificate of achievement
Example of certificate of achievement