Après avoir construit notre maquette de site web et défini le cahier des charges, il est temps d'organiser le contenu de notre site web en utilisant HTML. En d'autres termes, il faut créer le squelette de notre site web.
Pour cela je vais créer quatre blocs à l'aide des balises de structure : <header>, <nav>, <section>, <footer>. Ce qui correspond exactement aux blocs que je veux mettre en place sur mon site web.
Je ne vais pas utiliser les balises <aside> et <article> qui n'ont pas trop d'utilité dans mon exemple (mais libre à vous de les rajouter si vous le désirez).
À l'intérieur de ces blocs, ou même à l'extérieur si vous le désirez, on va utiliser des balises <div> et évidemment des paragraphes.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon site !</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header><h1>Découvrez mon site web</h1><p>le meilleur site du oueb (c'est ma mamie qui l'a dit)</p></header> <nav><ul><li><a href="#">Accueil</a></li> <li><a href="#">Mes projets</a></li> <li><a href="#">À Propos</a></li></ul></nav> <section><h1>j'aime le oueb</h1> <p>le web c'est cool bla bla bla [...] bla bla bla bla !</p></section> <footer><p>copyright moi - tous droits réservés<br /><a href="#">me contacter</a></p></footer> </body> </html>
Et voilà le squelette de notre site web, parfaitement organisé en utilisant le langage HTML.
On aurait pu rajouter des attribut ID et CLASS aux balises pour bien les différencier mais on n'en aura même pas besoin ! Comme quoi, créer un site web est d'une facilité déconcertante.