Afficher le code HTML d’un site web semble trivial : clic droit, « Afficher le code source », terminé. La réalité est plus nuancée depuis que la majorité des sites reposent sur des frameworks JavaScript comme React ou Vue. Le code source brut renvoyé par le serveur ne correspond plus forcément au contenu visible dans le navigateur. Savoir quelle méthode utiliser, et dans quel contexte, fait toute la différence entre une inspection utile et une lecture à vide.
Afficher le code source ou inspecter le DOM : ce que montre chaque méthode
Les navigateurs proposent deux chemins d’accès au code d’une page. Ils ne renvoient pas la même information, et confondre les deux fausse toute analyse.
| Critère | Afficher le code source (Ctrl+U) | Inspecter l’élément (F12 / DevTools) |
|---|---|---|
| Contenu affiché | Réponse HTML brute envoyée par le serveur | DOM actif après exécution du CSS et du JavaScript |
| Reflète le rendu visuel | Non, sur les sites JS modernes | Oui, en temps réel |
| Modification locale possible | Non | Oui (temporaire, côté navigateur) |
| Utile pour l’audit SEO technique | Oui (vision « crawler ») | Oui (vision « utilisateur ») |
| Raccourci clavier (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 ou Ctrl+Maj+I |
« Afficher le code source » montre ce que le serveur envoie, pas ce que le visiteur voit. Sur un site construit avec un framework JavaScript, ce code source peut se limiter à une balise <div id="root"> vide suivie d’un fichier JS volumineux. Le texte, les images, la structure de navigation n’apparaissent qu’après l’exécution du script par le navigateur.
Les DevTools, accessibles via F12, affichent le DOM tel que le navigateur l’a construit. C’est cette version qui correspond au rendu réel. Quand l’objectif est de vérifier une balise title, un attribut alt ou un lien canonique, il faut savoir laquelle des deux vues consulter, selon que l’on cherche la donnée brute ou le résultat interprété.
Un guide complet pour trouver le code html d’un site web détaille ces deux approches avec des cas concrets par navigateur.
Sites en JavaScript : pourquoi le code source brut est souvent vide
Les frameworks front-end (React, Vue, Angular) génèrent le contenu directement dans le navigateur du visiteur. Le serveur se contente d’envoyer une coquille HTML minimale et un bundle JavaScript. Le HTML initial ne contient ni texte ni balise sémantique exploitable.
Cette architecture pose un problème concret pour quiconque inspecte le code dans un but d’audit ou d’apprentissage. Avec Ctrl+U, on obtient une page quasiment vide. Seuls les DevTools (onglet « Elements » dans Chrome, « Inspecteur » dans Firefox) montrent le DOM complet après rendu.
Tester la page comme un robot d’indexation
Pour voir ce qu’un crawler qui n’exécute pas le JavaScript perçoit, la bonne pratique consiste à désactiver JavaScript dans les DevTools avant de recharger la page. Dans Chrome, cela se fait via les paramètres de l’onglet « Sources » ou en ouvrant la palette de commandes (Ctrl+Maj+P) puis en tapant « Disable JavaScript ».
Si la page devient blanche ou ne montre que le squelette, le site repose entièrement sur le rendu côté client. Les robots qui ne rendent pas le JS ne voient alors aucun contenu indexable. Ce test rapide évite de tirer des conclusions fausses à partir du seul code source brut.
Raccourcis clavier par navigateur pour accéder au code HTML
La méthode varie légèrement d’un navigateur à l’autre. Voici les raccourcis les plus directs :
- Chrome et Edge (Windows/Linux) : Ctrl+U pour le code source, F12 pour les DevTools. Sur Mac : Cmd+Option+U et Cmd+Option+I respectivement.
- Firefox : même logique avec Ctrl+U et F12. L’inspecteur Firefox affiche en plus un panneau « Règles » qui détaille les styles CSS appliqués à chaque élément.
- Safari (Mac uniquement) : le menu Développeur doit être activé manuellement dans les préférences avancées. Ensuite, Cmd+Option+U ouvre le code source et Cmd+Option+I ouvre l’inspecteur web.
Sur mobile (Android), Chrome permet d’accéder au code source en tapant view-source: suivi de l’URL dans la barre d’adresse. Sur iOS, Safari ne propose pas d’équivalent natif simple ; des applications tierces ou des signets JavaScript (bookmarklets) comblent ce manque.
Chercher une balise précise dans le code source HTML
Afficher le code complet d’une page n’a d’intérêt que si l’on sait quoi y chercher. La fonction de recherche textuelle (Ctrl+F dans le code source ou dans l’onglet Elements des DevTools) permet de localiser une balise spécifique en quelques secondes.
Vérifications courantes en audit SEO
La balise title et la meta description se trouvent dans le <head> du code source. En tapant « title » ou « meta name » dans la barre de recherche, on isole immédiatement ces éléments. Leur présence dans le code source brut (Ctrl+U) confirme qu’ils sont accessibles aux moteurs de recherche sans exécution JavaScript.
Pour les balises de structure (h1, h2, h3), la recherche dans les DevTools est plus fiable, car elle reflète le DOM réel. Un site JavaScript peut injecter ses titres dynamiquement : ils seront absents du code source mais présents dans l’inspecteur.
- Balise canonique : chercher
rel="canonical"dans le <head> pour vérifier l’URL de référence déclarée. - Attributs alt des images : chercher
alt=dans le code pour repérer les images sans description textuelle. - Données structurées : chercher
application/ld+jsonpour localiser les scripts de balisage schema.org.
Cadre juridique en France : consulter le code, oui, mais pas tout copier
Consulter le code HTML d’un site est licite. Le navigateur télécharge ce code pour afficher la page, et l’utilisateur ne fait que lire ce qui lui est déjà transmis. Aspirer ou recopier systématiquement le code ou les données qu’il contient relève d’un autre régime.
En droit français et européen, plusieurs protections encadrent la copie : le droit d’auteur sur le code original et les contenus, le droit sui generis sur les bases de données, et le RGPD lorsque des données personnelles sont en jeu. Regarder le code d’un concurrent pour comprendre sa structure de balises est une pratique courante et légitime. Extraire méthodiquement son contenu ou reproduire son architecture pour la dupliquer expose à des poursuites.
La frontière est nette : l’inspection manuelle d’une page reste un geste technique banal. L’aspiration automatisée et la réutilisation du code ou des données nécessitent une analyse juridique préalable.