Chapitre 2 : Balises structurantes CSS 3ème STI
I. Les balises structurantes :
I.1. Les balises de groupement : <DIV> et <SPAN>
Les balises de groupement sont de deux types
•block: les balises ouvrante et fermante produisent un retour à la
ligne,
•inline: ces balises se trouvent à l’intérieur de balises block et ne
produisent pas de retour à la ligne.
Les balises universelles :
Il existe deux balises universelles dont l’utilisation devrait être
uniquement réservée à la mise en forme associée avec des styles CSS, car elles n’ont pas de
portée sémantique:
•<div>est de type block et représente un «bloc» de page,
•<span>est de type inline et concerne donc une portion de paragraphe.
II. Les balises HTML5
Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui
constituent la page web :
<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux
de navigation ;
<section> : section de
page ;
<aside> : informations
complémentaires ;
<article> : article
indépendant.
II.1. Exemple de
page web avec des
balises structurantes
:
Chapitre 2 : Balises structurantes CSS 3ème STI
III. La balise <header> : en-tête
La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le
plus souvent un logo, une bannière, le slogan de votre site…
Vous devrez placer ces informations à l'intérieur de la balise <header> :
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>
IV. La balise <footer> : pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des
informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>
V. La balise <nav> :
La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez
par exemple le menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
VI. <section> : une section de page
La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe
généralement une portion du contenu au centre de la page.
<section>
<h1>
Ma section de page
</h1>
<p> </p>
</section>
Chapitre 2 : Balises structurantes CSS 3ème STI
VII. <aside> : informations complémentaires
La balise <aside> est conçue pour contenir des informations complémentaires au document que
l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une
obligation).
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>
VIII. Exemple concret d’utilisation des balises structurantes
Résultat sans mise en forme
<body>
<header>
<h1>Recettes cuisine</h1>
<h2>Cuisine Tunisienne</h2>
</header>
<nav>
<ul>
<li><a href="#">Gâteaux</a></li>
<li><a href="#" > Pattes</a></li>
<li><a href="#"> SaladeS</a> </li>
</ul>
</nav>
<section>
<aside>
<h1>À propos de l'auteur</h1>
<p>C'est moi, Foulen ! Je suis né un 14
Janvier 1994.</p>
</aside>
<article>
<h1>Je suis un grand
Chef de cuisine</h1>
<p> (texte de l'article)
</p>
</article>
</section>
<footer>
<p>Copyright Foulen - Tous droits
réservés<br />
<a href="#">Me contacter !</a>
</p>
</footer>
</body>
</html>
19
Chapitre 2 : Balises structurantes CSS 3ème STI
IX. Mise en forme de l’exemple précédent avec feuille de style css :
X. Style.css
Résultat avec mise en forme:
1
/
4
100%
