How do I embed HTML within DITA source content?

FAQs » Frequently Asked Questions » How do I embed HTML within DITA source content?

It is often necessary to embed HTML within your DITA source content for supporting the display of media such as youtube videos.

The two most common ways to embed HTML are through the use of a <foreign> element or a paragraph with a custom outputclass assigned to it.

An example for each is as follows.

Using the <foreign> element

Note: Embedding a link to a local file, still requires that file to exist at the specified link location. In other words, ePublisher will not handle it as a Baggage File.


<foreign audience="web">
 <![CDATA[
  <iframe width="800" height="500" src="_animation/AC_41_Rackwinkel_1.html" frameborder="0" allowfullscreen="true">
  </iframe>
 ]]>
</foreign>

Using @outputclass to enable Pass Through behavior

<p outputclass="PassThrough" audience="web">
 <![CDATA[
  <iframe 
   width="660"
   height="375"
   src="https://www.youtube.com/embed/D4QoQWboM-U?rel=0"
   frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
  </iframe>
 ]]>
</p>

Steps in ePublisher Designer

By default ePublisher disables HTML code within the source content, so you will need to enable the appropriate paragraph style's Pass Through option in the Style Designer.

In ePublisher Designer, open the Style Designer and select the name of the paragraph style assigned with the @outputclass attribute or if you used <foreign>, then the style name will be foreign.
Select the Options tab and then set the option: Pass Through to Enabled.
The ePublisher project will now generate the embedded HTML correctly and you can deploy an updated Stationery for use in other Express projects.

Was this helpful?

Last modified date: 02/10/2023