Afficher le code source HTML d’une page web

Mis à jour le .

Pour voir le code HTML d’une page web sur Windows ou Linux, ouvrez-la dans Chrome, Edge ou Firefox, puis appuyez sur Ctrl + U. Pour examiner le bouton ou le texte tel qu’il apparaît à l’écran, faites plutôt un clic droit dessus et choisissez Inspecter.

Illustration de la consultation du code HTML d’un site

Ouvrir le code source selon le navigateur

Navigateur Afficher la source Inspecter un élément
Chrome et Edge Ctrl + U sous Windows ou Linux, ou clic droit sur une zone libre puis Afficher le code source de la page. Clic droit sur l’élément, puis Inspecter.
Firefox Ctrl + U sous Windows ou Linux. Sur Mac, ⌘ + U. Clic droit, puis Inspecter. L’onglet Inspecteur montre l’élément sélectionné.
Safari sur Mac Activez les fonctions pour développeurs web dans Safari → Réglages → Avancés, puis utilisez le menu Développement pour afficher le code source. Utilisez l’inspecteur web du menu Développement.

Chrome et Firefox permettent aussi d’essayer le préfixe view-source: dans la barre d’adresse, par exemple view-source:https://example.com/. Les options peuvent varier selon la version. Raccourcis de Chrome · Afficher la source avec Firefox · Outils de développement Safari

Choisir entre code source et inspecteur

Le code source montre le HTML reçu au chargement de la page. Pour repérer le titre ou une balise canonique, recherchez <title> ou rel="canonical" avec Ctrl + F, ou ⌘ + F sur Mac.

L’inspecteur montre la structure actuelle de la page, appelée DOM. Un script peut ajouter un menu, déplacer un titre ou afficher une fenêtre après le chargement. Si l’élément est visible à l’écran mais absent du code source, ouvrez l’inspecteur. Mode Inspection de Chrome

Copier le HTML d’une page ou d’un élément

  1. Pour copier un extrait du document initial, sélectionnez-le dans l’onglet du code source et utilisez Ctrl + C ou ⌘ + C.
  2. Pour copier le HTML d’un élément déjà affiché, ouvrez l’inspecteur. Cliquez avec le bouton droit sur sa ligne dans l’arborescence, puis cherchez Copier → Copier outerHTML ou l’option équivalente.
  3. Collez l’extrait dans un éditeur de texte. Si vous cherchez du CSS ou du JavaScript chargé séparément, ouvrez le fichier correspondant dans les outils de développement.

Si le navigateur ouvre une autre adresse avant que vous puissiez lire la page, vérifiez quelle URL est réellement chargée. Comprendre et gérer les redirections du navigateur

Questions fréquentes

Pourquoi le code HTML change-t-il après le chargement ?

Des scripts peuvent ajouter ou modifier des éléments. Le code source et l’inspecteur répondent alors à deux questions différentes, ce que le serveur a envoyé et ce que le navigateur affiche maintenant.

Inspecter une page permet-il de la modifier pour les autres visiteurs ?

Les changements dans l’inspecteur restent dans votre navigateur. Un rechargement remet la page dans son état habituel.

Peut-on voir la base de données ou le code PHP du site ?

Le navigateur montre les fichiers et les réponses qu’il reçoit. Le code et les données conservés sur le serveur restent côté serveur.