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.
L'exemple ci-dessous présente une page comportant:
<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>
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>
La suite ici: HTML + CSS