We all come across a web page one day that we want to understand the mechanics of: a dropdown menu, a well-aligned form, a layout we would like to reproduce. The HTML code of this site is accessible in just a few clicks, directly from the browser. However, one must know where to look and what to search for to avoid drowning in hundreds of lines of tags.
Inspecting a specific element with the browser’s DevTools
The most direct method to read a site’s HTML is to right-click and then select “Inspect” (or “Inspect” depending on the browser language). This opens the DevTools panel, which displays the source code of the page in a collapsible tag tree.
The real shortcut is the hover with the element selector. At the top left of the DevTools panel, a small cursor-shaped icon allows you to hover over any block on the page. Each area is highlighted in blue, and the corresponding code appears instantly in the Elements panel. This connects the visual to the markup without manual digging.
When you want to understand the HTML code of a website without technical training, this visual inspection effectively replaces the linear reading of the raw source code. You target a title, an image, or a button, and you can see directly the tag that generates it.
Keyboard shortcuts to remember
- Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac) opens the DevTools in Chrome, Edge, and Firefox.
- Ctrl + Shift + C directly activates the selector mode, ready to hover over the page.
- F12 works on most desktop browsers as a quick alternative.
These shortcuts avoid going through context menus, saving time when inspecting multiple elements in succession.
Complete source code or Elements panel: two different readings of HTML
People often confuse “View Page Source” (Ctrl + U) with the Elements panel of the DevTools. Both show HTML, but not the same.
“View Page Source” provides the raw HTML file as sent by the server. It is a static document, frozen at the time of loading. You find the basic structure: head, body tags, links to CSS and JavaScript files.
The Elements panel, on the other hand, displays the DOM (Document Object Model), the “live” version of the HTML after JavaScript execution. If a script adds a dropdown menu or modifies text on click, these changes appear in the Elements panel but not in the raw source code.
When to use one or the other
To spot meta tags, links to stylesheets, or the general structure of a page, the raw source code is sufficient. To understand how an interactive component works (a carousel, a dynamic form, a tab), the Elements panel is the right entry point.
A common pitfall: you search for a tag in the source code, can’t find it, and conclude it doesn’t exist. It has simply been generated by JavaScript after loading. Feedback on this point varies across browsers, but the rule remains the same: if the content is dynamic, you go through the DevTools.
Spotting useful HTML tags without reading everything
A web page often contains several hundred lines of code. Reading everything would be counterproductive. Instead, we target the tags that structure the visible content.
Headings (h1 to h6) form the backbone of the page. Spotting the h1 gives the main title, while h2 delineates the major sections. By expanding the DOM tree in the DevTools, you can visualize this hierarchy without reading the rest.
HTML5 semantic tags also help to navigate quickly:
- nav encloses the main navigation menu.
- main contains the central content of the page, excluding the header and footer.
- footer groups the footer information (legal notices, secondary links).
- article isolates a block of standalone content, like a blog post or a product sheet.
When these semantic tags are used (which is not always the case), they allow navigation in the code like in a table of contents. You expand nav to see the menu structure, and expand main to access the content.
Modify HTML live to test and learn
The Elements panel of the DevTools allows you to modify the HTML displayed on the screen. Double-click on a text, and you can change it. Right-click on a tag, and you can delete it, duplicate it, or add a new one. These modifications are temporary and disappear upon page reload.
This feature is a risk-free experimentation ground. For example, you can change the color of a button in the Styles panel (to the right of the HTML) to see the effect, or replace an h2 with an h3 to observe the difference in rendering. You learn the link between tags and visual rendering through direct trial.
A concrete use case
You spot a well-formatted block of text on a site. You inspect it: it’s a paragraph in a p tag, with a CSS class that applies a font size, color, and margin. By modifying the class or adding a CSS property in the Styles panel, you understand which style produces which effect. This visual loop, modify then observe, is more effective than a theoretical lesson for anchoring the basics.
The Console panel, right next to it, also allows testing simple JavaScript commands like document.querySelectorAll(‘h2’), which lists all h2 headings on the page. You get the structure of the sections in one line without manually expanding the DOM tree.
The HTML code of a web page is not a document reserved for developers. With the element selector, the distinction between source code and DOM, and the ability to modify rendering live, you have everything you need to dissect any site from your browser. The next time a layout intrigues you, the right-click is at your fingertips.
