Export InDesign CS2/CS3 to HTML

January 15, 2008 - 2:00am ||| 2 Comments | Add new

Ever since I waved goodbye to my beloved XPress-to-HTML converter tool, BeyondPress XT (Extensis dropped it after QuarkXPress v5 was released) I've been searching for the equivalent plug-in or feature for Adobe InDesign. I needed a way to quickly export the text and images from my InDesign files to HTML, and I was constantly asked by my clients how to do the same.

Imagine my elation when InDesign CS3 shipped with a new feature, Export to XHTML (under the File menu). Imagine my disappointment when I couldn't get it to export anything that could be called "usable." Yes, it gets the paragraph breaks right, but that's about it.The HTML is either completely devoid of formatting (losing all italics, bolds, headlines and subheads) or it's riddled with superfluous CSS "span class" styles which I have to tediously strip out in my web authoring program.

What I need, and I think most users need, is basic HTML mark-up that maintains bolds with a <strong> tag, italics with an <em> tag, subheads and headlines with <h1>, <h2> etc. tags, and so on. When that HTML file is linked to a web site's existing CSS file, the tagged text takes on the look designed by the web team. The CSS might define text surrounded by <h1> tags to be 24 pt. Verdana, colored dark blue, for example.

Yes, it would be useful to include a few CSS tags in the exported HTML, but this version 1 Export to XHTML feature doesn't offer any control over how and where CSS is included. It's all (blech) or nothing (blech).

——-
A Better Way
——-
One day I sat down to try an alternate method my friend and occasional freelance trainer, Jim Maivald, had mentioned to me over the phone. Jim's all about XML (in fact, his book, A Designer's Guide to InDesign and XML, just came out from Peachpit Press) and so of course his technique involved using InDesign's XML abilities to spit out usable HTML. I'm not an XML expert, but I found it was a lot easier than I imagined. A LOT.

After a few false starts and some useful discoveries, I ended up with an HTML file that was exactly what I wanted. All the correct tags were in place, my subheads were tagged with <h2>, my local formatting used standard tags like <em> and <strong>, and there were no extra CSS calls to strip out. Eureka!

Best of all, it works just fine with CS2 as well as CS3 (in fact, I came up with this when CS2 was the latest version), and the resulting HTML file can even include images and links.

After adjusting a few simple preferences, it's a simple four-step process:

1. Make sure all the local text formatting is styled with character styles
2. Add HTML tags to the Tags panel (normally used for XML tagging)
3. Use InDesign's automated Map Styles to Tags feature
4. In the Structure pane, tweak the order of the content as necessary

Now you can export the entire document or a specific article to XML, and since you're using HTML tags instead of XML tags, you end up with a quite usable HTML file!

I wrote this up a while ago for the blog I co-host with David Blatner, InDesignSecrets.com. My article is in two parts; the first one covers the basic step-by-step (in detail, with screen shots); the second one covers how to get your images, complete with InDesign effects like drop shadows if you want, into the HTML file at the correct locations.

How to Export Basic HTML Out of CS2
http://indesignsecrets.com/how-to-export-basic-html-out-of-cs2.php

How to Export Basic HTML, Part 2: Images
http://indesignsecrets.com/how-to-export-basic-html-part-2-images.php

Be sure to read the visitor comments that follow the posts, there's some useful information in there, too. (In comment #4 for the first story, I compare the method to CS3's Export to XHTML function.) And feel free to add a comment yourself! No need to register, just start filling out the comment field with your thoughts and click Submit.

  

Comments (Subscribe to Comments RSS)

1 February 17, 2011 - 9:17pm by Wonder File (not verified):

Thanks for the article. This knowledge fulfill our thirst of learning.

2 November 5, 2012 - 10:06pm by Lovie.M (not verified):

Hello there, I love your phorum www.designgeek.com . Is there something I can do to receive updates like a subscription or some thing? I am sorry I’m not acquainted with RSS? Wish you luck!

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.