Comment afficher le code source HTML d'une page Web

Tous les navigateurs Internet permettent aux utilisateurs de visualiser le code source HTML de toute page Web consultée. Les sections suivantes contiennent des informations sur les différentes manières d’afficher le code source dans chacun des principaux navigateurs. Pour continuer, choisissez une entrée dans la liste ci-dessous et suivez les instructions pour cette section.

Lors de la visualisation du code source d'une page Web, il est important de garder à l'esprit que les informations et le code non traités par le serveur n'apparaîtront pas. Par exemple, presque tous les moteurs de recherche Internet traitent les informations sur un serveur, puis affichent les résultats sur une page Web. En d'autres termes, vous pouvez afficher le code qui constitue la page de résultats, mais vous ne pouvez pas afficher le code source du moteur de recherche.

Cette règle s'applique à tous les scripts côté serveur, à SSI et au code de programmation. Par conséquent, les fonctionnalités, telles que les moteurs de recherche, les forums, les sondages, les discussions en ligne, etc., n’afficheront pas leur code. La copie des informations à partir du code source peut provoquer des erreurs ou vous rediriger vers la page à partir de laquelle vous avez copié les informations.

Utilisateurs de Microsoft Edge

Pour afficher le code source d'une page Web dans Microsoft Edge, procédez comme suit.

  1. Appuyez sur Ctrl + U ou F12 sur le clavier de votre ordinateur.
  2. Sélectionnez l'onglet Eléments en haut de la fenêtre de droite.

Ou

Ou

  1. Ouvrez Microsoft Edge et accédez à la page Web de votre choix.
  2. Cliquez sur le plus

    icône dans le coin supérieur droit de l'écran.
  3. Sélectionnez Outils de développement dans le menu déroulant qui apparaît.
  4. Sélectionnez l'onglet Eléments en haut de la fenêtre de droite.

Conseil: Dans Microsoft Edge, l'outil DOM permet également une interaction avec le code source et les paramètres CSS, ce qui permet aux utilisateurs de voir comment les modifications apportées au code affectent immédiatement la page Web.

Utilisateurs Microsoft Internet Explorer

Pour afficher le code source d'une page Web dans Microsoft Internet Explorer, procédez comme suit.

  1. Appuyez sur Ctrl + U ou F12 sur le clavier de votre ordinateur.
  2. Cliquez sur l'onglet Débogueur en haut du nouveau menu.

Ou

Ou

  1. Ouvrez Internet Explorer et accédez à la page Web de votre choix.
  2. Appuyez sur la touche Alt pour afficher la barre de menus du navigateur.
  3. Sélectionnez Afficher, puis Source dans le menu déroulant qui apparaît.
  4. Cliquez sur l'onglet Débogueur en haut du nouveau menu.

Conseil: dans les dernières versions d'Internet Explorer, appuyez sur la touche F12 pour afficher l'outil DOM. Cet outil offre beaucoup plus d'interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les modifications apportées au code affectent immédiatement la page Web.

Utilisateurs de Mozilla Firefox et Netscape

Pour afficher le code source d'une page Web dans Mozilla Firefox, suivez les étapes ci-dessous.

  1. Appuyez sur Ctrl + U sur le clavier de votre ordinateur.

Ou

Ou

  1. Ouvrez Mozilla Firefox et accédez à la page Web de votre choix.
  2. Appuyez sur la touche Alt pour afficher la barre de menus du navigateur.
  3. Sélectionnez Outils, Développeur Web, puis Source de page .

Conseil: dans les dernières versions de Firefox, appuyez sur la touche F12 ou sur Ctrl + Maj + I pour afficher l'outil de développement interactif. Cet outil offre beaucoup plus d'interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les modifications apportées au code affectent immédiatement la page Web.

Afficher une section du code source de la page

  1. Mettez en surbrillance la partie d'une page Web pour laquelle vous souhaitez afficher le code source.
  2. Cliquez avec le bouton droit sur cette section en surbrillance, puis cliquez sur Afficher la source de sélection .

Conseil: Utilisez le module complémentaire Firebug pour non seulement afficher le code source d’une page, mais également modifier et afficher ces modifications en direct via le navigateur.

Utilisateurs de Google Chrome

Pour afficher le code source d'une page Web dans Google Chrome, procédez comme suit.

  1. Appuyez sur Ctrl + U sur le clavier de votre ordinateur.

Ou

Ou

  1. Ouvrez Chrome et naviguez sur la page Web de votre choix.
  2. Cliquez sur Personnaliser et contrôler Google Chrome.

    icône dans le coin supérieur droit de la fenêtre du navigateur.
  3. Dans le menu déroulant qui apparaît, sélectionnez Autres outils, puis Outils de développement .
  4. Cliquez sur l'onglet Éléments en haut de la nouvelle section qui apparaît.

Conseil: avec les dernières versions de Chrome, appuyez sur la touche F12 ou Ctrl + Maj + I pour afficher également l'outil de développement interactif. Cet outil offre beaucoup plus d'interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les modifications apportées au code affectent immédiatement la page Web.

Utilisateurs Apple Safari

Pour afficher le code source d'une page Web dans Apple Safari, procédez comme suit.

  1. Appuyez sur Commande + Option + U sur votre clavier.

Ou

Ou

  1. Ouvrez le navigateur Safari et accédez à la page Web de votre choix.
  2. Sélectionnez le menu Développer .
  3. Choisissez l'option Afficher la source de la page .

Utilisateurs d'opéra

Pour afficher le code source d'une page Web dans Opera, suivez les étapes ci-dessous.

  1. Appuyez sur Ctrl + U sur votre clavier.

Ou

Ou

  1. Ouvrez Opera et accédez à la page Web de votre choix.
  2. Cliquez sur le bouton Menu

    dans le coin supérieur gauche de la fenêtre du navigateur.
  3. Dans le sous-menu Developer, choisissez Source de la page .

Conseil: Si le sous-menu Développeur ne s'affiche pas, choisissez Autres outils → Afficher le menu Développeur . Ensuite, cliquez sur le bouton de menu

encore. Vous devriez maintenant voir le sous-menu Developer répertorié.

Conseil: dans les dernières versions d'Opera, appuyez sur la combinaison de raccourcis Ctrl + Maj + I pour afficher l'outil de développement interactif. Cet outil offre beaucoup plus d'interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les modifications apportées au code affectent immédiatement la page Web.

Téléphone Android sous Chrome

  1. Ouvrez le navigateur Internet Google Chrome sur votre téléphone.
  2. Ouvrez la page Web dont vous souhaitez afficher le code source.
  3. Appuyez une fois dans la barre d'adresse, puis déplacez le curseur à l'avant de l'URL.
  4. Tapez view-source: et appuyez sur Entrée ou sur Aller .

Conseil: par exemple, pour afficher le code de notre page d'accueil, vous devez taper view-source: //www.computerhope.com.

Comment fermer la page de code source ou l'outil

Une fois que vous avez terminé d’afficher le code source d’une page Web, vous pouvez le quitter ou le fermer. La fermeture du code source dépend de la méthode que vous avez utilisée pour l’ouvrir.

  • Si vous avez utilisé la méthode Ctrl + U (sauf Edge) ou la méthode du clic droit, fermez le nouvel onglet qui s'est ouvert en haut de la fenêtre de votre navigateur.
  • Si vous avez utilisé la méthode développeur (en appuyant sur F12 ou Ctrl + Maj + I), cliquez sur le bouton

    dans le coin supérieur droit de la fenêtre des outils .