TiddlyWiki5/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid

caption: HTML
created: 20131205160816081
modified: 20220123174919252
tags: WikiText
title: HTML in WikiText
type: text/vnd.tiddlywiki

! 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

<<.from-version 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

<<.tip """[[Widgets share the same syntax as HTML tags|Widgets in WikiText]], 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|WikiText Parser Modes]] in [[block mode|Block Mode WikiText]], the opening tag must be followed by two linebreaks.

Without the two linebreaks, the tag content will be [[parsed|WikiText Parser Modes]] in [[inline mode|Inline Mode WikiText]] 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 don’t 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: 

* a literal string
* a transclusion of a TextReference
* a transclusion of a [[macro/variable|Macros in WikiText]]
* as the result of a [[Filter Expression]]

!! Style Attributes

<<.from-version "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}}
```
<<.warning "The attribute's 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|Macro Calls in WikiText]]. For example:

```
<div title=<<MyMacro "Brian">>>
...
</div>
```
<<.warning "The text from the macro's definition will be retrieved and text substitution will be performed (i.e. <<.param $param$>> and <<.param &#36;(...)&#36;>> syntax). The attribute's 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.

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

```
<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />
```
<<.warning "The attribute's value will be the exact text from the first item in the resulting list. Any wiki syntax in that text will be left as-is.">>