HTML - Les div, les classes et identifiants

Afin de pouvoir mettre en forme une page HTML à l'aide d'une feuille de style (CSS), il faut structurer la page à l'aide des balises neutres div, span ainsi que les attributs class et id.

div_classes_identifiants.html

L'exemple ci-dessous présente une page comportant:

1 entête avec titre général

2 articles (image + texte + lien)

1 pied de page avec formulaire de contact

<DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title> HTML - Les div, les classes et identifiants </title>
</head>
<body>
<div>
<h1> FREAKY FIGHTERS </h1>
</div>
<div>
<h2> BOB SAPP </h2>
<img src="images/bob-sapp_01.jpg" />
<p>
Bob "The Beast" Sapp, né le 22 septembre 1973 à Colorado Springs dans le Colorado, est un célèbre combattant américain de mixed martial arts et de kickboxing ainsi qu'un ancien catcheur et un ancien joueur de football américain.
</p>
<p> <a href = "http://fr.wikipedia.org/wiki/Bob_Sapp" > source wikipédia </a> </p>
</div>
<div>
<h2> CHOI HONG MAN </h2>
<img src="images/choi-hong-man_01.jpg" />
<p>
Hong-Man Choi est un combattant né le 30 octobre 1980 en Corée du Sud.
</p>
<p> <a href = "http://fr.wikipedia.org/wiki/Choi_Hong-man"> source wikipédia </a> </p>
</div>
<div>
<p> <h3> Thomas Ricordeau (CC) </h3> </p>
<p> <a href = "mailto:thomas.ricordeau@gmail.com"> contact </a> </p>
</div>
</body>
</html>

structurer la page

Chaque partie de la page est encadrée par des balises div qui font office de conteneur.

<DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title> HTML - Les div, les classes et identifiants </title>
</head>
<body>
<div id= "entete">
<h1> FREAKY FIGHTERS </h1>
</div>
<div id="article01" class="americanfighter">
<h2> BOB SAPP </h2>
bob
<img src="images/bob-sapp_01.jpg" />
<p class= "contenu">
Bob "The Beast" Sapp, né le 22 septembre 1973 à Colorado Springs dans le Colorado, est un célèbre combattant américain de mixed martial arts et de kickboxing ainsi qu'un ancien catcheur et un ancien joueur de football américain.
</p>
<p class= "source"> <a href = "http://fr.wikipedia.org/wiki/Bob_Sapp" > source wikipédia </a> </p>
</div>
<div id="article02" class="coreanfighter">
<h2> CHOI HONG MAN </h2>
<img src="images/choi-hong-man_01.jpg" />
<p class= "texte">
Hong-Man Choi est un combattant né le 30 octobre 1980 en Corée du Sud.
</p>
<p class="source"> <a href = "http://fr.wikipedia.org/wiki/Choi_Hong-man"> source wikipédia </a> </p>
</div>
<div id="piededepage">
<p> <h3> Thomas Ricordeau (CC) </h3> </p>
<p> <a href = "mailto:thomas.ricordeau@gmail.com"> contact </a> </p>
</div>
</body>
</html>

Les balises et les attributs

div: balise conteneur (avec saut de ligne)

class: balise classe, multiple, elle peut cibler plusieurs éléments

id: balise identifiant, unique elle cible un seul élément

span: balise conteneur (sans saut de ligne)

La suite ici: HTML + CSS