Exporting InDesign to HTML: The Complete Workflow

May 7, 2021

June 3, 2025: I reviewed and tested the RegEx expressions below to ensure they work with the most current version of Adobe InDesign’s “Export to HTML (Legacy)” function. To Adobe’s credit, they have continued to improve the markup since this was initially posted.

This entry consolidates the actionable elements from each post in my Exporting InDesign to HTML series. This post will walk you through the necessary one-time setup steps and explain the workflow steps you must repeat each time an InDesign document is exported to HTML.

Using InDesign’s Export to HTML function requires three things:

  1. Initial one-time setup of paragraph, character, cell and table styles;
  2. Flowing your text, tables and graphics in an InDesign document; and
  3. A series of find/replace tasks in a code editor on the HTML markup each time it’s exported.

One-Time Setup of Styles

HTML tags must be mapped to specific paragraph and character styles in order for the Export to HTML function to work successfully. This mapping is done using the “Export Tagging” option when creating a paragraph or character style.

When setting up my styles in InDesign, I use the same style names as the standard paragraph and character style names in Microsoft Word.

Standard Word Styles

Here is my table of standard Word paragraph and character styles with the correct HTML tag associated to them.

Style Name Style Type HTML Tag
Title Paragraph <h1>
Heading 1 Paragraph <h2>
Heading 2 Paragraph <h3>
Heading 3 Paragraph <h4>
Heading 4 Paragraph <h5>
Heading 5 Paragraph <h6>
Normal Paragraph <p>
List Bullet Paragraph <li>
List Bullet 2 Paragraph <li>
List Bullet 3 Paragraph <li>
List Number Paragraph <li>
Strong Character – Tag: strong
– Class: strong
Emphasis Character – Tag: em
– Class: em
Standard Word Paragraph and Character Styles

To understand how I determined my list of standard styles, read Adobe CC Libraries: Paragraph and Character Styles. And to understand my initial process of mapping those styles in InDesign to HTML tags, read Exporting InDesign to HTML: The Basics.

Additional Paragraph and Character Styles

Most of the standard Word paragraph and character styles cover every situation when designing and preparing a document for export to HTML with one exception, “strong emphasis.” Here is my table of additional paragraph and character styles I created.

Style Name Style Type Export Tagging Settings
HTML Acronym Character – Tag: abbr
– Class: abbr
HTML Cite Character – Tag: cite
– Class: cite
HTML Code Character – Tag: code
– Class: code
Hyperlink Character – Tag: [Automatic]
– Class: none
Strong Emphasis Character – Tag: [Automatic]
– Class: strong italics
Footnote Reference Character – Tag: [Automatic]
– Class: text-footnote-reference
Custom Paragraph and Character Styles

Cell and Table Styles

These styles are created in InDesign and, when used, make it not only easy to consistently format tables across documents, but also easy to execute find/replace commands in HTML code editors after the InDesign document has been exported to HTML.

Name Style Export Tagging Options
Table – Header Tag: [Automatic]
Table – Normal Tag: [Automatic]
Table – Caption – Tag: p
– Class: table-caption
Table Paragraph Styles to Create
Name Settings
Table Header Paragraph style: Table Header
Table Data Paragraph style: Table Normal
Table Cell Styles to Create
Name Settings
Table Normal – Header Rows: Table Header
– Body Rows: Table Data
Table Styles to Create

To understand my workflow for preparing tables for export to HTML, read Exporting InDesign to HTML: Tables.

Image Styles

This is a multi-step process involving creating the following styles and then grouping them:

  • Paragraph styles,
  • Object styles,
  • Text frames, and
  • Image frames.

Rather than include the steps to create the object styles, text and image frames here, take a look at Exporting InDesign to HTML: Images. It will walk you through setting these up initially and saving it to a CC Library.

Once one is created, add it to an Adobe CC Library so that it’s easily available whenever needed.

Name Style Export Tagging Options Notes
Caption – Tag: p
– Include classes in HTML: checked
– Class: caption
Credit – Tag: p
– Include classes in HTML: checked
– Class: credit
Figure – Tag: figure You will never actually assign this style, but one of the object styles you create will. It’s necessary for spacing.
Image Paragraph Styles to Create

Short Workflow Once HTML is Exported

After flowing text, tables and images into the InDesign document and applying all the styles, export the HTML and complete a few cleanup tasks in a code editor.

Export the HTML

In InDesign export the HTML:

  1. From the File menu choose Export.
  2. In the window that opens, from the “Format” menu choose HTML (Legacy).
  3. In the “General” and “Image” panes leave everything as-is.
  4. In the “Advanced” pane:
    1. Select Include classes in HTML
    2. Uncheck Generate CSS
  5. Click OK

The HTML will export.

Cleanup Search and Replace Tasks

Using any code editor complete the following search and replace tasks. Be sure “use regular expressions” is checked for these unless indicated otherwise below.

Tables

Using search and replace in the exported HTML document:

  1. Fix the <table> tag and adjust the caption
    1. If the table has a caption:
      1. Find: <p class="table-caption">(.*?)</p>[\r\n\t]+<table id="(.*?)" class="Table---Basic">
      2. Replace: <table>\n\t\t\t\t<caption>$1</caption> (The \n inserts a new line and the multiple \t’s insert tabs.)
    2. If the table does not have a caption (this will create a <caption> tag to meet accessibility requirements; you will need to write a caption):
      1. Find: <table id="(.*?)" class="Table-Normal">
      2. Replace: <table>\n\t\t\t\t<caption>$1</caption> (The \n inserts a new line and the multiple \t’s insert tabs.)
  2. Fix the <tr> tags (a regular expression is not used here):
    1. Find: <tr class="Table-Normal">
    2. Replace: <tr>
  3. Fix the <th> tags by removing unnecessary classes and unnecessary <p> tags:
    1. Find: <th class="Table-Normal Table-Header" scope="col">[\r\n\t]+<p>(.*?)</p>[\r\n\t]+</th>
    2. Replace: <th scope="col">$1</th>
  4. Fix empty <th> tags:
    1. Find: <th class="Table-Normal Table-Header" scope="col" />
    2. Replace: <th>&nbsp;</th>
  5. Fix the <td> tags, remove unnecessary classes and unnecessary <p> tags:
    1. Find: <td class="Table-Normal Table-Data">[\r\n\t]+<p>(.*?)</p>[\r\n\t]+</td>
    2. Replace: <td>$1</td>
  6. Fix empty <td> tags
    1. Find: <td class="Table-Normal Table-Data Table-Data" />
    2. Replace: <td>&nbsp;</td>

Extra Classes in Text

Using search and replace in the exported HTML document:

  1. Fix the <code class="code">tag
    1. Find: <code class="code">
    2. Replace: <code>
  2. Fix the <cite class="cite"> tag
    1. Find: <cite class="cite">
    2. Replace: <cite>
  3. Fix the <var class="var> tag
    1. Find: <var class="var">
    2. Replace: <var>
  4. Fix the <span class="strong-em"> tag
    1. Find: <span class="strong-em">(.*?)<span>
    2. Replace: <strong><em>$1</em></strong>
  5. Remove the text anchors after <h2, <h3>, and <h4>
    1. Find: <a id="_idTextAnchor(.*?)"></a>
    2. Replace: leave the field empty
  6. Remove hyperlink <span> tags:
    1. Find: <span class="Hyperlink">(.*?)</span>
    2. Replace: $1

Footnotes

Using search and replace in the exported HTML document:

  1. Correct markup and style for footnote references in the content:
    1. Find: <span target="_blank"><a id="(.*?)" class="_idFootnoteLink" target="_blank" href="(.*?)#(.*?)">(.*?)</a></span>
    2. Replace: <a href="#$3" id="$1" class="footnote-ref">$4</a>
  2. Correct markup and class for footnote section, including <ol> class:
    1. Find: <hr class="HorizontalRule-1" />[\r\n\t]+<section class="_idFootnotes">[\r\n\t]+<ol class="_idFootAndEndNoteOLAttrs">[\r\n\t]\[\r\n\t]+</ol>[\r\n\t]+</section>
    2. Replace: <footer class="footnotes">\r\n\t\t\t\t<h6>Footnotes</h6>\r\n\t\t\t\t<ol class="footnote-list">\r\n\t$1\r\n\t\t\t\t</ol>\r\n\t\t\t</footer>
  3. Correct markup and class for individual footnotes
    1. Find: <li id="(.*?)" class="_idFootnote"><p class="Basic-Paragraph"><a class="_idFootnoteAnchor" target="_blank" href="(.*?)#(.*?)">(.*?)</a>(.*?)</p></li>
    2. Replace: <li id="$1" class="footnote"><a class="footnote-anchor" href="#$3">$4</a>$5</li>

Images

Using search and replace in the exported HTML document to add your website’s domain to <img> tag ref attributes:

  1. Find: <img src="(.*?)" alt="(.*?)" />
    1. Replace: <img src="https://www.brettrospective.com/$1" alt="$2" />

Wrapping Up

Once these cleanup tasks are done you should have semantically correct HTML markup ready to post to your website.