Two people can look at the same web page and see two different things. The first reads the text and images displayed by the browser. The second reads the underlying HTML code, which determines the position of each element, the heading hierarchy, and the links to style sheets. Knowing how to access this code means seeing the site from the perspective of someone who can read its actual structure.
Initial source code and rendered DOM: what each view reveals
Before choosing a tool, it’s worth clarifying one distinction. The Ctrl+U shortcut (or Cmd+Option+U on Mac) opens the raw source code—that is, the HTML response sent by the server. The Elements tab in the developer tools displays the current DOM, which may have been modified by JavaScript after the page loads.
On a static site, the two views are almost identical. On a modern web application that builds its content in the browser, the initial source code may look almost empty, even though the DOM is full of content visible on screen.
| Criterion | Source code (Ctrl+U) | Rendered DOM (Elements tab) |
|---|---|---|
| Displayed content | HTML as received from the server | HTML after JavaScript has run |
| Real-time changes | No, it’s a static snapshot | Yes, it reflects every dynamic change |
| Visible CSS styles | Links to style sheets only | Computed styles for each selected element |
| SEO use | Check title, meta description, and canonical tags | Find content injected by scripts |
| Main shortcut | Ctrl+U (Windows/Linux), Cmd+Option+U (Mac) | F12 or Ctrl+Shift+I, then the Elements tab |
Comparing these two views on the same page helps you spot everything JavaScript adds or changes after the initial load. Even beginners can develop this useful analysis habit in just a few minutes.
When learning more about a website’s HTML code, understanding the difference between raw source and the DOM is the most reliable place to start.
Inspect a specific element with your browser’s DevTools
Instead of scrolling through hundreds of lines of code, the inspector lets you point to a visible element (a heading, button, or image) and jump straight to the corresponding HTML snippet. Right-click the element and select “Inspect” to open the panel with the relevant line of code highlighted.
What the Elements panel shows
The panel displays the DOM tree. You can expand each node to reveal its children. On the right, the Styles pane lists the CSS rules applied to the selected element, in order of priority.
- Structural HTML tags (h1, h2, nav, footer) appear in their actual hierarchy, making it easy to check whether a site has a consistent heading structure
- Attributes such as alt on an image or href on a link are easy to read without searching through the full source code
- You can make temporary changes: double-clicking text in the DOM makes it editable, helping you test a visual change without touching the original file
Any changes made in the inspector disappear when you reload the page. There’s no risk of altering the live site. This testing ground is especially useful for understanding how a CSS rule affects the layout.
Browsers and access options
Chrome, Firefox, and Edge work in much the same way when it comes to the inspector. Safari requires an extra step: enable the Develop menu in the advanced preferences before you can inspect anything.
Firefox’s interface puts more emphasis on real-time style editing, with a built-in CSS grid editor. In Chrome, the Network tab provides detailed tracking of HTTP requests, which is useful for understanding where the resources loaded by the page come from.
Check SEO directly in the HTML source code
One of the most practical uses of reading source code is checking search engine optimization. Instead of installing a third-party extension, open the source code with Ctrl+U, then use Ctrl+F to search for a specific tag and get an immediate answer.
The title tag and meta description are in the head section of the source code. Search for “title” or “meta name=”description”” to find them. This is the quickest way to check whether these tags exist and whether their content matches what you want.
Three other common checks work the same way:
- The canonical tag (search for “rel=”canonical””) to see whether the page declares a preferred URL to search engines
- Hn tags (search for “<h1”, “<h2”, “<h3”) to check the heading hierarchy without an external tool
- The presence of an analytics tracking script (search for “gtag” or “analytics”) to confirm that the tracking code is in place
This approach to searching source code works in any browser and requires no advanced technical skills. Ctrl+U followed by Ctrl+F covers most quick SEO audits.
Dynamic pages and JavaScript-generated content
A page that looks empty in the initial source code isn’t necessarily devoid of content. Modern JavaScript frameworks build the interface in the browser: the server sends a minimal HTML shell, and the script fills in the rest after the page loads.
For these pages, the raw source code doesn’t reflect what visitors see. Only the Elements tab in DevTools shows the content actually present in the DOM. This difference has direct SEO implications: Google can run JavaScript to index content, but its URL inspection tools let you check what it actually retrieved and rendered.
The Network tab in DevTools adds to this analysis. It lists every request made by the page (CSS files, JS scripts, API calls). Filtering by file type makes it easy to identify which resources are responsible for the displayed content.
Comparing the source code, rendered DOM, and network requests gives you a complete picture of how a page works. This combination of three layers of information turns a quick glance into a genuine technical diagnosis.
