Please enable JavaScript to view this site.

The Insert HTML Code Object BTN_Insert_HTML tool in Write > Insert Object allows you to include plain HTML code at any point in your topics and export it unchanged to all HTML-based output formats (HTML Help, Browser-based HTML, Windows Exe and ePUB eBooks and Visual Studio Help).

This topic assumes that you are already familiar with writing code in HTML and JavaScript.

Plain HTML code in eBooks:

Note that although regular HTML is exported to eBooks, only plain formatting code and basic CSS will actually work in this format. You cannot use scripts or DHTML. Technically, the ePUB specifications do include scripting but almost all ePUB readers ignore it, and those that don't are unlikely to do what you want.

Apple iBooks®:
Be extremely careful when entering inline HTML code for Apple iBooks. It is more quirky than any other ePUB reader and the results can be unexpected.

When to use plain HTML code:

There are basically two situations where you may want to use plain HTML code:

When you want to add features to your HTML-based output with dynamic HTML and scripting.

When you want to write your own HTML code to achieve formatting results that you can't create directly with Help+Manual.

HTML code objects are preferable to using JavaScript links for inserting more complex JavaScript code in your pages. Since the code is inserted in the page you can also include links, and you have more freedom to format your code because you are not restricted by the link insertion syntax.

How plain HTML code is inserted:

Plain HTML code objects are inserted directly at the current insertion point in your topic text. The code is inserted exactly as you write it without any changes, and it is not parsed or syntax-checked in any way. The only exceptions are some graphic file references in your HTML topic templates, which are parsed and exported with your output.

This means that you are 100% responsible for making sure that you write valid code!

Since the entire topic contents are always inserted between the <body> and </body> tags of the HTML topic page template the plain HTML code you enter is also always inserted after the opening <body> tag, even if you enter it right at the top of the topic page. It is important to remember this if you are inserting scripts that need to be in the <head> section.

Adding HTML code to HTML topic page templates:

You cannot use the Insert HTML Code Object tool to add code outside the <body> and </body> tags of  your topic pages. If you need to do this you must add the code to the HTML template that is used  to generate all the topic code outside the <body> and </body> tags.

You can do this either directly or with HTML variables. In addition to this you can also edit the content of your variables on a by-topic basis by redefining variables for individual topics in the Topic Options tab on the left of the main editor window. See The power of editable variables for more details on this.

Adding template code to selected topics only

If you need different versions of the code in individual topics you can use HTML variables  to achieve this. Basically you define an HTML variable to hold the code and insert it in the appropriate location in your HTML page template. Then you redefine the content of the variable for individual topics in the Topic Options tab on the left of the main editor window (in the Topic Variables table at the bottom of the screen).

You can also use these redefinable variables to link to different versions of external script files in individual topics. See The power of editable variables for more details on this.

Referencing script functions in plain HTML code:

If the code you insert in your topics with the HTML Code Object tool contains calls to JavaScript functions you have written you may want or need to include these functions in external .js files or in the <HEAD> section of your topic pages. There are two ways to do this:

Add your separate .js script file to the Baggage Files to include it in your output. Then edit the HTML template for your topics and add an include directive for the .js script file in the appropriate location in the template file.

Edit the HTML template for your topics and manually add the script with the functions to the <head> section of the template.  

See also:

Inserting script and macro links

About JavaScript Links

Inserting plain HTML code

The power of editable variables

Using HTML Templates