Four approaches and an interesting insight.
It depends on exactly what you intend to do with the result?
There are several approaches.
None of them are what I’d call clean, but depending on your goal, one or more of them might work for you.
Become a Patron of Ask Leo! and go ad-free!
Copying a Web Page
Copying a web page by printing or saving to PDF gives you the highest fidelity copy to save, as does printing to paper. Copy/Paste into another application like a word processor can work, but often results in loss of formatting so may be good only for portions of the page. A variety of clipping/snipping tools, like Evernote, are good alternatives and often provide several approaches.
Print or Save to PDF
If all you’re attempting to do is save a copy for your records, this is my top recommendation.
I do it myself for my banking records. I visit my bank’s website every month, display the statement, and then “print” it to a PDF file, which I then save.
PDF is perfect for several reasons. They’re easy to produce, and PDF is so ubiquitous you probably already have a reader.
While viewing the webpage you want to copy, type CTRL+P to print, and then, depending on your system or browser, select “Save as PDF”, or perhaps “Print to PDF” as the “Printer” to print to.
It’ll ask you what to name and where to save the file. The result will be a PDF of the webpage saved for your records.
Print to paper
It’s probably not what you’re looking for, but it should be said. Sometimes for archival purposes, a hard copy is the way to go.
Some HTML pages print differently than they appear on screen. This is controlled by how the webpage was designed. If you print this page, for example, items such as the advertisements and menu bar will not be printed. Ideally, printing will give you useful (but not necessarily identical) results. If your print function provides a preview, check it out to save yourself paper. Printing this page, for instance, requires 25 pieces of paper or more, because it includes the comments.
There are several approaches to copy/pasting a webpage, but there’s almost no chance of getting exactly what appears in your browser.
Depending on the page design and program you’re pasting into, many elements will not copy over, or will copy over differently. Consider that the same exact page viewed in two different browsers looks slightly different. You’ll see the same page, but not the same exact results. If different browsers, which are specifically designed for viewing webpages, don’t display identically, then the chances of other programs (such as Word) doing so are basically zero.
In your browser, copy the entire webpage by doing this:
- Click anywhere within the webpage you want to copy.
- Type CTRL+A to select everything on the page.
- Type CTRL+C to copy that selection to the clipboard.
- Switch to Word (or your word processing program of choice).
- Type CTRL+V to paste.
If you do this with, say, the example article I used above, you’ll see it looks very different and quite wrong.
It includes things like the menu (much of which is hidden on screen, but not hidden from copy/paste), and much more you likely don’t want.
You can, of course, then edit that result down to whatever you want, but that can be a chore.
Instead of Ctrl+A, you might consider selecting only that portion of the webpage you want. Here’s that result of copy/pasting the article itself:
It’s certainly better, but far from perfect.
Once again, your exact results will vary dramatically depending on how the original webpage was constructed. It may be reasonably close, or it may result in a jumbled mess.
In general, copy/paste is a reasonable approach when you want to save only a portion of text from a webpage. Various limitations make it less than ideal for trying to save the entire page.
Some programs include what they refer to as “clipping tools” designed to clip content from web pages onto the clipboard.
Evernote is the tool I use for this purpose. Using its provided browser add-on, when you tell it to clip a page, it presents a list of different approaches to try.
Using the different options, you can see exactly what the clip will look like before Evernote saves it. Yet again, depending on how the page was designed, different approaches to clipping yield different results. It’s easy to try different ones to see which get the results you want.
In Evernote’s case, it then saves the result in a note, which may be enough, or may be something you can then copy/paste elsewhere, print, or export using Evernote’s built-in tools.
Clipping tools like this are often the best option, since they’re designed to do something close to what you’re looking for and attempt to understand the nuances of the webpage they’re operating on.
For the heck of it, right-click on the page you want to save and click on View page source. You’ll see a jumble of arcane HTML and other code that represents the webpage.
You could save this. It would be a canonical, exact copy of the webpage.
Except, of course, it’s not. It includes references to many other files you normally don’t see or care about: the style sheets, fonts, and pictures used to build the page when displayed on screen. None of those are included in the source; only the references to them.
Another approach in some browsers is a “Save page as…” function. Its location varies in different browsers; in Edge and Chrome it’s off the “More tools” menu.
This will also save the raw HTML to disk, but will also save all the supporting files referenced into a sub-folder.
“View source” or “Save page as…” can be valuable to locate the plain text behind a webpage — say hidden or hard-to-read text — but you’d have to wade through or search the HTML to find it. Outside of that, it’s only valuable to those trying to figure out why their web pages aren’t displaying properly.
If you found this article helpful (did you make a copy? ) you’ll love Confident Computing! My weekly email newsletter is full of articles that help you solve problems, stay safe, and increase your confidence with technology.
Subscribe now, and I’ll see you there soon,