Join Anne-Marie Concepción for an in-depth discussion in this video Exporting cleaner HTML, part of InDesign CC 2018 New Features.
- [Instructor] Now, in InDesign CC 2018, you can export HTML that is much cleaner, much more simple than in previous versions, because you have much more control over the class definitions that go along for the ride. This is akin to, in InDesign, if you've ever imported a word file with a ton of formatting, and then spent half the day trying to remove those styles that came along with Word and replace them with InDesign styles, well, this is what web developers often have to do with HTML that's been exported from InDesign, either HTML files, or an EPUB, which is actually made up of HTML files.
There's a lot of junk code, according to them, extra code, extraneous markup that doesn't need to be there that they have to clean up from InDesign. Well, now you can turn over much cleaner HTML files. So let's see how that's done with this very simple document that I've created. I'll switch to normal editing mode, and we just have a couple text frames with a few paragraphs. Each one of these paragraphs has a style applied. That's headline. This one is basic. This is angry, sad, happy, you know, green is happy, and then we have a caption and an anchored picture.
Okay, so let's go ahead and export this to HTML. You go to File and choose Export. I usually press Command or Control + E. Choose HTML from the format dropdown, and we'll save it out to the desktop. This first time, you're just going to do it with the default settings. We're exporting the document. We want to view it in our default browser, and in Advanced is where you see the new option, Don't include classes in HTML. That is not selected by default. We're going to leave it not selected, and we'll click OK.
So here's how it opens up in Chrome. It is reflecting the same formatting as in InDesign, and if we look at source, which is Command + Option + U here on my Macintosh, you can see all of the classes that have been applied, so every style becomes a class, headline, basic, fiery, and so on. There's also IDs that get generated. All sorts of fun stuff that web developers love to see, and if we look at the CSS file that was created by InDesign, you can see how all of the classes have very detailed lists of attributes, which also drives web developers crazy, because, usually, you want the minimum number of attributes necessary, so they're often cleaning up a lot of this class information.
All right, so let's come back here and see the new feature at work. I'm going to go ahead and export to HTML. This time, I'll call it noclass, and click Save, and we go to Advanced and turn on that option, click OK. We get the basic structure of the file. All of the paragraphs appear in the right order, but there's no formatting applied to it, which is perfectly fine for the web developer because they're going to apply their own styles or their own formatting. If we look at the source code, you can see how much simpler it is.
Look at this. Compared to this guy with all of this class information and IDs. Look at how nice and clean it is, and yet the structure still worked. Now, even better, ladies and gentlemen, is that you have more control over all or nothing. You can choose which of these styles do not get exported. I love the fine-tuning that they gave us in CC 2018. How do you do the fine-tuning? You use the paragraph style to turn off the export of class information for that style, so if we didn't want any class information for headline, we could just edit the headline paragraph style, come down to Export Tagging, and turn off Include Classes, or you could do a whole bunch of them at once by going to the Paragraph Style menu, choosing Edit All Export Tags, and then go through here and turn off the styles that you don't want to emit class information when you export it.
So you just click the checkbox under Include in HTML. Everything's included by default, and you turn off the ones that you don't want, okay, so I'll click OK, and now we export to HTML again. We'll call this someclass, and just make sure to choose, under Advanced, that you do want to include the classes, so everything else, you do want class information. Click OK, and now you have some with formatting instructions and some without. It's up to you. This kind of control over your exports also applies to EPUB.
If we export to EPUB (Reflowable), click Save. If you go to HTML & CSS, you'll see the same option. Don't include classes in HTML, or if you wanted to fine-tune it, you would edit those individual paragraph styles and choose Include classes, that would include all classes except for the ones that you said no. Additionally, it can be made part of an object style. So, say, for example, that there are certain kinds of text frames around that you do not want to emit class information or ID information.
You could create and object style for those. I already created one called No class. Let's just go ahead and edit it. I'll Edit "No class", and at the bottom of the Attributes, we have Export Tagging, and here, again, you can turn off Include Classes in HTML. It is turned on by default. So that is the new feature of exporting simple HTML out of InDesign, and I'm sure it's going to make a lot of workflows a lot easier.
- Dynamic, automated endnotes
- Creating more accessible PDFs
- Filtering font lists by class and similarity
- Using paragraph borders
- Linking text frames in CC Libraries
- Exporting cleaner HTML
- Specifying object size and position in an object style
- Using InDesign templates from Adobe Stock
- Accessing the Duden dictionary for German text