What does an HTML import in Notion look like?

Notion does not directly support importing HTML files in the traditional sense like a web browser would. Instead, when you "import" HTML into Notion, it parses the HTML content and attempts to convert it into Notion's block-based structure. This means that the visual representation of the HTML will be translated into Notion's elements, such as text blocks, headings, lists, and so on.

Here's a breakdown of what happens when you import HTML into Notion:

1. No Direct HTML Rendering: Notion does not render HTML code directly. It doesn't function like a web browser that interprets and displays HTML, CSS, and JavaScript. Instead, it processes the HTML content to extract the text and structure.

2. Content Extraction: Notion primarily focuses on extracting the text content from the HTML. It will identify text within tags like <p>, <h1> to <h6>, and <li>, and convert them into corresponding Notion blocks.

3. Basic Formatting: Notion will attempt to preserve basic formatting such as headings, paragraphs, lists (both ordered and unordered), and bold/italic text. However, complex formatting or styling defined in CSS will not be retained.

4. Limited Support for Complex Elements: Elements like tables, images, and links are generally handled, but the presentation might not be identical to the original HTML. Images are usually imported as image blocks, and links are converted into clickable links within Notion.

5. No JavaScript Execution: Any JavaScript code within the HTML will be ignored. Notion does not execute JavaScript, so interactive elements or dynamic content will not function.

6. CSS is Ignored: CSS styles are not applied. Notion uses its own styling system, so any custom styles defined in the HTML's CSS will be discarded.

7. Code Blocks: If you have code snippets within <code> or <pre> tags, Notion will typically convert them into code blocks, preserving the code's text content.

Example:

If you import the following HTML:

<h1>My Heading</h1>
<p>This is a paragraph with <b>bold</b> text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<a href="https://example.com">Link to Example</a>

Notion will likely create:

- A Heading 1 block with the text "My Heading".

- A Paragraph block with the text "This is a paragraph with bold text." (The bold text will be formatted as bold in Notion).

- An Unordered List block with two list items: "Item 1" and "Item 2".

- A Link block with the text "Link to Example" that links to "https://example.com".

In summary, importing HTML into Notion is more about extracting content and basic structure rather than rendering the HTML as it would appear in a browser. It's a way to bring text and simple formatting into Notion, but it won't preserve complex styling or interactive elements.

Learn more about this