askvity

How do I download a web page as HTML?

Published in Web Development 3 mins read

You can download a webpage as HTML using several methods, depending on your browser and desired level of completeness. Here's how:

1. Using the "Save As" Option

This is the simplest and most common method.

  • Right-click anywhere on the webpage you want to save.
  • Select "Save As..." from the context menu. (Alternatively, use the keyboard shortcut Ctrl+S on Windows or Command+S on macOS).
  • In the "Save As" dialog box:
    • Choose a location on your computer to save the file.
    • Enter a filename for the HTML file.
    • In the "Save as type" or "Format" dropdown menu, select "Webpage, HTML Only" or a similar option. This will save only the HTML source code. If you select "Webpage, Complete," it will save the HTML along with all associated resources like images, CSS, and JavaScript in a separate folder.
  • Click "Save".

2. Using Browser's Developer Tools (Inspector)

This method allows for more control and can be helpful if the "Save As" option doesn't work as expected.

  • Open the browser's Developer Tools: Right-click on the page and select "Inspect" or "Inspect Element". Alternatively, you can use the keyboard shortcuts:
    • Windows/Linux: Ctrl + Shift + I or F12
    • macOS: Cmd + Option + I
  • Navigate to the "Elements" or "Sources" tab. The tab name might vary slightly depending on the browser.
  • Find the <html> tag: In the "Elements" tab, the entire HTML structure is displayed. You can usually find the root <html> tag at the very top. In the "Sources" tab, look for the main HTML file. This is often named after the URL of the page, ending in .html.
  • Right-click on the <html> tag (Elements) or the HTML file (Sources).
  • Select "Copy Outer HTML" (Elements) or "Save as..." (Sources).
  • If you copied the outer HTML, paste the content into a text editor and save the file with a .html extension.

Choosing the Right Method

  • "Save As, HTML Only": Best for quickly grabbing the HTML source code without associated resources. This is useful when you only need the structure and content of the page.
  • "Save As, Webpage Complete": Suitable when you want to save the entire webpage, including images, CSS, and JavaScript. This allows you to view the page offline as it appears online (mostly).
  • Developer Tools: Useful when you need more control over the process or when the "Save As" option isn't working correctly. It also allows you to inspect and modify the HTML before saving.

Related Articles