You can copy the entire HTML of a webpage in several ways depending on whether you want the original source code, the live DOM, or the rendered HTML after JavaScript has modified it. Below is a complete, detailed guide for all methods.
1. Copy the Original HTML Source (static HTML)
This gives you the HTML exactly as sent from the server (before JavaScript changes it).
Method A — “View Page Source”
- Right-click anywhere on the page
- Click View Page Source (or press
Ctrl + U/Cmd + Option + U) - Select all →
Ctrl + A - Copy →
Ctrl + C
✔ Gets the original static HTML
❌ JavaScript-generated elements will NOT appear
2. Copy the Live HTML (DOM after JavaScript runs)
Use this if the page uses React, Vue, Angular, or loads content dynamically.
Method B — Copy the Entire DOM from Developer Tools
- Open Developer Tools (
F12orCtrl + Shift + I) - Go to the Elements tab
- Right-click the top
<html>element - Select Copy → Copy outerHTML
✔ Gets full HTML after scripts modify it
✔ Includes elements added dynamically
❌ Does not include external CSS or JS files
❌ Some virtual DOM frameworks may hide internal structure
3. Copy HTML Using JavaScript
Method C — Copy entire page HTML using console
- Open Developer Tools
- Go to Console
- Run:
copy(document.documentElement.outerHTML);
This copies the entire current HTML document to your clipboard.
Variations:
Copy only <body>
copy(document.body.outerHTML);
Copy only <head>
copy(document.head.outerHTML);
✔ Works on any webpage
✔ Gives the live HTML
❌ Cannot bypass restricted/secure pages
4. Download the Entire HTML File
Method D — Save Page As
- Press
Ctrl + S - Choose Webpage, HTML only or Webpage, Complete
- Save
✔ Gets local copy of HTML file
✔ “Webpage Complete” includes images, CSS, etc.
❌ Does not show dynamically generated HTML
5. Copy the Rendered HTML via “Inspect Element”
Useful if you only want a section.
Steps:
- Right-click the part you want
- Choose Inspect
- Right-click the highlighted element
- Choose Copy → OuterHTML or Copy → InnerHTML
Differences:
- OuterHTML = element + contents
- InnerHTML = contents only
6. Using Browser Extensions (for heavy pages)
Extensions such as:
- Web Scraper
- HTML Downloader
- Scraper (Chrome)
These help if:
- A website loads content slowly
- The site uses a lot of AJAX
- You need repeated scraping
7. Linux / Command Line (cURL, wget)
Download static HTML:
curl https://example.com > page.html
Download the whole site (advanced):
wget -r https://example.com
✔ Good for developers
❌ Does not execute JavaScript
❌ No dynamic HTML
8. Using Python (for developers)
If you want the HTML programmatically:
Static HTML:
import requests
html = requests.get("https://example.com").text
print(html)
JavaScript-rendered HTML (using Selenium):
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
print(driver.page_source)
Which Method Should You Use?
| Scenario | Best Method |
|---|---|
| You want the original source HTML | View Page Source |
| You want the HTML after JavaScript loads | DevTools → Copy outerHTML |
| You want to automate copying | document.documentElement.outerHTML |
| You want to save the page | Save As → Webpage Complete |
| You need live data from dynamic sites | Selenium / DevTools |
| You only need a portion of HTML | Inspect Element → Copy OuterHTML |
Other Courses:
