This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

HTML in WikiText

 15th January 2023 at 10:09am

HTML tags and comments

HTML tags and comments can be used directly in WikiText. For example:

<article class="hello">
This is my nice and simple block of text. HelloThere
<!-- This comment will not appear in the wikified output -->
</article>

Pragma Comments

New in: 5.2.0 Comments can now be freely intermixed with pragmas as well as within the main body of a block of wikitext.

<!-- NEW: Comment that describes the macro -->
\define test()
some text <!-- inline comment -->
\end

<<test>>

Important

Security

Note that any HTML attributes prefixed with on are removed from the rendered HTML content. This is done to prevent event handlers (such as "onclick") being used as a clandestine way to execute untrusted JavaScript. A design goal of TiddlyWiki is to ensure that executable JavaScript can only enter the system through explicit JavaScript module tiddlers or raw markup tiddlers. This makes it possible to filter unsafe content in multiuser environments, and also makes it safer to copy untrusted wikitext examples.

Widgets

Widgets share the same syntax as HTML tags
and so the following information applies to them, too.

Block mode versus Inline mode

To get the content of an HTML element to be parsed in block mode, the opening tag must be followed by two linebreaks.

Without the two linebreaks, the tag content will be parsed in inline mode which means that block mode formatting such as wikitext tables, lists and headings is not recognised.

See also WikiText parser mode: HTML examples and WikiText parser mode transitions.

Self closing elements

The following tags are treated as 'void'. This means that <tag> is treated as if it were <tag/>, and that no terminating </tag> is needed (if one is provided it will be ignored and treated as plain text).

  • <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>

If you do not close any other tag then it will behave as if the missing closing tag were at the end of the tiddler.

Attributes

In an extension of conventional HTML syntax, attributes of elements/widgets can be specified in several different ways:

Style Attributes

New in: 5.2.2 TiddlyWiki supports the usual HTML style attribute for assigning CSS styles to elements:

<div style="color:red;">Hello</div>

In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:

<div style.color="red">Hello</div>

The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:

<div style.color={{!!color}}>Hello</div>

Literal Attribute Values

Literal attribute values can use several different styles of quoting:

  • Single quotes (eg attr='value')
  • Double quotes (eg attr="value")
  • Tripe double quotes (eg attr="""value""")
  • No quoting is necessary for values that do not contain spaces (eg attr=value)

Literal attribute values can include line breaks. For example:

<div data-address="Mouse House,
Mouse Lane,
Rodentville,
Ratland."/>

By using triple-double quotes you can specify attribute values that contain single double quotes. For example:

<div data-address="""Mouse House,
"Mouse" Lane,
Rodentville,
Ratland."""/>

Transcluded Attribute Values

Transcluded attribute values are indicated with double curly braces around a TextReference. For example:

attr={{tiddler}}
attr={{!!field}}
attr={{tiddler!!field}}

The value of the attribute value will be the exact text retrieved from the TextReference. Any wiki syntax in that text will be left as-is.

Variable Attribute Values

Variable attribute values are indicated with double angle brackets around a macro invocation. For example:

<div title=<<MyMacro "Brian">>>
...
</div>

The text from the definition of the macro will be retrieved and text substitution will be performed (i.e. $param$ and $(...)$ syntax). The value of the attribute value will be the resulting text. Any wiki syntax in that text (including further macro calls and variable references) will be left as-is.

Filtered Attribute Values

Filtered attribute values are indicated with triple curly braces around a Filter Expression. The value will be the first item in the resulting list, or the empty string if the list is empty.

New in: 5.2.2 To improve readability, newlines can be included anywhere that whitespace is allowed within filtered attributes.

This example shows how to add a prefix to a value:

<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />

The value of the attribute will be the exact text from the first item in the resulting list. Any wiki syntax in that text will be left as-is.