Voici maintenant un exemple d'une page correctement structurée en utilisant les balises de structure HTML5 que nous venons de voir à l'instant.
Cet exemple est présent purement à titre de démonstration de page HTML, sachez cependant qu'il est tout à fait possible de construire une page web autrement ce que nous ne manquerons pas de voir dans la suite de ce tutoriel.
Sachez également qu'il n'y a intentionnellement pas de CSS dans cet exemple, la raison est que l'on se focalisera surtout sur la structure sémantique des éléments pour le moment.
Là encore nous ne manquerons de voir comment mettre en forme ces mêmes balises de structure dans des chapitres futurs.
Voici un exemple de page HTML structurée en utilisant ces balises :
<!DOCTYPE html> <html> <head> <title>Bienvenue sur mon site web</title> <meta charset="utf-8" /> </head> <body> <header> <h1>Mon site</h1> <p>Le site web créé par moi</p> </header> <nav> <ul> <li><a href="http://webtuto.weebly.com">Web Tuto</a></li> <li><a href="#">Accueil</a></li> <li><a href="#">Me contacter</a></li> </ul> </nav> <section> <aside> <h1>À propos de ce site</h1> <p>C'est mon site web et il est trop bien.</p> </aside> <article> <h1>Tralalalère</h1> <p>je lange du poisson au petit déjeuner</p> </article> </section>
<footer> <p>Copyright MonSite - Tous droits réservés</p> </footer> </body> </html>