Exemple concret d'utilisation des balises
Essayons d'utiliser les balises que nous venons de découvrir pour structurer notre page web. Le code ci-dessous reprend toutes les balises que nous venons de voir au sein d'une page web complète :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Zozor - Le Site Web</title> </head>
<body> <header> <h1>Zozor</h1> <h2>Carnets de voyage</h2> </header>
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Blog</a></li> <li><a href="#">CV</a></li> </ul> </nav>
<section> <aside> <h1>À propos de l'auteur</h1> <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p> </aside> <article> <h1>Je suis un grand voyageur</h1> <p>Bla bla bla bla (texte de l'article)</p> </article> </section>
<footer> <p>Copyright Zozor - Tous droits réservés<br /> <a href="#">Me contacter !</a></p> </footer>
</body> </html> |
Ce code peut vous aider à comprendre comment les balises doivent être agencées. Vous y reconnaissez un en-tête, un menu de navigation, un pied de page… et, au centre, une section avec un article et un bloc <aside> donnant des informations sur l'auteur de l'article.
À quoi ressemble la page que nous venons de créer ?
À rien !
Si vous testez le résultat, vous verrez juste du texte noir sur fond blanc (figure suivante). C'est normal, il n'y a pas de CSS ! Par contre, la page est bien structurée, ce qui va nous être utile pour la suite.
Une page bien structurée mais sans CSS
Les liens sont volontairement factices (d'où la présence d'un simple #), ils n'amènent donc nulle part (eh, c'est juste une page de démo) !
Je ne comprends pas l'intérêt de ces balises. On peut très bien obtenir le même résultat sans les utiliser !
C'est vrai. En fait, ces balises sont seulement là pour expliquer à l'ordinateur « Ceci est l'en-tête », « Ceci est mon pied de page », etc. Elles n'indiquent pas, contrairement à ce qu'on pourrait penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous le verrons dans peu de temps maintenant.
À l'heure actuelle, pour tout vous dire, ces balises ont encore assez peu d'utilité. On pourrait très bien utiliser des balises génériques <div> à la place pour englober les différentes portions de notre contenu. D'ailleurs, c'est comme cela qu'on faisait avant l'arrivée de ces nouvelles balises HTML5.
Néanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent à tirer parti intelligemment de ces nouvelles balises. On peut imaginer par exemple un navigateur qui choisisse d'afficher les liens de navigation <nav> de manière toujours visible ! Quand l'ordinateur « comprend » la structure de la page, tout devient possible.
Créé avec HelpNDoc Personal Edition: Création d'aide CHM, PDF, DOC et HTML d'une même source