Google Docs is a very flexible word processor in several ways, but what some people don't know is that you can embed HTML into a Google Doc.
There are 3 ways to do this. One is copying an HTML document directly from a browser and pasting it into a Google Doc. The other is a trick using the HTML import function in Google Sheets to customize the HTML formatting that you can then embed into a Google.The third one, using Word.
1. Embed an HTML page in a Google Doc
If you are preparing a document that requires information from the web, the last thing you want to do is paste that information as text.
This is because most online data contains information such as tables, graphs, images and more. For example, taking notes for research on an essay would be much easier if you could embed HTML into a Google doc from a web page.
Fortunately, doing this in Google Docs is very easy. It's simplified by the fact that Google Docs will automatically insert pasted web pages to include the original formatting, where possible.
Select the section of the web page you want to include in your document. Press Ctrl-C on the keyboard to copy that section.
Then, open the Google document you want to embed that HTML page in, right-click and select Paste. Be sure to select Paste and not Paste without formatting.
When you select Paste, Google Docs will automatically import the section of the page you've copied as much as possible into the formatting that appears on the original page. This includes images, URL links and headers.
You can check that the links are live by hovering over them. In Google Docs you'll see the external link appear.
In some cases the image format (such as the alignment on the page) may not match the original page from which it was copied.
2. Embed HTML in Google Doc with importHtml
Another method to embed HTML into your Google document is to embed the HTML into Google Sheets using the importHtml function. Then you can insert it into Google Docs.
Note that instead of embedding a section of the page, this function will insert the entire page. However, there is a way to avoid this by using an index number in the syntax of the function to import only one table or list on the page.
For example, let's say you want to embed the fourth table from the Wikipedia website on US demographics. First, open a new Google Sheets spreadsheet. In the first cell of the spreadsheet, type the function:
=ImportHTML("https://en.wikipedia.org/wiki/Demographics_of_the_United_States", "table", 4)
When you press Enter, this will import the fourth table of the web page and insert it in the table where the cursor is.
You now have the imported HTML data that you can use to embed in Google Docs. Format this table as you want it to look in Google Docs.
- To do this, select the table in Google Sheets and press Ctrl-C to copy the table.
- Place your cursor on the Google Docs document where you want to place the table, right-click and select Paste.
You'll see a pop-up window with a couple of options.
- Select Link to Spreadsheet and select the Paste button.
This inserts the Google Sheets table into Google Docs exactly in the original format.
By linking the table, you can always update the table in Google Sheets and it will automatically update in Google Docs.
3. Embedding HTML in Google Docs using Word
If you have your simple HTML code saved in a .html or .htm file, you can open it in Microsoft Word first. Word always tries to render an HTML file. You can then import this document into Google Docs and copy the entire page or a section of the page into the document you're editing.
To do this, open Microsoft Word and its HTML file. You should see the file rendered the way it would look inside a browser.
Save this document in Word format.
Then, go back to Google Drive and upload the file to your Google Drive account.
Once uploaded, right-click and select Open with, then select Google Docs.
This will open the document in Google Docs format, which is as close to the HTML representation as possible.
Now you can copy the entire HTML file, or just the section you want. Then paste it into the Google Docs document you're editing.
Here are three ways to embed HTML into a Google document. The option you choose depends on the tools you have available. It also depends on whether you want the whole page or just a section and how much accuracy you need to match the original format rendered in HTML.