Le code HTML d’une page web correspond à l’ensemble des instructions textuelles que le navigateur interprète pour afficher du contenu à l’écran. Accéder à ce code permet de comprendre la structure d’un site, de diagnostiquer un bug d’affichage ou d’analyser le balisage d’un concurrent. Deux méthodes principales coexistent, et elles ne montrent pas la même chose.
Source brute et DOM rendu : deux visions du code HTML
Quand un navigateur charge une page, il reçoit d’abord un fichier HTML brut envoyé par le serveur. Ce fichier contient les balises telles qu’elles ont été écrites côté serveur, avant toute modification par du JavaScript.
La source brute se consulte via le raccourci Ctrl + U (ou Cmd + U sur Mac) dans la plupart des navigateurs. Le contenu affiché correspond exactement à la réponse HTTP initiale. Sur un site statique classique, cette source reflète fidèlement ce que le visiteur voit.
Sur les applications modernes de type SPA (Single Page Application), la situation diffère radicalement. La source brute peut sembler presque vide, car le contenu visible est généré dynamiquement par JavaScript après le chargement initial. Pour voir l’état réel de la page telle qu’elle apparaît dans le navigateur, il faut consulter le DOM rendu via les outils de développement. Comprendre le code html d’une page web passe donc par la distinction entre ces deux couches.
L’onglet Elements des DevTools affiche le DOM tel qu’il existe après exécution de tous les scripts. Les nœuds ajoutés, modifiés ou supprimés par JavaScript y apparaissent en temps réel. Cette vue reflète ce que le navigateur a réellement construit en mémoire, pas ce que le serveur a envoyé.
Raccourcis clavier pour afficher le code dans chaque navigateur
Les trois navigateurs de bureau les plus répandus partagent des raccourcis similaires, avec quelques variantes.
- Google Chrome : Ctrl + U pour la source brute, F12 ou Ctrl + Maj + I pour ouvrir les DevTools sur l’onglet Elements qui montre le DOM rendu.
- Mozilla Firefox : même raccourci Ctrl + U pour la source. Les outils de développement s’ouvrent avec F12. Firefox a corrigé récemment des cas particuliers d’affichage de source pour les documents de type blob: et srcdoc.
- Safari : le menu Développement doit être activé manuellement dans les préférences. Une fois actif, le raccourci Cmd + Option + U affiche la source, et Cmd + Option + I ouvre l’inspecteur web.
Un point à retenir : le raccourci Ctrl + U affiche toujours la source serveur, jamais le DOM modifié. Pour du débogage sur un site dynamique, les DevTools restent la seule option fiable.
Consulter le code HTML sur mobile avec le préfixe view-source
Sur un smartphone Android équipé de Chrome, il n’existe pas de raccourci clavier ni de menu intégré pour afficher la source. La méthode documentée consiste à taper view-source: directement devant l’URL dans la barre d’adresse.
Par exemple, pour examiner le HTML de example.com, il suffit de saisir view-source:https://example.com dans Chrome mobile. Le navigateur affiche alors le code brut envoyé par le serveur, dans une vue en texte plein.
Cette technique fonctionne aussi sur desktop, mais elle prend tout son intérêt sur mobile où les outils de développement ne sont pas accessibles nativement. Sur iOS, Safari mobile ne propose pas d’équivalent intégré. Des applications tierces dédiées à l’inspection de source existent sur l’App Store pour combler ce manque.
Inspecter et modifier temporairement le DOM avec les DevTools
L’onglet Elements des outils de développement ne se limite pas à la lecture du code. Il permet de modifier temporairement n’importe quel élément de la page directement dans le navigateur.
Modifier du texte ou des attributs HTML
Un double-clic sur un nœud dans l’onglet Elements rend le contenu éditable. Le changement se reflète immédiatement dans la page affichée. Cette modification reste locale : un rafraîchissement de la page restaure le contenu original.
Ce mécanisme sert à tester un titre alternatif, vérifier le rendu d’un texte plus long, ou simuler la suppression d’un bloc sans toucher au fichier source réel. Les développeurs front-end l’utilisent quotidiennement pour prototyper des ajustements CSS ou HTML avant de les reporter dans le code.
Observer les changements JavaScript en temps réel
L’onglet Elements reflète chaque mutation du DOM en direct. Si un script ajoute un élément après un clic utilisateur, le nœud correspondant apparaît instantanément dans l’arborescence. Les nœuds modifiés se distinguent par un bref flash violet dans Chrome.
Cette capacité d’observation en temps réel distingue fondamentalement l’inspecteur de la simple vue source. Pour diagnostiquer un comportement inattendu sur une page interactive, seul le DOM rendu dans les DevTools donne une image fidèle de ce qui se passe.
Trois cas concrets où la vue source ne suffit pas
La vue source reste pratique pour des vérifications rapides de balises meta, de structure sémantique ou de présence d’un script tiers. En revanche, elle atteint ses limites dans plusieurs situations précises.
- Les sites construits avec des frameworks JavaScript (React, Vue, Angular) génèrent la majorité du HTML côté client. La source brute ne contient souvent qu’une balise div racine vide et des liens vers des fichiers JS.
- Les pages qui chargent du contenu via des requêtes AJAX après affichage initial. Le HTML ajouté dynamiquement n’apparaît jamais dans la source brute.
- Les éléments shadow DOM, utilisés par certains composants web encapsulés, sont invisibles dans la vue source classique mais accessibles via l’inspecteur avec l’option « Show user agent shadow DOM » activée dans les paramètres des DevTools.
Choisir entre Ctrl + U et F12 dépend donc du type de site analysé. Pour un site statique ou un CMS classique, la source brute suffit. Pour tout le reste, les DevTools deviennent le point d’entrée obligatoire vers le code réellement exécuté par le navigateur.