Chapitre 3

Mettre en page avec les balises HTML 5

Nouvelles balises

La version 5 du HTML a apporté des nouvelles balises des mise en page, qui réagissent comme les boîtes DIV. Ces balises ajoutent une indication de sens au HTML.
Le langage reprend les usages du XHTML qui consistait à employer des DIV et à nommer certains éléments comme le haut de page header (class="header"), le bas de page footer (class="footer") ...

Ces balises HTML 5 structurent la page :

  • header : haut de page
  • nav : zone de navigation
  • main : boîte de contnu principal
  • section : espace signifiant de zone de contenu
  • aside : zone latérale de contenu
  • article : zone de contenu secondaire en général inséré dans une section
  • footer :zone de bas de page.

Voici un exemple de code HTML 5 simple mettant en page des contenus employant une section, un article et une zone latérale.

<body> 
<header> 
<h1> Nom de mon site</h1> 
</header> 
<nav> 
</nav> 
<section> 
<aside> article sur le côté</aside> 
<article> <h2> titre </h2> 
<h3> sous titre </h3> 
<p>Texte bla bla bla</p> 
</article> 
</section> 
<footer>copyright</footer>
</body>

Voici un exemple en ligne qui emploie cette structure : voir l'exemple.

Voici le style qui a été appliqué à ces balises :

body {
	margin:0 auto; 
	padding:0;
	font-family: Verdana, Arial, sans-serif;
		}
header {background:#F60;  width:100%;height:150px; }	
main {width:95%;margin-left:auto; margin-right:auto; }
	h1 {background: url(../images/image.jpg) no-repeat;
		vertical-align:middle;
		text-indent:300px;
		padding-bottom:55px;
		line-height:150px; 
		}
section{ background-color:#FCC;padding:10px;min-height:400px;}
aside {
	background-color:#FFF;
	border: #CCC dotted 1px; 
	padding:10px;
	margin:5px;
	display:inline-block; 
	width:200px;
	height:200px;
	border-radius:10px;
	position: relative;
    box-shadow: 0px 2px 5px #1c1a19;
    font-size: 0.9em;
	float:right;
	vertical-align:top;
	}
nav {
background-color:#F99; 
width: 133px; 
display:inline-block;
min-height:420px;
float:left;
margin-right:10px;
font-weight: bold;
}
ul {margin:0; padding:0;text-align:center;list-style:none;}
ul li {line-height:50px;border-bottom:#F63 solid thin;width:133px;}
ul li a {text-decoration:none; color:#033;display:block;}
ul li a:hover{color:#FFF;background-color:#F60;}
footer  {
background-color:darkgray; 
height:100px;
text-align: center;
color:#fff; 
}