Au premier regard, effectuer une navigation peut représenter un défi. Cependant, quand on observe et qu'on décortique chacun des éléments nécessaires, cette méthode devient davantage plus simple à comprendre.

Premièrement, il est question d'une navigation, donc c'est important d'englober le tout dans une balise <nav>. Comme il s'agit d'une liste, il est essentiel d'utiliser la balise de création de liste <ul> (unordered list) afin de structurer chacun de mes éléments <li>. Le simple fait de mettre des <li> ne suffit pas à créer la navigation! Nous sommes toujours dans un principe de créer une liste comme si nous étions dans Word à ce point-ci. La magie s'opère dès que nous intégrons, pour chacune des balises <li>, une balise <a>. C'est cette dernière balise qui s'occupe de créer le lien sur mon libellé (le nom du bouton) à l'intérieur de celle-ci.

Il est important de garder à l'esprit qu'une navigation ne se résume pas à mettre des balises <a>. Il faut aussi voir l'envers du décor afin de s'assurer que les liens seront fonctionnels au final. C'est important que les liens utilisés puissent refléter la réalité du positionnement des fichiers à l'intérieur du dossier où l'on retrouve l'ensemble des fichiers nécessaire à la conception du site. Il est question plus spécifiquement du principe d'adresse relative au fichier ou au site.

Bien qu'en temps normal nous avons besoin de la page index.html, dans l'exemple ci-dessous lors de l'examen nous n'avions pas besoin de cette page. Le fait de mettre l'ensemble du code prévu pour la page nautique.html à l'intérieur de la page index.html constitue une erreur majeure sur le plan de la navigation. En procédant ainsi, dès que l'on sort de la page index.html pour se rendre sur camping.html par exemple, il est IMPOSSIBLE de revenir à la page index.html. La structure du schéma ne permettait pas la création d'une page index.html. Dans l'image de l'exemple du code de la navigation attendu lors de l'examen, on voit très bien que les liens mènent vers les pages camping, nautique ainsi que randonnée.

Il faut bien comprendre qu'un bouton est un élément interactif. En d'autres mots, il s'agit d'un élément d'interface qui réagit aux actions de l'utilisateur. Donc, au passage du curseur sur le bouton (qu'il soit textuel ou de forme bouton) on doit y apercevoir un changement d'apparence. En HTML, on utilise une pseudo-class :hover afin de gérer le survol sur un bouton.

Le problème dans l'exemple ci-dessous c'est que l'étudiant confond l'utilisation d'une classe et d'une pseudo-classe. C'est important de comprendre la différence entre le ( . ) et le ( : ), car ici ça fait toute la différence.

La balise <a> vient avec un attribut obligatoire qui est href. Cet attribut permet d'insérer le lien afin de concrétiser la navigation de l'élément. Sans celui-ci, il est difficile de rendre la navigation possible.