Understanding How Websites Are Built
Every website you visit—from a simple blog to a complex web application—is fundamentally constructed using HTML (HyperText Markup Language). While your browser renders this code into the beautiful graphics and formatted text you see on your screen, the raw code is always sitting just beneath the surface.
Whether you are a budding web developer trying to learn how a competitor structured their site, an SEO specialist checking metadata, or just a curious internet user, Google Chrome makes it incredibly easy to peek behind the curtain and view the exact source code of any public webpage.
Here are the three easiest ways to view the HTML source code of a web page using Google Chrome on a desktop or laptop computer.
Method 1: The Keyboard Shortcut (The Fastest Way)
If you need to check source code frequently, memorising the keyboard shortcut will save you a massive amount of time.
- Open Google Chrome and navigate to the webpage you want to inspect.
- Ensure the webpage has finished loading completely.
- Press Ctrl + U on a Windows or Linux PC, or Cmd + Option + U on a Mac.
A new browser tab will immediately open. This tab will display the raw, unformatted HTML code of the page you were just looking at. The code will be color-coded to make it slightly easier to read (e.g., tags in purple, links in blue).
Method 2: The Right-Click Menu
If you prefer using your mouse, the standard right-click context menu is the most common way to access the source code.
- Navigate to the webpage in Google Chrome.
- Find a blank spot on the webpage. (Important: Do not right-click on an image, a video, or a hyperlink, as this will bring up a different menu).
- Right-click your mouse.
- Select View page source from the drop-down menu.
Just like the keyboard shortcut, a new tab will open containing the raw HTML document.
Method 3: Using Chrome Developer Tools (For Advanced Users)
The first two methods show you the static HTML delivered by the server when the page first loaded. However, modern websites rely heavily on JavaScript to dynamically change the page after it loads. If you use “View page source,” you will not see these dynamic changes.
To see the live, currently rendered HTML (the DOM), you must use Chrome’s built-in Developer Tools.
- Navigate to the webpage in Google Chrome.
- Press F12 on your keyboard, or right-click any blank space and select Inspect.
- A panel will open either on the right side or the bottom of your browser window.
- Ensure the Elements tab is selected at the top of this new panel.
You are now looking at the live HTML of the page. You can click the small grey arrows next to the HTML tags to expand them and see the nested code inside. If you hover your mouse over a line of code in the Elements panel, Chrome will physically highlight the corresponding visual element on the actual webpage, making it incredibly easy to see exactly which line of code controls which button or image.
How to Search Within the Source Code
Webpages often contain thousands of lines of code. Scrolling through it manually to find a specific tag is nearly impossible. Fortunately, you can use Chrome’s search function.
- Open the source code using either Method 1 or Method 2.
- Press Ctrl + F (Windows/Linux) or Cmd + F (Mac) to open the search bar.
- Type in the specific element you are looking for. For example, search for
<title>to find the page title,<meta name="description"to find the SEO description, or<h1>to find the main heading.
Chrome will highlight every instance of your search term in orange or yellow, allowing you to quickly jump directly to the relevant section of the code.
