The HTML code of a web page corresponds to the set of textual instructions that the browser interprets to display content on the screen. Accessing this code allows one to understand the structure of a site, diagnose a display bug, or analyze the markup of a competitor. Two main methods coexist, and they do not show the same thing.
Raw source and rendered DOM: two views of HTML code
When a browser loads a page, it first receives a raw HTML file sent by the server. This file contains the tags as they were written on the server side, before any modifications by JavaScript.
The raw source can be accessed via the shortcut Ctrl + U (or Cmd + U on Mac) in most browsers. The displayed content corresponds exactly to the initial HTTP response. On a classic static site, this source accurately reflects what the visitor sees.
On modern SPA (Single Page Application) type applications, the situation differs radically. The raw source may seem almost empty, as the visible content is dynamically generated by JavaScript after the initial load. To see the actual state of the page as it appears in the browser, one must consult the rendered DOM via the developer tools. Understanding the HTML code of a web page therefore involves distinguishing between these two layers.
The Elements tab of the DevTools displays the DOM as it exists after all scripts have executed. Nodes added, modified, or removed by JavaScript appear there in real time. This view reflects what the browser has actually built in memory, not what the server sent.
Keyboard shortcuts to view code in each browser
The three most common desktop browsers share similar shortcuts, with a few variations.
- Google Chrome: Ctrl + U for raw source, F12 or Ctrl + Shift + I to open the DevTools on the Elements tab that shows the rendered DOM.
- Mozilla Firefox: same shortcut Ctrl + U for the source. The development tools open with F12. Firefox recently fixed specific cases of source display for blob: and srcdoc type documents.
- Safari: the Develop menu must be manually enabled in preferences. Once active, the shortcut Cmd + Option + U displays the source, and Cmd + Option + I opens the web inspector.
One point to remember: the shortcut Ctrl + U always displays the server source, never the modified DOM. For debugging on a dynamic site, the DevTools remain the only reliable option.
View HTML code on mobile with the view-source prefix
On an Android smartphone equipped with Chrome, there is no keyboard shortcut or built-in menu to display the source. The documented method is to type view-source: directly in front of the URL in the address bar.
For example, to examine the HTML of example.com, simply enter view-source:https://example.com in mobile Chrome. The browser then displays the raw code sent by the server, in a plain text view.
This technique also works on desktop, but it is particularly useful on mobile where development tools are not natively accessible. On iOS, mobile Safari does not offer an integrated equivalent. Third-party applications dedicated to source inspection are available on the App Store to fill this gap.
Inspect and temporarily modify the DOM with DevTools
The Elements tab of the development tools is not limited to reading code. It allows you to temporarily modify any element of the page directly in the browser.
Modify text or HTML attributes
A double-click on a node in the Elements tab makes the content editable. The change is immediately reflected in the displayed page. This modification remains local: refreshing the page restores the original content.
This mechanism is used to test an alternative title, check the rendering of longer text, or simulate the removal of a block without touching the actual source file. Front-end developers use it daily to prototype CSS or HTML adjustments before implementing them in the code.
Observe JavaScript changes in real time
The Elements tab reflects every mutation of the DOM live. If a script adds an element after a user click, the corresponding node appears instantly in the tree. Modified nodes are distinguished by a brief purple flash in Chrome.
This real-time observation capability fundamentally distinguishes the inspector from the simple source view. To diagnose unexpected behavior on an interactive page, only the rendered DOM in the DevTools provides an accurate picture of what is happening.
Three concrete cases where the source view is not enough
The source view remains practical for quick checks of meta tags, semantic structure, or the presence of a third-party script. However, it reaches its limits in several specific situations.
- Sites built with JavaScript frameworks (React, Vue, Angular) generate most of the HTML on the client side. The raw source often contains only a empty root div tag and links to JS files.
- Pages that load content via AJAX requests after the initial display. The dynamically added HTML never appears in the raw source.
- Shadow DOM elements, used by some encapsulated web components, are invisible in the classic source view but accessible via the inspector with the “Show user agent shadow DOM” option enabled in the DevTools settings.
Choosing between Ctrl + U and F12 therefore depends on the type of site being analyzed. For a static site or a classic CMS, the raw source is sufficient. For everything else, the DevTools become the mandatory entry point to the code actually executed by the browser.
