HTML5 : Les nouvelles balises structurantes

De plus la boite "section" doit contenir deux boites "article" l'une à côté de l'autre

Aspect type de chaque page

La solution HTML4 (extraits du code)

La feuille de style

		* {margin : 0px ; padding: 0px ; }
		body {width : 1000px ; margin  : 20px auto 20px auto ; }
		#header,#nav,#section,#footer {background : lime ; width : 100% ; border : 1px solid black ; margin-top : 10px ; 
			box-shadow : 5px 5px 5px grey;  }
		#header, #nav, #footer {min-height : 50px ; }
		#section {min-height : 350px ; }
		.article {float : left ; height : 300px ; width : 48% ; margin-left : 1% ; margin-right : 1% ; background : white ;  }
		h1,h2 {text-align : center ;  }

Dans la feuille de style (qui serait externalisée dans la version définitive du site) on définit les quatre grandes divisions en les identifiant header, nav, section et footer. Par contre la boîte 'article' est définie sous forme d'une classe puisqu'elle ne sera pas unique dans la page.

Vous savez que par défaut les boîtes se dessinent les unes en dessous des autres (positionnement normal des boîtes). Or nous voulons que les deux boîtes "article" soient côte à côte donc nous rajoutons le mode de positionnement le plus simple : le flottement. Ici les deux boîtes "article" vont "flotter" en partant de la gauche : float : left

Le code HTML

... <body> <div id = 'header'> <h1>la boîte header : en-tête de page</h1> </div> <div id = 'nav'> <h1>la boîte nav : menu de navigation</h1> </div> <div id ='section'> <h1>la boîte section : le corps de la page</h1> <div class = 'article'> <h2>Une boîte article </h2> </div> <div class = 'article'> <h2>Une boîte article </h2> </div> </div><!--fin section--> <div id ='footer'> <h1>la boîte footer : pied de page</h1> </div> </body> ...

Dans la partie body de la page on dessine grâce à la balise de type "block" DIV et via l'attribut ID ou class.
Notez le nombre élevé de balises fermantes DIV. Pour s'y retrouver il faut bien indenter le code et commenter le code.

La solution HTML 5 (extraits du code)

Emploi des nouvelles balises d'organisation (ou structurantes) de HTML5.

Examinons d'abord, une fois n'est pas coutume le HTML !

Le code HTML

... <body> <header> <h1>la boîte header : en-tête de page</h1> </header> <nav> <h1>la boîte nav : menu de navigation</h1> </nav> <section> <h1>la boîte section : le corps de la page</h1> <article> <h2>Une boîte article </h2> </article> <article> <h2>Une boîte article </h2> </article> </section> <footer> <h1>la boîte footer : pied de page</h1> </footer> </body> ...

On utilise les nouvelles balises structurantes header, nav, section, article, aside et footer introduites par HTML 5. Ces balise sont des conteneurs (balises doubles) et sont nativement de type block comme DIV. C'est à dire qu'elles définissent des boites.
Cette solution est beaucoup plus claire ; la structure de la page apparaît très clairement alors que dans la version ancienne on se perd un peu dans la multiplication des DIV surtout si le code n'est pas indenté ...

Le code CSS

		* {margin : 0px ; padding: 0px ; }
		body {width : 1000px ; margin : 20px auto 20px auto; }
		header,nav,section,footer {background : lime ; width : 100% ; border : 1px solid black ; margin-top : 10px ; 
			box-shadow : 5px 5px 5px grey; }
		header, nav, footer {min-height : 50px ; }
		section {min-height : 350px ; }
		article {float : left ; height : 300px ; width : 48% ; margin-left : 1% ; margin-right : 1% ; background : white ;  }
		h1,h2 {text-align : center ;  }

Comme sélecteurs CSS nous avons désormais ces nouvelles balises structurantes.

Liste des balises structurantes

Dans l'exemple précédent j'ai utilise cinq nouvelles balises : header, nav, section, article, footer.
Mais il existe aussi les balises main et aside
La balise main doit contenir tous les éléments de la page à l'exception de l'en-tête (header) et du pied (footer). Je ne l'ai pas utilisé dans l'exemple car elle n'est pas encore reconnue par IE ... A mon humble avis elle fait donc double emploi avec SECTION.
La balise aside doit être utilisée pour contenir des compléments ; des informations non essentielles donc créer des encadrés. En général cette boite apparait sous forme d'un volet latéral à côté de section.
On pourra,par exemple, imaginer que les boites aside soient masquées dans le cadre d'un affichage de la page sur un petit écran.
Retour menu