apercu-div

Structuration page HTML : méthodologie

Après avoir conçu une esquisse et une planche de la page HTML que nous sou­hai­tons mettre en forme, nous pas­sons à l’intégration de notre pro­jet. L’intégration consiste à trans­for­mer notre image en code HTML et CSS.

Iden­ti­fier les boites : struc­tu­ra­tion HTML de la page

La pre­mière étape de notre tra­vail consiste à “décou­per” notre mise en page sous forme de blocs ou de boîtes. Par­tons d’un prin­cipe de mise en page que nous avons créé . Voici com­ment la page s’affichera dans une fenêtre de navi­ga­teur d’ordinateur de bureau.

apercu

Et voici l’intégralité de la page.

apercu-methode

Pas­sons au décou­page. Pour des rai­sons de clarté et de lisi­bi­lité, j’ai passé notre planche en niveau de gris.

apercu-methode-boites00

Ces blocs vont nous per­mettre de déter­mi­ner les dif­fé­rents élé­ments <div>…</div> pour struc­tu­rer notre page HTML. Chaque bloc des­siné cor­res­pon­dra à son début (coin haut gauche) à la balise (en anglais : tag) ouvrante du div (<div>) et à sa fin (coin bas droit) à sa balise fer­mante (</div>).

La balise <div> (pour divi­sion) est un conte­neur (à appré­hen­der comme un cadre) qui peut inclure tous les tags html (tels que les para­graphes les tableaux, les listes, les images …, et éga­le­ment d’autres divi­sions). Elle sert à struc­tu­rer le docu­ment ( par oppo­si­tion à la struc­tu­ra­tion du texte ).
Cet élé­ment est l’un des plus uti­lisé pour struc­tu­rer les pages html en plu­sieurs grandes sec­tions (en tête, par­tie prin­ci­pale, par­tie navi­ga­tion, pied de page …).

C’est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en com­mun : elles créent un nou­veau « bloc » dans la page et pro­voquent donc obli­ga­toi­re­ment un retour à la ligne.

Repor­tons ça sur notre planche.

apercu-methode-div

Nous remar­quons que ces élé­ments sont imbri­qués les uns dans les autres.

L’élément conte­nant tous les élé­ments de la page cor­res­pond à l’élément <body>…</body>.

Le HTML5 iden­ti­fie éga­le­ment cer­tains élé­ments récur­rents de mise en page. Dans notre cas nous avons :

<hea­der> </header>

pour l’en-tête de la page

<article> </article>

pour le bloc regrou­pant le contenu prin­ci­pal de la page

<foo­ter> </footer>

pour le pied de page de la page

Absents de notre exemple, il y a également :

<sec­tion> </section>

Sec­tion géné­rique regrou­pant un même sujet, une même fonc­tion­na­lité, de pré­fé­rence avec un en-tête, ou bien sec­tion d’application web

<nav> </nav>

Sec­tion pos­sé­dant des liens de navi­ga­tion prin­ci­paux (au sein du docu­ment ou vers d’autres pages)

<aside> </aside>

D’après le W3C :

L’élément aside repré­sente une sec­tion de la page qui ren­ferme du contenu qui est tan­gen­tiel­le­ment rela­tif au contenu autour de l’élément aside, et qui peut être consi­déré comme étant séparé de ce contenu. Ces sec­tions sont sou­vent repré­sen­tées par des enca­drés en impri­me­rie.

Nous allons repor­ter ça sur notre maquette.

apercu-methode-HTML5

En ne consi­dé­rant que la struc­tu­ra­tion HTML de page, sans consi­dé­rer le contenu, voici ce que devient notre maquette.

apercu-methode-html51

En sup­pri­mant les contours des encadrés…

apercu-methode-html52

… en orga­ni­sant le texte cor­rec­te­ment, nous obte­nons la struc­tu­ra­tion HTML de notre page :

    <body>
        <header></header>
        <article>
            <div></div>
            <div></div>
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <footer></footer>
        </article>
    </body>

C’est gagné !

Pour aller plus loin

HTML5

www.alsacreations.com

0