Export content as HTML5

Learn to export a page, spread, or selected object to HTML5 format type.

Export an InDesign document to HTML5 to ensure cross-platform compatibility and support rich interactive content, enhanced user engagement, and accessibility. It also improves SEO and web page performance. When you export content to HTML5, you can control how text is exported.

Export HTML5 Package

  1. Select File > Export.

  2. Select HTML5 from Save as type (Windows) or Format (macOS).

  3. Select Use InDesign Document Name as the Output Filename if you want the same file name, and select Save.

  4. Select HTML text tags or HTML SVG tags as per your requirement in the Export HTML5 Package dialog. To copy fonts, select Copy Fonts (Except activated from Adobe Fonts). This includes CJK fonts.

    Export HTML5 package dialog
    You can now export your InDesign document as an HTML5 package.

  5. Select Export.

HTML5 Export: Key properties applied from the Publish Online dialog 

Title

This value will be used to name the exported folder.

Description

Not exported.

Pages

Defined in the Publish Online dialog. All the pages will be included if exporting directly from File > Export > HTML5.

Export as

  • Single: Each page is exported as an individual HTML file, each linked to the main index.html.
  • Spread: Each spread is exported as a single HTML file, linked to the main index.html.

Enable Password Protection

Not applicable.

Cover Thumbnail

Thumbnails are included in the HTML5 package.

Image Settings

Settings from the Publish Online dialog will be applied.

Download PDF Settings

Not applicable.

More Settings

Not applicable.

Google Analytics

If a Google Analytics tag is included in the Publish Online dialog, it will be added to the index.html file in the HTML5 export. When hosting the pages on your website, ensure you obtain user consent via a cookie banner if required.

Quick fixes to resolve HTML5 rendering issues

  • If you used the HTML text tags option, ensure to select the Copy Fonts option during export.
  • If you selected the Copy Fonts option, check if the issue is still caused by a missing font. Try the HTML SVG tags option to confirm if it's a font problem.
  • If it's indeed a font problem and your HTML SVG tags option looks great, check if the fonts you've used in the InDesign document are exported and placed in the fonts folder of the package. If they're not, you may have to copy and place the fonts in the folder manually. 
  • If, after placing the fonts, the issue still persist, please reach out to the Customer support team.
Poznámka:

The use of fonts on a website must comply with the terms of your font license. Self-hosting fonts for a website may require a separate license.

Difference between HTML5 Package and HTML (Legacy)

The HTML5 Package aims to mimic the layout of the InDesign file in the output HTML5 from the start. On the other hand, HTML (Legacy) is a bottom-up approach to creating HTML from an InDesign file, and it has limited layout similarities with the original file.

Known issues

  • Effects such as drop shadow, blur, etc. for text are not exported properly.

Workaround: Select HTML SVG tag instead of HTML text tags to export text.

More like this

Have a question or an idea?

Ask the Community

If you have a question to ask or an idea to share, come and participate in Adobe InDesign Community. We would love to hear from you and see your creations.

Získajte pomoc rýchlejšie a ľahšie

Nový užívateľ?