# HTML API All of Undum's output is HTML. This allows you to style your content in any way you choose. It also allows you to include rich media into your output, such as images, video or audio. ## Display Content All HTML output should be in a format we call "Display Content" - this has particular rules: * Display Content must always start and end with a HTML tag. It may consist of more than one tag internally, however. So we can have the structure: `
...
...
`, but not `...
`. ## CSS Styles Undum also uses some of HTML's capabilities to control its own behavior. In particular, it uses a series of CSS classes to control how content behaves. #### `class="transient"` The CSS class `transient` can be used to mark HTML content that should be removed when the user changes their situation. When a situation changes, Undum will go back and remove any links from the text (leaving the text that was in the link). Any HTML content that has the CSS class `transient` will be completely removed at this time. Undum uses a fading animation to show the user this is happening, to avoid the user seeing an abrupt disappearance but being unable to work out what was removed. Any HTML tag can be marked as `transient`. It is most commonly used on a paragraph of text that gives the user a set of options. Undum is designed to allow game developers to produce beautiful narratives - you don't want that narrative littered by "You could do X, or you could do Y." statements. Mark this content as transient, and it will not form part of the permanent record. #### `class="sticky"` When you change situations, links in previous situations will be removed. This prevents the user backtracking and picking options that no longer apply. Sometimes you want links to be available for a longer time, however. In this case mark them with the CSS class `sticky`. Sticky only applies to links, so should only be added to `` tags. #### `class="raw"` Links can also have the `raw` CSS class. This class prevents Undum from interpreting the link as an instruction to the game. If you want to add a link to an external resource, you can add this class to it. Note that raw links are still removed when you change situations, so if you want a raw link permanently available, you should also make it sticky. For some URLs, Undum can guess that the link is supposed to be an external link, and will automatically add the `raw` class for you. This isn't perfect, however, and you are better off not relying on it. If you have a link that you don't want Undum to capture, always use the `raw` class. #### `class="once"` Although links will be removed when the situation changes, often you want to remove them before that, as a result of an action within the current situation. There is an API tool available to do that in your code. For convenience, there is also the `once` CSS class. Adding this to a link means that the link will be removed as soon as it is clicked. This is mostly useful for action links, because a link that changes the situation will automatically cause previous links to disappear. Note that once is smart about this removal. It removes all links to the same action, not just the link that was clicked. So if you have the same action available in two links in your content, both will be removed. #### `class="options"` The options class only works on an unordered list. The default CSS also styles this differently. The list items will be presented as options within a table of choices. On devices with a mouse or pointer, the rows will change color when they are hovered over. The player can click anywhere on the row and the first link that it contains will be executed. This class is intended for smarter presentation of standard option blocks, if you don't want your choices to be embedded into the hypertext. Note that if you use this style, the unordered list will automatically disappear after being clicked, regardless of whether it is marked as "`transient`". ### Headings In the default CSS for Undum, the only heading level expected in the text is `