Viewing the HTML code of a website seems trivial: right-click, “View Page Source,” done. The reality is more nuanced since the majority of sites rely on JavaScript frameworks like React or Vue. The raw source code returned by the server no longer necessarily corresponds to the content visible in the browser. Knowing which method to use, and in what context, makes all the difference between a useful inspection and a futile reading.
View Source or Inspect the DOM: What Each Method Shows
Browsers offer two paths to access a page’s code. They do not return the same information, and confusing the two skews any analysis.
| Criterion | View Page Source (Ctrl+U) | Inspect Element (F12 / DevTools) |
|---|---|---|
| Displayed Content | Raw HTML response sent by the server | Active DOM after executing CSS and JavaScript |
| Reflects Visual Rendering | No, on modern JS sites | Yes, in real-time |
| Local Modification Possible | No | Yes (temporary, client-side) |
| Useful for Technical SEO Audit | Yes (crawler view) | Yes (user view) |
| Keyboard Shortcut (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 or Ctrl+Shift+I |
“View Page Source” shows what the server sends, not what the visitor sees. On a site built with a JavaScript framework, this source code may be limited to an empty <div id="root"> tag followed by a large JS file. The text, images, and navigation structure only appear after the script is executed by the browser.
DevTools, accessible via F12, display the DOM as constructed by the browser. It is this version that corresponds to the actual rendering. When the goal is to check a title tag, an alt attribute, or a canonical link, one must know which of the two views to consult, depending on whether one is looking for raw data or the interpreted result.
A comprehensive guide to finding the HTML code of a website details these two approaches with concrete cases by browser.
JavaScript Sites: Why Raw Source Code is Often Empty
Front-end frameworks (React, Vue, Angular) generate content directly in the visitor’s browser. The server simply sends a minimal HTML shell and a JavaScript bundle. The initial HTML contains neither text nor usable semantic tags.
This architecture poses a concrete problem for anyone inspecting the code for audit or learning purposes. With Ctrl+U, one gets a nearly empty page. Only DevTools (the “Elements” tab in Chrome, “Inspector” in Firefox) show the complete DOM after rendering.
Test the Page Like an Indexing Bot
To see what a crawler that does not execute JavaScript perceives, the best practice is to disable JavaScript in DevTools before reloading the page. In Chrome, this is done via the settings in the “Sources” tab or by opening the command palette (Ctrl+Shift+P) and typing “Disable JavaScript.”
If the page turns blank or shows only the skeleton, the site relies entirely on client-side rendering. Bots that do not render JS see no indexable content. This quick test prevents drawing false conclusions from the raw source code alone.
Keyboard Shortcuts by Browser to Access HTML Code
The method varies slightly from one browser to another. Here are the most direct shortcuts:
- Chrome and Edge (Windows/Linux): Ctrl+U for page source, F12 for DevTools. On Mac: Cmd+Option+U and Cmd+Option+I respectively.
- Firefox: same logic with Ctrl+U and F12. The Firefox inspector also displays a “Rules” panel detailing the CSS styles applied to each element.
- Safari (Mac only): the Developer menu must be manually enabled in advanced preferences. Then, Cmd+Option+U opens the page source and Cmd+Option+I opens the web inspector.
On mobile (Android), Chrome allows access to the page source by typing view-source: followed by the URL in the address bar. On iOS, Safari does not offer a simple native equivalent; third-party apps or JavaScript bookmarks (bookmarklets) fill this gap.
Searching for a Specific Tag in the HTML Source Code
Displaying the complete code of a page is only useful if you know what to look for. The text search function (Ctrl+F in the source code or in the Elements tab of DevTools) allows you to locate a specific tag in seconds.
Common Checks in SEO Audit
The title tag and meta description are found in the <head> of the source code. By typing “title” or “meta name” in the search bar, you immediately isolate these elements. Their presence in the raw source code (Ctrl+U) confirms that they are accessible to search engines without executing JavaScript.
For structural tags (h1, h2, h3), searching in DevTools is more reliable, as it reflects the actual DOM. A JavaScript site may dynamically inject its titles: they will be absent from the source code but present in the inspector.
- Canonical tag: search for
rel="canonical"in the <head> to verify the declared reference URL. - Image alt attributes: search for
alt=in the code to spot images without textual descriptions. - Structured data: search for
application/ld+jsonto locate schema.org markup scripts.
Legal Framework in France: Consulting the Code, Yes, But Not Copying Everything
Consulting the HTML code of a site is lawful. The browser downloads this code to display the page, and the user is merely reading what has already been transmitted to them. Scraping or systematically copying the code or data it contains falls under a different regime.
Under French and European law, several protections govern copying: copyright on the original code and content, sui generis rights on databases, and GDPR when personal data is involved. Looking at a competitor’s code to understand its tag structure is a common and legitimate practice. Methodically extracting its content or reproducing its architecture to duplicate it exposes one to legal action.
The line is clear: manually inspecting a page remains a mundane technical gesture. Automated scraping and reusing code or data require prior legal analysis.