Viewing HTML in the Browser
Become a web detective and learn how to look "under the hood" of any website to see its underlying HTML code.
Method 1: View Page Source
The quickest method is to right-click anywhere on a webpage and select "View Page Source". This opens a new tab showing you the raw, original HTML file exactly as the server sent it. It's perfect for a quick, unfiltered look at the code.
Method 2: Developer Tools
For more power, press F12 to open the Developer Tools. The "Elements" tab shows the live Document Object Model (DOM), which might be different from the source if JavaScript has made changes. You can inspect elements, see their CSS, and even make temporary changes.
Practice Zone
Interactive Test 1: Categorize the Tools
Categorize these tools based on what they show you.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Know the Shortcut
Rellena los huecos en cada casilla.
To open the powerful Developer Tools in most browsers, you press the key.
Practice Example: Inspect an Element
Practical Tip: You can inspect any element on this page! Right-click the button below and choose "Inspect". Watch how it highlights in the 'Elements' panel.
Source Code vs. The DOM
You've learned two ways to see code, but they show different things. Understanding this difference is key to web development.
📄 View Page Source: The Original Blueprint
This shows the raw HTML text file, exactly as it was sent from the server. It's a static snapshot. It will not show any changes made by JavaScript after the page has loaded.
Think of it as the original architectural drawing of a house.
🌳 The DOM: The Living Building
The Document Object Model (DOM) is a live, interactive tree of objects that the browser creates in memory. JavaScript can add, remove, or change these objects. The "Elements" tab in Developer Tools shows you this live DOM.
Think of it as the actual, finished house, which can be renovated or redecorated at any time.
Practical Takeaway: Use "View Source" to see the initial structure. Use the "Elements" tab in Developer Tools to debug and see the current state of the page after JavaScript has done its work.
Developer Tools Glossary
- Elements Tab
- Shows the live HTML DOM tree. You can select elements, view their CSS styles, and make live edits to both HTML and CSS.
- Console Tab
- An interactive JavaScript command line. It's used to log messages, run code, and debug JavaScript errors.
- Network Tab
- Shows all the files (HTML, CSS, images, etc.) the browser has requested from the server. It's essential for diagnosing slow-loading pages.
- DOM (Document Object Model)
- The browser's internal representation of a webpage as a tree of nodes. It's what JavaScript interacts with to dynamically change a page's content and style.