Have you ever wanted to know what lies behind a web page, to understand why a button is placed in a certain spot or why a text appears in bold? All of this is written in the HTML code of the site. The good news: you don’t need any special software to read it. Your browser already contains all the necessary tools, whether you’re on a computer or mobile.
Explore the HTML code of a specific element with the inspector
Most tutorials start with the shortcut Ctrl+U, which displays the raw source code of an entire page. The problem: you end up facing hundreds of lines, not knowing where to look. The element inspector is much more convenient for beginners.
On Chrome, Firefox, or Edge, right-click on any element of the page (a title, an image, a link) and then select “Inspect.” A panel opens and highlights the corresponding line of HTML code. You immediately see the relevant tag, its attributes, and the CSS style applied to it.
This tool works in real-time. You can temporarily modify the text of a title or the color of a background directly in the panel, without touching the actual site. It’s a perfect sandbox for understanding the relationship between the code and what you see on the screen. To go further on how to display the HTML code of a website, several complementary methods exist depending on your browser and device.
Hover over different areas of the panel: the browser highlights in blue the part of the page that corresponds to the selected code. This visual link between code and rendering is the best way to learn HTML without reading a manual.
Keyboard shortcuts to display the source code on Chrome, Firefox, and Edge
Each browser offers several paths to access the code. Here are the most useful shortcuts to know, grouped by usage.
Display the complete source code
- Ctrl+U (Windows/Linux) or Cmd+Option+U (Mac) opens the raw source code in a new tab. Useful for searching for a meta tag, a script, or a hidden URL in the code
- You can also type view-source: followed by the URL in the address bar (for example, view-source:https://example.com). This works on Chrome and Firefox
- The Ctrl+F combination in this view allows you to search for a specific word or tag throughout the code, which avoids reading everything line by line
Open the developer tools
The F12 shortcut (or Ctrl+Shift+I) opens the full developer tools panel. The “Elements” tab (Chrome, Edge) or “Inspector” (Firefox) displays the HTML code as the browser interprets it after executing JavaScript.
This distinction matters. The raw source code (Ctrl+U) shows the HTML sent by the server. The Elements tab shows the HTML code after modification by JavaScript scripts. On modern sites, these two versions can be very different.
Display the HTML code of a website on mobile
Viewing the source code from a phone has long been complicated. Mobile browsers do not offer right-click, keyboard shortcuts, or built-in inspection panels.
The universal method without an app
In Safari or Chrome mobile, type view-source: followed by the URL in the address bar. On some recent versions of Chrome Android, this method remains functional and displays the raw code directly in the browser.
Dedicated extensions and apps
On iPhone and iPad, extensions like View Source Code add a button directly in the Safari interface. A single tap is enough to display the complete HTML of the page in a readable view, without going through a Mac or a complex development tool.
To go further, apps like Fonov HTML Viewer allow you to capture the code of a page, search for specific patterns, and export the result. This type of tool transforms a smartphone into a monitoring station: you can examine the structure of a competitor’s site while on the go, and then save the code for later analysis.
Inspect a mobile page from a computer
Safari on Mac can inspect pages opened on a connected iPhone via USB. First, you need to enable the Develop menu in Safari preferences on Mac, then enable web inspection in the Safari settings on the iPhone. The phone then appears in the Develop menu on the Mac, and you access the same inspection tools as on a desktop site.
Check the SEO tags of a page in the source code
Knowing how to read HTML code serves much more than just satisfying curiosity. It’s a quick diagnostic tool for search engine optimization.
Open the source code with Ctrl+U, then use Ctrl+F to search for specific tags. Here are the most common checks:
- Look for <title> to see the page title as search engines read it. If it is empty or generic, it’s an immediate SEO problem
- Look for meta name=”description” to check the presence and content of the meta description displayed in Google results
- Look for rel=”canonical” to identify the declared canonical URL, which avoids duplicate content issues between multiple addresses
- Look for h1, h2, h3 tags to verify that the hierarchy of titles is logical and that the h1 is unique on the page
These checks take a few seconds and require no advanced development knowledge. Ctrl+U followed by Ctrl+F replaces a mini-SEO audit for basic checks.
The source code also reveals the presence of tracking scripts (Google Analytics, advertising pixels) or structured data tags. These elements, invisible to the visitor, directly influence how search engines understand and rank the page.
Learning to navigate the HTML code of a site requires neither technical training nor paid tools. A right-click and a few shortcuts are enough to go to the other side of the screen. The next time you come across a layout that intrigues you, open the inspector: the answer is always in the code.
