To view a website’s HTML source code, use built-in browser tools: right-click any page element and choose Inspect (or Inspect Element), or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open Developer Tools. The Elements panel shows the live DOM, while pressing Ctrl+U on many sites displays the static HTML source. These techniques help you inspect structure, debug issues, audit performance, and verify markup. This guide explains approaches that work across modern browsers and when server settings may limit source access.
Open Developer Tools in Common Browsers
Every major browser includes developer tools for inspecting HTML and live DOM. Use keyboard shortcuts or the browser menu to open them consistently:
- Chrome and Edge: Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac), then select the Elements panel.
- Firefox: Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac), with Responsive Design Mode available for testing layouts.
- Safari: Enable Develop menu in Preferences, then choose Develop > Show Web Inspector.
Elements Panel vs Page Source
The Elements panel shows the current Document Object Model (DOM) after scripts may have modified it. For the original server response, use View Page Source (browser menu or Ctrl+U), which displays the static HTML as delivered. Understanding both helps distinguish runtime changes from authored markup.
Quick Reference: Open and Inspect HTML
| Action | Keyboard Shortcut | Menu Path |
|---|---|---|
| Inspect element | Ctrl+Shift+I / Cmd+Option+I | Right-click → Inspect |
| View page source | Ctrl+U | File → Open File… (limited use) |
| Open DevTools panels | Ctrl+Shift+J (Console) / Cmd+Option+J | More tools → Developer tools |
Using the Elements Panel to Explore HTML
Once DevTools is open, the Elements panel reveals tags, attributes, and computed styles. You can edit attributes live, toggle classes, and understand layout structure. Use the Breadcrumb trail at the top of the panel to navigate from any node to its parent elements quickly.
Search and Filter
Use the search box within Elements to find IDs, classes, or text strings. Right-click any node Copy options include Copy outerHTML, Copy selector, and Copy JS path, which streamline scripting and testing workflows.
View Page Source and Raw Markup
View Page Source (Ctrl+U) shows the HTML exactly as sent by the server, without JavaScript modifications. Some sites dynamically render content, so the source may appear minimal while the DOM contains richer data. In such cases, the Elements panel reflects the runtime state more completely.
Limitations When Source Is Restricted
Server settings, Content Security Policy (CSP), and frameworks that render on the client can limit access to raw source via View Page Source. Browser extensions and privacy tools may also interfere. When direct source viewing is restricted, the DOM inspector remains available through DevTools.
Practical Use Cases and Workflows
Inspecting HTML supports debugging layout issues, verifying structured data, and testing CSS selectors. It helps audit accessibility attributes, analyze third-party scripts, and understand responsive behavior. For developers, copying selectors and checking computed styles accelerates troubleshooting and improves authoring precision.
Minimal Checklist for Inspecting HTML
- Right-click the element and choose Inspect.
- Use the Elements panel to explore nodes and attributes.
- Press Ctrl+U to see the server response when available.
- Search for IDs, classes, and data attributes to locate components.
- Copy selectors or outerHTML for use in code or documentation.
Browser Compatibility and Settings
Modern versions of Chrome, Edge, Firefox, and Safari support Developer Tools with consistent shortcuts. Ensure the Develop menu is enabled in Safari Preferences. Corporate-managed devices may restrict DevTools through policy; in those cases, workarounds may be limited by IT controls.
When Source Access Is Limited
If View Page Source is disabled or the DOM is heavily altered by JavaScript, alternative approaches include using browser extensions designed for source viewing, checking network payloads for templates or static assets, or employing server-side access when you control the host. Respect robots.txt and avoid viewing source on systems where you do not have authorization.