Skip to main content
N
Nedlaw
Legend
September 25, 2025
Answered

Embed a bookmark for output as HTML

  • September 25, 2025
  • 1 reply
  • 368 views

Hi. Using ID 20.5 under Win 11.

I've posted previously, but want to make sure I'm clear on my question:

 

Question:

Does InDesign include any way to insert an HTML bookmark containing specific text at a specific location in the InDesign source material prior to HTML output, so that ID outputs the bookmark as HTML at that specific location?

 

Background:

For example, I want to insert a bookmark such as "custom-bookmark" at the beginning of a specific paragraph -- just like I might insert a PDF bookmark (and so obtain HTML output reading id="custom-bookmark" at that location) so that another web page (NOT UNDER MY CONTROL and not part of my document) can include an <a href="somefile.html#custom-bookmark">go here</a> and display my standalone page.

 

Here's the use-case: I'm delivering an online HTML version of an existing manual for a client's SaaS app, and the programmers want to call into the docs to display specific content by referring to the specific bookmarks in the manual that I place there. This is a critical requrement. I cannot figure out how to enter such a bookmark*. I'm not talking about doing fancy HTML layout work with an inappropriate tool -- I'm outputting an existing InDesign text (just not as print or PDF).

 

*Yes, I can enter such a bookmark manually, but only after generating the HTML. There might be 100 bookmarks, but it can be done. (a) Have you seen the HTML code that ID generates? Each word is a separate item. Seems... odd. (b) Once done, if there were any revisions that resulted in new output, all the bookmarks would have to be redone... manually. Not a good approach. That's why I want to insert such bookmarks in the ID source. I have tried using the Bookmarks window and the Hyperlinks window... and while I may be doing something wrong, the HTML output appears to ignore both.

 

Thanks as always to the community.
-j

Correct answer Joel Cherney

I remember seeing your question the last time you posted it - and since I will go a long, long way out of my way to avoid exporting HTML from InDesign, I thought that maybe one of our other regular posters would be able to write up a good answer for you. 

 

(a) Have you seen the HTML code that ID generates? 

 

Yep! Hence my reluctance to use it. Are you exporting "HTML5" or "HTML (Legacy)"? 

 

Each word is a separate item. Seems... odd.

 

Not my experience. I mean, the "Legacy" HTML output can be dodgy sometimes, but I'm looking at a bunch of perfectly normal <p> tags. The HTML5 output is more full of seemingly spurious <span> tags, but it's not quite so bad as "each word is its own element". 

 

Does InDesign include any way to insert an HTML bookmark containing specific text at a specific location in the InDesign source material prior to HTML output, so that ID outputs the bookmark as HTML at that specific location?

 

Not without doing some post-export editing. At least, I haven't found a method yet.  I see that I can add a Hyperlink Destination of the "Text Anchor" variety, and I can name that destination "custom-bookmark" but upon Legacy HTML export, the the custom-bookmark designation is lost:

<a id="_idTextAnchor000" target="_blank"></a>

On the other hand, if I style that text anchor with a unique character style, let's say it's an empty character style called "custom-bookmark" then the resultant output is

<span class="custom-bookmark"><a id="_idTextAnchor000" target="_blank">

 and it does this reliably enough that if I were to give each desired hyperlink destination its own uniqely named character style, then I can pop the HTML open in Notepad++ and use a regex to transform all such bookmarks throughout the file into 

<span class="custom-bookmark"><a id="custom-bookmark" target="_blank">

 

Haven't actually tested it yet but  the regex would look something like this:

 

Find: (span class=")(.+?)("><a id=")(_idTextAnchor\d\d\d)(")

Replace All with: $1$2$3$2$5

 

So no, I can't figure out a way to do it without doing post-export editing of HTML, but it needn't be manual; you could automate almost all of the heavy lifting. 

 

Edit: I can see that the syntax is different in the HTML5 export, but if you're exporting HTML5 and want to pursue this kind of automation, I'm sure that I could cook up another regex find/change operation that would work on HTML5 exports as well. 

1 reply

Joel Cherney
Community Expert
Joel CherneyCommunity ExpertCorrect answer
Community Expert
September 25, 2025

I remember seeing your question the last time you posted it - and since I will go a long, long way out of my way to avoid exporting HTML from InDesign, I thought that maybe one of our other regular posters would be able to write up a good answer for you. 

 

(a) Have you seen the HTML code that ID generates? 

 

Yep! Hence my reluctance to use it. Are you exporting "HTML5" or "HTML (Legacy)"? 

 

Each word is a separate item. Seems... odd.

 

Not my experience. I mean, the "Legacy" HTML output can be dodgy sometimes, but I'm looking at a bunch of perfectly normal <p> tags. The HTML5 output is more full of seemingly spurious <span> tags, but it's not quite so bad as "each word is its own element". 

 

Does InDesign include any way to insert an HTML bookmark containing specific text at a specific location in the InDesign source material prior to HTML output, so that ID outputs the bookmark as HTML at that specific location?

 

Not without doing some post-export editing. At least, I haven't found a method yet.  I see that I can add a Hyperlink Destination of the "Text Anchor" variety, and I can name that destination "custom-bookmark" but upon Legacy HTML export, the the custom-bookmark designation is lost:

<a id="_idTextAnchor000" target="_blank"></a>

On the other hand, if I style that text anchor with a unique character style, let's say it's an empty character style called "custom-bookmark" then the resultant output is

<span class="custom-bookmark"><a id="_idTextAnchor000" target="_blank">

 and it does this reliably enough that if I were to give each desired hyperlink destination its own uniqely named character style, then I can pop the HTML open in Notepad++ and use a regex to transform all such bookmarks throughout the file into 

<span class="custom-bookmark"><a id="custom-bookmark" target="_blank">

 

Haven't actually tested it yet but  the regex would look something like this:

 

Find: (span class=")(.+?)("><a id=")(_idTextAnchor\d\d\d)(")

Replace All with: $1$2$3$2$5

 

So no, I can't figure out a way to do it without doing post-export editing of HTML, but it needn't be manual; you could automate almost all of the heavy lifting. 

 

Edit: I can see that the syntax is different in the HTML5 export, but if you're exporting HTML5 and want to pursue this kind of automation, I'm sure that I could cook up another regex find/change operation that would work on HTML5 exports as well. 

N
NedlawAuthor
Legend
September 26, 2025

This is great. I will try it -- but I think that, short of internal tinkering by Adobe, this will be as close to correct as it can be. Post-export processing as you describe is doable; I don't think there will be more than 100 bookmarks required (famous last words) and that empty character style approach should work.

 

BTW, I am using HTML5 output, and I should have made that plain. I tried the legacy, and it didn't work well. Yes, the words are appropriately grouped within <p> tags, but each word is slathered with code apparently intended to display the text as closely to the designed document as possible. Understandable, I suppose. IMHO, there should be a switch to turn off that behavior -- they do it for ebook output. But it's not my program. Perhaps there is another tool that would work better for this, but ID is what I had.

 

Thanks again. I will post any results from my experiements.

 

-j

N
NedlawAuthor
Legend
September 26, 2025

This process may be a little more complex than I thought, but it may be doable.

  • I created an "empty" character style called "cs-nonectata." (I'm working with some Lorum Ipsum.)
  • I selected the word "molor" and made it a new hyperlink destination that used the character style cs-nonectata.
  • I created the HTML5, and -- buried deep within the text -- I found:

 

<span id="_idTextSpan013" class="_00-x-600-H_cs-nonectata CharOverride-3" style="position:absolute;top:691.59px;left:4857.37px;">molor</span>

 

It would be possible to do a search-and-replace of some kind to add an id="cs-nonectata" to the collection of all the other stuff packed around that one word. It would probably be best done to the first word of the paragraph -- which I didn't bother to do in this test. Each empty character style might have to be named differently. The ids can't all be named the same or else the outside calling program couldn't specify which one it wanted.

 

It can be done. Not pleasantly, but it can be done.

Thanks very much for the suggestion. I will mark your answer as right.

-j

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices