Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Mapping styles to export tags

From: InDesign CS5.5 New Features Overview

Video: Mapping styles to export tags

InDesign is being used to create much more than standard print-based products nowadays. InDesign is being used as a launch pad for other media formats such as XHTML, EPUB, and PDF. Although InDesign has been able to export to these formats for some time now. InDesign CS5.5, has made the process of exporting to these formats easier, and more accurate, by providing the new export tagging feature. This allows you to map certain text elements to standard XHTML, EPUB, and PDF tags.

Mapping styles to export tags

InDesign is being used to create much more than standard print-based products nowadays. InDesign is being used as a launch pad for other media formats such as XHTML, EPUB, and PDF. Although InDesign has been able to export to these formats for some time now. InDesign CS5.5, has made the process of exporting to these formats easier, and more accurate, by providing the new export tagging feature. This allows you to map certain text elements to standard XHTML, EPUB, and PDF tags.

To improve web page creation, EPUB creation, and accessible PDF generation for users with visual impairments. I'm beginning this video with the brochure.indd file open on my computer, and if I scroll down to page 2, you'll see that I have some content, and I'd like to export this information to a web page. Now, the export tagging feature as I said before, applies to web pages, EPUBs and accessible PDF files. But in this video, I'm going to show you this feature by exporting to a web page. Now, the first thing I'm going to do is show you what your webpage is going to look like if I just export it without doing anything inside of InDesign at all. I should point out that the feature that we're going to be using it really requires that you use styles inside of your document.

And you'll see a little bit later in this video how that's going to affect the export tagging process. So the first thing I'm going to do, I'm going to come up to the File menu, and I'm going to choose Export. And in the Export dialog, I'm going to choose HTML for the format, and I'm going to go ahead and just put it inside of the folder that I'm currently working. So I'll click the Save button, and I'm going to leave these settings pretty much at their default, and I'm going to tell it to view the file after exporting.

So I'll go ahead and click the OK button and this is going to export this document to an XHTML file. Now, you really should not expect a final, complete web page when you use this feature, because that's really not what it's intended for. It's really intended for making it easy for you to repurpose content for the web. As you could see, the formatting has been retained fairly accurately. I mean, the, the images are fairly large; but our fonts, they're pretty much exactly what we had them set to.

Now, if I scroll down in this document, you, you really should not expect a complete web page when you look at this file, because in reality, InDesign is not intended for that purpose. It's designed to repurpose content for the web, rather than creating a final complete web page. What I'm going to do is I'm going to come up here to the View menu, and I'm going to choose View Source. And that's going to show me the XHTML code that InDesign has written for me. And if I scroll down here, you're going to see that there's a lot of CSS information up here at the top, which is fine.

But as I scroll down into my document, I get to the meat of the content. You can see that pretty much everything is tagged with VP tag and this was one of the problems even though it applied class attributes to the P tags. it's,it really has limited my ability to add any type of semantic markup to this document. So, what I'm going to do is I'm going to close this document. And I'll quit out of Safari for now. And I want to show you how we can improve this feature. Now, it's important to me to simply point out that traditionally in previous versions of InDesign, we have been able to do some mapping of styles to tags. But it was a fairly clunky method and it was really involved as far as getting the content that I wanted.

What I'm going to do in this particular document, is I'm going to use my type tool and I'm going to click inside of this text here, at the top. And I'm going to come over here to my Paragraph Styles panel, and you can see that this particular text is using the fun heading style that I've created. Now, I would like this heading to map to an H1 tag in my webpage. So what I'm going to do is I'm going to right-click on the fun heading style. If you're on a Mac and you're not using a two-button mouse, you can Ctrl+click.

And I'm going to choose Edit Font Heading. And in InDesign CS5.5, you are going to see a new option all the way down here at the bottom called export tagging. I'm going to click on that and you will see this whole new section that's avaialble for us to adjust. So you could see, currently, the tag for this heading is mapped to automatic, and that's exactly what we saw when we exported the web page. So in this tag drop down menu, I'm going to change this to an h1. You can see that InDesign is providing us with all of the standard XHTML tags down here.

So I'll choose H1 and I'm also going to point out at this time that you'll see that there's a different section down here for PDF. I can also map that text to a heading for an accessible PDF file. Since I'm only going to a webpage here, I'm not going to worry about that right now, but it's important if you create accessible PDF documents. This is a huge improvement on previous versions of InDesign. So I'm going to click OK. Then we've got some subheadings.

You can see that I have the subhead span, and then I've got some standard subheads here. So I'm going to right-click or Ctrl-click and choose edit subhead. And I'm going to go to the Export Tagging section. I'll change that to an H2, and I'm going to do the same thing for my subhead span, make sure that, that goes to an H2. And I should also point out that I can really type any tag that I want to in here. If I choose to, I can literally type, I can make one up as I go.

Even though, there's no guarantee that it's going to be formatted properly in my XHTML document, I can in fact, create whatever tag name I want to right here. So once again, I'll change this back to an H2, and in addition I can apply a class style to any of these. So, what I may want to do if this is a unique subhead, because I called this subhead span, I could create a class. Maybe I'll call this, span heading. You know, in that way I can call on it using CSS. Then go ahead and click OK.

I'm just going to scroll down a bit further. Over here, I have another subhead, this one is sidebar heading, I'm going to go ahead an edit that one, and we'll just make that one an H3, click OK. And that pretty much takes care of all my headings. Now, I'm just going to zoom in on some of this text here, because you'll also see in this area I have a character style applied. Now, this character style is not manually applied. It's actually being applied within a nested style, but we can see down here in the lower left corner of the character styles panel that the bold style is being applied.

Just like with our paragraph styles, I can also change the export tagging for a character style. Once again, I'll right-click or Ctrl-click on the bold character style and choose edit bold, and here in the export tagging area, I have inline tags that I can apply to this text as well. So, because this was bold, I'm simply going to apply the strong tag. This is great because I'm applying semantic mark up to my XHTML, and not relying strictly on classes... So I'll go ahead and click the OK button and that seems like it's going to be pretty good for this example.

So I'm going to press Command+0 on Mac, Ctrl+0 on Windows to just zoom out here, and I'll go to the File menu and, once again, I'm going to choose Export, and we're going to set the format to HTML. This time, I'm going to name this file Brochure_clean, and I'll click the Save button once again. And I'll make sure that I'm exporting the whole document. And once again, I'm really not going to change anything in here, I'm going to leave it the same, so that we have an equal comparison.

And I'll make sure that I'm going to view the HTML after exporting. If I click the okay button it's going to export a new XHTL file and it's going to open it in Safari. I'll scroll down and much of this is going to look the same, but when I get down to my main headings, you can see that here, this has certainly changed. These subheadings have changed as well. And so let's take a look at the code. Go to the View menu and choose View Source. If I scroll down, you're now going to start to notice that I still have a bunch of CSS styles that have been created in here.

But what is different, is that now you'll see that I have a H1 applied to that main heading. And there's a bunch of span tags that have been applied because of the fact was that nested style that had a bunch of individual character styles applied. But as I scroll down a little bit further, there's my subheading that is now an H2. The rest of the styles are P, here's another H2. And if I scroll down a little bit further I should be able to find the H3 that was used within that sidebar.

So, you can see how much of an improvement this is from the previous versions of InDesign, and you can see how much control it provides us, for users who have had to tag their content in the past. Meaning with previous versions of InDesign, the new export tagging feature will be a blessing to you. if you're just getting started exporting content from InDesign, you too will appreciate how flexible InDesign CS 5.5 is and how much control it provides to you.

Show transcript

This video is part of

Image for InDesign CS5.5 New Features Overview
InDesign CS5.5 New Features Overview

13 video lessons · 424 viewers

Chad Chelius
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed InDesign CS5.5 New Features Overview.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.