Estructura documents web

En qualsevol plana web podem determinar una sèrie d'elements: capçalera de la plana, peu de plana, part principal, zona de menús,... HTML 5 incorpora diferents etiquetes que permeten definir les diferents parts d'una plana web en relació al seu contingut. Aquestes etiquetes són:

article
aside
footer
header
main
nav
section

En aquest document s'explica quina és la funcionalitat de cada una d'elles.

L'etiqueta header i footer contenen tota la informació que formen part de la capçalera i del peu de plana de la nostra plana web. Cal tenir en compte que normalment aquesta informació és fixe en tota l'aplicació web.

Alguns elements típics que s'inclouen en la capçalera o en el peu de la plana web són: el logo, data de publicació, títol de la plana web, autor, copyright ...

Etiqueta main

Dins de l'etiqueta main es defineix el contingut principal de la nostra plana web i que serà el centre d'atenció. Es tracta de l'element que ocupa la major part de la plana web i que està centrat en la pantalla.

Etiqueta article

Utilitzarem l'etiqueta article quan tinguem una informació que té sentit per a ella mateixa. Suposem que tenim una plana web d'esports. L'usuari està accedint a la descripció de l'etapa 3 del tour de France. Relacionada amb aquesta informació es mostra un article "Importància de portar el casc quan es va en bicicleta". Tot i que el tema està relacionat, es tracta d'una informació tangencial. Per tant, seria correcte crear una etiqueta article per a separar aquesta informació del contingut principal (descripció de l'etapa 3 del tour de France) de la plana.

Etiqueta section

Utilitzarem l'etiqueta section quan volguem diferenciar diferents parts dins d'un article o bé dins de la part principal de la nostra plana web. Per exemple, si tenim una plana web amb que publica la informació sobre un partit de futbol, podem tenir vàries seccions:

Descripció de les jugades interessants
Equips titulars
Estadístiques

Cada una d'aquestes seccions podrien estar incloses dins d'una etiqueta main .

Etiqueta nav

És habitual en les planes web que incorporin un menú que permeti a l'usuari canviar de plana i poder accedir als continguts d'una forma lògica. Per tant, els menús de navegació per l'aplicació web o índexos per poder accedir a diferents seccions d'una mateixa plana web, seran elements habituals dins de l'etiqueta nav .

Etiqueta aside

L'etiqueta aside la podem utilitzar per a separar una informació del contingut principal de la plana web. Suposem que estem dissenyant una plana sobre jocs d'ordinador i consoles. En la plana sobre la descripció del joc "FIFA 2017" volem afegir informació sobre alternatives al "FIFA 2017", comentaris dels usuaris ... Una bona opció per a incloure tota aquesta informació seria utilitzar l'etiqueta aside .

Cal tenir en compte que una etiqueta aside pot ser un contenidor d'altres etiquetes d'estructura. Així, per exemple, podríem tenir vàries seccions que a la vegada continguessin vàries articles.

Exemple utilització


<!DOCTYPE html>
<html lang="en"> 
    <head>     
        <meta charset="UTF-8"> 
        <title>Sports+</title> 
    </head> 
    <body> 
        <header>
            <p>
                Sports news - Publicació de notícies esportives
            </p>
        </header>
        <h1>Tour de france 2019</h1>
        <nav>
            <ul>
                <li><a href="basquet.html">Bàsquet</a></li>
                <li><a href="ciclisme.html">Ciclisme</a></li>
                <li><a href="futbol.html">Fútbol</a></li>
                <!-- Altres esports -->
            </ul>
        </nav>
        <aside>
            <section class="anuncis">
                <h2>Base esports</h2>
                <p>Material esportiu ...</p>
                <h2>Bar sports</h2>
                <p>Cafè i esports ...</p>
            </section>
            <section class="noticies">
                <h2>Chris Frooem</h2>
                <article>
                    <header>
                        <p>Font: ...</p>
                        <p>Data publicació: ...</p>
                    </header>
                    <h2>Anul·lada la sentència</h2>
                    <p>El ciclista ...</p>
                    <h3>Antecedents</h3>
                    <p>...</p>
                </article>

            </section>
        </aside>
        <main>
            <nav>
                <ul>
                    <li><a href="#etapesm">Etapes de muntanya</a></li>
                    <li><a href="#etapesc">Etapes contrarellotge</a></li>
                    <li><a href="#etapesa">Altres etapes</a></li>
                </ul>
            </nav>
            <section>
                <h2  id="etapesm">Etapes de muntanya</h2>
                <!-- Tota la informació de les etapes de muntanya -->
            </section>
            <section>
                <h2 id="etapesc">Etapes contrarellotge</h2>
                <!-- Tota la informació de les etapes de contrarellotge -->
            </section>
            <section>
                <h2 id="etapesa">Altres etapes</h2>
                <!-- Tota la informació de les etapes de la resta d'etapes -->
            </section>
        </main>

        <footer><p>Publicat: 17 d'agost 2018</p></footer>
    </body> 
</html>

Estructura de documents