tiddlywiki 5.1.21 → 5.2.1

package/editions/tw5.com/tiddlers/widgets/RevealWidget.tid

@@ -1,7 +1,7 @@
 caption: reveal
 created: 20131024141900000
 jeremy: tiddlywiki
-modified: 20190910150520583
+modified: 20201121100908827
 tags: Widgets
 title: RevealWidget
 type: text/vnd.tiddlywiki
@@ -10,13 +10,13 @@ type: text/vnd.tiddlywiki
 
 The reveal widget hides or shows its content depending upon the value of a [[state tiddler|StateTiddlers]]. The type of the widget determines the condition for the content being displayed:
 
-* type=''match'': the content is displayed if the state tiddler matches a specified value
-* type=''nomatch'': the content is displayed if the state tiddler doesn't match a specified value
+* type=''match'': the content is displayed if the state tiddler matches the text attribute value
+* type=''nomatch'': the content is displayed if the state tiddler doesn't match the text attribute value
 * type=''popup'': the content is displayed as a popup as described in the PopupMechanism
-* type=''lt'': the content is displayed if the state tiddler contains an integer with a value ''less than'' a specified value
-* type=''gt'': the content is displayed if the state tiddler contains an integer with a value ''greater than'' a specified value
-* type=''lteq'': the content is displayed if the state tiddler contains an integer with a value ''less than or equal to'' a specified value
-* type=''gteq'': the content is displayed if the state tiddler contains an integer with a value ''greater than or equal to'' a specified value
+* type=''lt'': the content is displayed if the state tiddler contains an integer with a value ''less than'' the text attribute value
+* type=''gt'': the content is displayed if the state tiddler contains an integer with a value ''greater than'' the text attribute value
+* type=''lteq'': the content is displayed if the state tiddler contains an integer with a value ''less than or equal to'' the text attribute value
+* type=''gteq'': the content is displayed if the state tiddler contains an integer with a value ''greater than or equal to'' the text attribute value
 
 
 ! Content and Attributes
@@ -33,11 +33,12 @@ The content of the `<$reveal>` widget is displayed according to the rules given
 |text |The text to match when the type is ''match'', ''nomatch'', ''lt'', ''gt'', ''lteq'' or ''gteq'' |
 |class |An optional CSS class name to be assigned to the HTML element<br/>&raquo; Set to `tc-popup-keep` to make a popup "sticky", so it won't close when you click inside of it|
 |style |An optional CSS style attribute to be assigned to the HTML element |
-|position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveright'', ''right'', ''belowleft'' or ''below'' |
+|position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveleft'', ''aboveright'', ''right'', ''belowleft'', ''belowright'' or ''below'' |
 |positionAllowNegative |Set to "yes" to prevent computed popup positions from being clamped to be above zero |
 |default |Default value to use when the state tiddler is missing |
 |animate |Set to "yes" to animate opening and closure (defaults to "no"; requires "retain" to be set to "yes") |
 |retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no") |
+|updatePopupPosition|<<.from-version "5.1.23">>Set to "yes" to update the popup position when the state tiddler is updated (defaults to "no")|
 
 <<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="stateTitle"/>, <$macrocall $name=".attr" _="stateField"/> and <$macrocall $name=".attr" _="stateIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]].
 This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">>

package/editions/tw5.com/tiddlers/widgets/SelectWidget.tid

@@ -1,7 +1,7 @@
 caption: select
 created: 20131024141900000
-modified: 20190304122040876
-tags: Widgets
+modified: 20211108165037846
+tags: TriggeringWidgets Widgets
 title: SelectWidget
 type: text/vnd.tiddlywiki
 
@@ -53,6 +53,17 @@ This example sets the title of the current wiki [[$:/SiteTitle]] to one of a lis
 <option>The Dice Man</option>
 </$select>"/>
 
+!!! Simple List with Placeholder Value
+
+To display a default value that is also disabled, effectively functioning as a placeholder, the following form can be used. Note that the targeted field must be empty, or not exist, for the placeholder to show in the widget:
+
+<$macrocall $name="wikitext-example-without-html" src="<$select tiddler='New Tiddler' field='text' default='Choose a new text'>
+<option disabled>Choose a new text</option>
+<option>A Tale of Two Cities</option>
+<option>A New Kind of Science</option>
+<option>The Dice Man</option>
+</$select>"/>
+
 !! Value lists
 
 In this example the `value` attribute has been used to specify the text that should be used as the value of the entry instead of the display text.
@@ -117,4 +128,17 @@ This example uses the `multiple` keyword to specify that we should be able to se
 <$list filter='[list[$:/generated-list-demo-state!!testing]]'>
 <$view field='title' /><br />
 </$list>
-"/>
+"/>
+
+!! Actions 
+
+This example uses the actions attribute to apply days of the week as tags to the current tiddler.
+
+<$macrocall $name="wikitext-example-without-html" src="""<$select tiddler='$:/generated-list-demo-state' field='actions-test' 
+actions='<$action-listops $field="myfield" $tags={{$:/generated-list-demo-state!!actions-test}}/>'
+>
+<$list filter='[list[Days of the Week]]'>
+<option><$view field='title'/></option>
+</$list>
+</$select>
+"""/>

package/editions/tw5.com/tiddlers/widgets/SetMultipleVariablesWidget.tid

@@ -0,0 +1,33 @@
+caption: setmultiplevariables
+created: 20211023162409163
+modified: 20211023162409163
+tags: Widgets
+title: SetMultipleVariablesWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+The setmultiplevariables widget assigns values to multiple [[variables|Variables]] where the names and values of the variables are specified as separate filter.
+
+! Content and Attributes
+
+The content of the `<$setmultiplevariables>` widget is the scope for the value assigned to the variable.
+
+|!Attribute |!Description |
+|$names |Filter evaluating to the names of a list of variables to assign |
+|$values |Filter evaluating to the values corresponding to the list of names specified in `$names` |
+
+! Examples
+
+Here is an example of a convoluted way to display the values of the fields of the tiddler "HelloThere":
+
+<$macrocall $name='wikitext-example-without-html'
+src="""<$setmultiplevariables $names="[[HelloThere]fields[]addprefix[demo-]]" $values="[[HelloThere]fields[]] :map[[HelloThere]get<currentTiddler>]">
+<ol>
+<$list filter="[variables[]prefix[demo-]sort[]]">
+<li>
+''<$text text={{{ [<currentTiddler>removeprefix[demo-]] }}}/>'': <$text text={{{ [<currentTiddler>getvariable[]] }}}/>
+</li>
+</$list>
+</ol>
+</$setmultiplevariables>"""/>

package/editions/tw5.com/tiddlers/widgets/SetWidget.tid

@@ -1,6 +1,6 @@
 caption: set
 created: 20131115182700000
-modified: 20180315165405442
+modified: 20210505095640228
 tags: Widgets
 title: SetWidget
 type: text/vnd.tiddlywiki
@@ -15,77 +15,106 @@ The content of the `<$set>` widget is the scope for the value assigned to the va
 
 |!Attribute |!Description |
 |name |The name of the variable to assign (defaults to "currentTiddler") |
-|value |The value to assign to the variable if the filter is missing or not empty |
+|value |The value to assign to the variable if the <<.attr filter>> attribute is missing or not empty |
 |tiddler |<<.from-version "5.1.15">> Optional title of the tiddler from which to read the value |
 |subtiddler |<<.from-version "5.1.16">> Optionally specifies the title of a subtiddler within a plugin tiddler identified by the ''tiddler'' attribute |
 |field |<<.from-version "5.1.15">> Optional field of the tiddler from which to read the value (only used if ''tiddler'' is used) |
 |index |<<.from-version "5.1.15">> Optional index of the tiddler from which to read the value (only used if ''tiddler'' is used) |
-|filter |An optional filter to be evaluated and assigned to the variable (see below) |
+|filter |An optional filter to be evaluated and assigned to the variable (see "Filtered List Variable Assignment" below). The variable can be used with the <<.olink enlist>> operator |
 |select |<<.from-version "5.1.14">> An optional zero-based index of the item to return from the filter output (see below) |
 |emptyValue |The value to assign to the variable if the specified value is missing or empty (see below) |
 
+<<.tip """If the value of your variable is enclosed in double square brackets this might indicate that you are returning a list of values from the filter. To use a single title from the filter output without the double square brackets see ''Filtered Item Variable Assignment'' below.""">>
+
+! Examples
+
 !! Simple Variable Assignment
 
 The simplest way of using set variable widget assigns a string to a variable. The following example assigns a literal string
 
-```
-<$set name="myVariable" value="Some text">
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name="myVariable" value="Some text">
 <$text text=<<myVariable>>/>
-</$set>
-```
+</$set>' />
+
+<<<
 
 Both the name and value attributes can be transcluded. For example:
 
-```
-<$set name=<<anotherVariable>> value={{template!!text}}>
-<$text text=<<myVariable>>/>
-</$set>
-```
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name=anotherVariable value="myVariable">
+  <$set name=<<anotherVariable>> value={{$:/language/DefaultNewTiddlerTitle}}>
+    <$text text=<<myVariable>>/>
+  </$set>
+</$set>' />
+
+<<<
 
 !! Conditional Variable Assignment
 
 This form of the set variable widget chooses one of two specified values according to whether a filter evaluates to an empty list. Here's an example that sets a variable according to whether the current tiddler is called "myMagicTitle":
 
-```
-<$set name="myVariable" filter="[all[current]field:title[myMagicTitle]]" value="It's magic" emptyValue="It's not magic">
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src="""<$set name="myVariable" filter="[all[current]field:title[myMagicTitle]]" value="It's magic" emptyValue="It's not magic">
 <$text text=<<myVariable>>/>
-</$set>
-```
+</$set>""" />
+
+<<<
 
 !! Filtered List Variable Assignment
 
 This form of the set variable widget evaluates the filter and assigns the result to the variable as a space-separated list (using double square brackets for titles containing spaces).
 
-```
-<$set name="myVariable" filter="[tag[HelloThere]]">
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name="myVariable" filter="[tag[HelloThere]]">
 <$text text=<<myVariable>>/>
-</$set>
-```
+</$set>' />
+
+<<<
 
-!! Filtered Item Variable Assignment
+!! Filtered Item Variable Assignment Single Element
 
 <<.from-version "5.1.14">> This form of the set variable widget evaluates the filter and assigns the specified result to the variable as a single item (ie, not using double square brackets for titles containing spaces).
 
-```
-<$set name="myVariable" filter="[tag[HelloThere]]" select="0">
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name="myVariable" filter="[tag[HelloThere]]" select="0">
 <$text text=<<myVariable>>/>
-</$set>
-```
+</$set>'/>
+
+<<<
 
 !! Transcluded Variable Assignment
 
 <<.from-version "5.1.15">> This form of the set variable widget obtains the value to assign to the variable from a value in a tiddler field or index. For example:
 
-```
-<$set name="myVariable" tiddler="HelloThere" field="text">
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name="myVariable" tiddler="HelloThere" field="list">
 <$text text=<<myVariable>>/>
-</$set>
-```
+</$set>'/>
 
-The example above could also be written as `<$set name="myVariable" value={{HelloThere!!text}}>`. The advantage of using the ''tiddler'' attribute is that the tiddler title and field or index can themselves be computed. For example:
+<<<
 
-```
-<$set name="myVariable" tiddler=<<myTiddler>> field={{$:/currentField}}>
-<$text text=<<myVariable>>/>
-</$set>
-```
+The example above could also be written as `<$set name="myVariable" value={{HelloThere!!list}}>`. The advantage of using the ''tiddler'' attribute is that the tiddler title and field or index can themselves be computed. For example:
+
+<<<
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$set name="myTiddler" value="HelloThere">
+  <$set name="myVariable" tiddler=<<myTiddler>> field={{$:/docs/anyField!!field}}>
+    <$text text=<<myVariable>>/>
+  </$set>
+</$set>'/>
+
+<<<

package/editions/tw5.com/tiddlers/widgets/The Extended Listops Filters.tid

@@ -6,9 +6,10 @@ item2: seven
 item3: eight
 list: Yesterday Today Tomorrow
 marker: Thursday
-modified: 20151108054957921
+modified: 20211114011103356
 myfield: Monday Tuesday [[Middle of the Week]] Thursday Friday Saturday Sunday
 numbers: 1 2 3 4 five 6 7 8 9
+tags: Filters
 title: The Extended Listops Filters
 
 ! Introduction

package/editions/tw5.com/tiddlers/widgets/TriggeringWidgets.tid

@@ -0,0 +1,13 @@
+created: 20211031172716741
+modified: 20211113163836901
+tags: Widgets
+title: TriggeringWidgets
+type: text/vnd.tiddlywiki
+
+Triggering widgets are a type of widget which can trigger ActionWidgets. Typically these widgets (such as the ButtonWidget) will trigger actions based on interaction from the user.
+
+The following triggering widgets are provided:
+
+<<list-links "[tag[TriggeringWidgets]]">>
+
+See ActionWidgets for more information and examples of how TriggeringWidgets and ActionWidgets work together.

package/editions/tw5.com/tiddlers/widgets/VarsWidget.tid

@@ -6,20 +6,22 @@ caption: vars
 
 ! Introduction
 
-The ''vars'' widget allows multiple variables to be set in one operation. In some situations it can result in simpler code than using the more flexible SetWidget.
+The <<.wid vars>> widget allows multiple variables to be set in one operation. In some situations it can result in simpler code than using the more flexible <<.wlink SetWidget>> widget. It differs from the <<.wlink LetWidget>> in that variables cannot interfere with the evaluation of other variables within the same <<.wid vars>>.
 
 ! Content and Attributes
 
-The content of the `<$vars>` widget is the scope for the value assigned to the variable.
+The content of the <<.wid vars>> widget is the scope for the value assigned to the variable.
 
 |!Attribute |!Description |
 |//{attributes not starting with $}// |Each attribute name specifies a variable name. The attribute value is assigned to the variable |
 
+Attributes will not interfere with the evaluation of other attributes. So if one attribute sets <<.attr currentTiddler>>, and another attribute uses <<.attr currentTiddler>> in its evaluation, it will use the value of <<.attr currentTiddler>> that exists outside the widget's scope.
+
 ! Examples
 
 Consider a case where you need to set multiple variables.
 
-Using the `<$vars>` widget, this situation may be handled in the following way:
+Using the <<.wid vars>> widget, this situation may be handled in the following way:
 
 ```
 \define helloworld() Hello world!
@@ -29,7 +31,7 @@ Using the `<$vars>` widget, this situation may be handled in the following way:
 </$vars>
 ```
 
-In contrast, here is the same example using the `<$set>` widget:
+In contrast, here is the same example using the <<.wid set>> widget:
 
 ```
 <$set name="greeting" value="Hi" >
@@ -43,7 +45,7 @@ In contrast, here is the same example using the `<$set>` widget:
 
 ! Remarks
 
-It should be noted that this widget differs from the set widget in the following ways:
+It should be noted that this widget differs from the <<.wid set>> widget in the following ways:
 
 * A fallback (also known as "emptyValue") cannot be specified
 * Filters cannot be used to produce a conditional variable assignement

package/editions/tw5.com/tiddlers/widgets/ViewWidget.tid

@@ -1,6 +1,6 @@
 caption: view
 created: 20131024141900000
-modified: 20180730201626985
+modified: 20210402093330113
 tags: Widgets
 title: ViewWidget
 type: text/vnd.tiddlywiki
@@ -27,8 +27,9 @@ The content of the `<$view>` widget is displayed if the field or property is mis
 The following formats can be specified in the `format` attribute:
 
 |!Format |!Description |
-|''text'' |Plain text |
+|''text'' |Plain text (default) |
 |''htmlencoded'' |The field is displayed with HTML encoding |
+|''htmltextencoded'' |<<.from-version "5.2.0">> The field is displayed with HTML encoding, only double quotes (") are not escaped. This creates a more compact htmlencoding appropriate for html text content, but //not// for attributes. |
 |''urlencoded'' |The field is displayed with URL encoding |
 |''doubleurlencoded'' |The field is displayed with double URL encoding |
 |''htmlwikified'' |The field is wikified according to the mode attribute and the resulting HTML returned as plain text (ie HTML elements will appear in plain text) |
@@ -39,6 +40,10 @@ The following formats can be specified in the `format` attribute:
 |''stripcomments'' |The field is interpreted as JavaScript source code and any lines beginning `\\#` are stripped |
 |''jsencoded'' |The field is displayed as a JavaScript encoded string |
 
+!! "WikiText format"
+
+To display the field content as regular WikiText, for example with working links, use the [[TranscludeWidget]] instead. 
+
 ! SubTiddler Access
 
 The view widget allows access to the individual tiddlers stored within a [[plugin|Plugins]].

package/editions/tw5.com/tiddlers/wikitext/Anchor Links using HTML.tid

@@ -0,0 +1,200 @@
+created: 20190311094603013
+modified: 20201130064330388
+tags: [[HTML in WikiText]]
+title: Anchor Links using HTML
+
+<a id=<<qualify "#Top">>></a>
+
+<h2 id="#Introduction:Anchor-Links-using-HTML">''HTML Anchor Links in Tiddlers''</h2>
+
+
+
+* <a href=<<qualify "##Introduction">>>What do they do?</a>
+* <a href=<<qualify "##How-do-I-make-them">>>How do I make them?</a>
+* <a href=<<qualify "##Anchor-link-limitations">>>Limitations and things to look out for</a>
+* <a href=<<qualify "##More_examples">>>More examples</a>
+* <a href=<<qualify "##Suggestions-for-elements">>>Suggestions for HTML elements to use</a>
+* <a href=<<qualify "##Suggestions-for-ids">>>Suggestions for target names to use</a>
+* <a href=<<qualify "##qualify-example">>>Avoiding duplicate IDs when transcluding</a>
+* <a href=<<qualify ##Style_Hints>>>Style Hints</a>
+
+<a id=<<qualify "#Introduction">>></a>
+
+!! What do they do?
+
+In TiddlyWiki anchor links can help us link to target points and distinct sections within rendered tiddlers. They can help the reader navigate longer tiddler content.
+
+For example this link, <a href=<<qualify "##Bottom_of_tiddler">>>Bottom</a>, should take you to the bottom of this tiddler. The "Back to the top" link below should return you back to the top of this tiddler.
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<a id=<<qualify "#How-do-I-make-them">>></a>
+
+!! How do I make them?
+
+There are only 2 steps to making anchor links.
+
+* First, create the target point (called an 'anchor') where you want it.
+* Second, add a link to it where the reader might need it.
+
+That's it. 
+
+
+''Step 1: Create an 'anchor' (link target)''
+
+```
+<a id="#Bottom_of_tiddler"></a>
+```
+
+*Add an <<.attr id>> attribute to any HTML5 tag and place a single `#` before the 'address' value. <a href="##Suggestions%0">Here are some suggestions of tags you can use.</a>
+* Place this code at the target location. E.g. at the bottom of the tiddler.
+
+''Step 2: Create a link to the target anchor''
+
+```
+<a href="##Bottom_of_tiddler">Bottom</a>
+```
+*Create an `<a href>` link using exactly the same 'address' value as the target but with double  `##` characters preceding it.
+*Place this code where it will most help the reader.
+
+The above example can be adapted to work for many situations in ~TiddlyWiki, such as the table of contents at the top of this tiddler.
+
+''Is it really that simple? ''
+
+Yes, it's that simple. BUT...  in ~TiddlyWiki there are some small differences from standard HTML5 anchor links and some specific ~TiddlyWiki limitations.
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify "#Anchor-link-limitations">>>Limitations and things to watch out for</h2>
+
+''Step 1:'' Creating the target anchor
+
+* Unlike standard HTML5, in ~TiddlyWiki you must put a single `#` character in front of the target address value that follows the <<.attr id>> attribute.  (Notice the single `#` character used in the #Bottom_of_tiddler in Example 1.)
+* Unlike standard HTML5, ~TiddlyWiki anchor links are case sensitive. In the example above #Bottom_of_tiddler works, but #bottom_of_Tiddler wouldn't.
+* Avoid using the % character in your link, as some browsers have a bug where navigation to anchors containing a % character can sometimes fail (see warning below).
+* <a id=<<qualify #note.1-return>>/>Avoid using any whitespace in your link (see <a href=<<qualify ##note.1>> title="click to go to note 1.">note 1</a> below).
+* Each link address should be unique in the TiddlyWiki.  If transclusions create multiple instances of the same <<.attr id>> attribute, navigation will take place to the first instance found that satisfies the above criteria. To avoid this, you can use the [[qualify macro|qualify Macro]] in both the <<.attr id>> and the <<.attr href>> attributes in a similar style to the example given below: <a href=<<qualify ##qualify-example>> >Avoiding duplicate IDs when transcluding</a>.
+
+''Step 2:'' Creating the link to the target
+
+* Remember that the <<.attr href>> value should start with ''two'' `#` characters, one more than the <<.attr id>> value of the target anchor.
+* Remember that ~TiddlyWiki anchor links are case sensitive
+
+''Step 3:'' Navigating to the target
+
+Normally you can click on the link and ~TiddlyWiki will scroll the window so the target anchor is at the top of the window, but there are several limitations:
+
+* Anchor links in ~TiddlyWiki do not work if the tiddler is not in the Story River, or is not displayed in the sidebar.
+* Anchor links in ~TiddlyWiki do not work if the tidlder is in the Story River or sidebar but anchor marked target point is not visible on the page (e.g., the tiddler is folded or the anchor is within a non-displaying $reveal widget). Ctrl+Click on such an anchor link will open a new browser window/tab loading the base web page and will not navigate to the expected tiddler.
+* Anchor links in Tiddlywiki do not work if Control Panel > Appearance > Story View is set to Zoomin (the single page view) and the tiddler is not at the top of the story river (i.e. not displayed).
+* When an anchor link is clicked the browser's navigation history will be updated with the link's href value appended to the web page's URL. This will happen even if the Control Panel > Settings > Navigation History value is set to "Do not update history".
+
+<$macrocall $name=.note _="""<span id=<<qualify #note.1>>><a href=<<qualify ##note.1-return>> title="click to return">1.</a></span> The [ext[HTML5 specification|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]] for the <<.attr id>> attribute  says that its value should not contain any whitespace. Currently ^^(Dec 2020)^^ an <<.attr id>> value with whitespace can sometimes work. However, it may not work in all browsers and is not guaranteed to work in the future."""  />
+
+<<.warning "Some browsers may fail to navigate to an anchor target whose ''id'' value includes a `%` character followed by 2 digits. This is a bug in the browser and nothing that ~TiddlyWiki can fix. To be safe, avoid using the `%` character.">>
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify "#More_examples">>>More examples</h2>
+In each case the target code is placed at the destination the reader navigates to, the link code is placed where it will help the reader navigate from.
+
+```
+<h2 id="#heading-01"> My Target Heading</h2>
+
+<a href="##heading-01">Link to My Target Heading</a>
+
+```
+
+This looks like:
+
+<hr>
+<h2 id="#heading-01">My Target Heading</h2>
+
+<a href="##heading-01">Link to My Target Heading</a>
+<hr>
+
+```
+<section id="#unique001">
+
+!! My Target section
+
+A `<section>` HTML tag is generally used to define sections in an HTML document, such as chapters, headers, footers, or any other sections of the document.
+</section>
+
+Clicking this anchor link goes to: <a href="##unique001">Link to My Target Section</a>
+```
+
+This looks like:
+
+<hr>
+<section id="#unique001">
+
+!! My Target section
+
+A `<section>` HTML tag is generally used to define sections in an HTML document, such as chapters, headers, footers, or any other sections of the document.
+</section>
+
+Clicking this anchor link goes to: <a href="##unique001">Link to My Target Section</a>
+<hr>
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify "#Suggestions-for-elements">>>''Suggestions for HTML elements to use''</h2>
+
+Some suggestions for the HTML element you choose for marking a position using the <<.attr id>> attribute:
+
+| ! Element | ! Sample code | ! Observations |
+|<<.def anchor>> |<$text text="""<a id="#part001-of-TiddlerName"></a>"""/> |Should work perfectly everywhere|
+|<<.def heading>> |<$text text="""<h2 id="#a-new-heading">A New Heading</h2>"""/>|Headings can have <<.attr id>> attributes as well|
+|<<.def section>> |<$text text="""<section id="#sect001-of-TiddlerName">This is a new section</section>"""/>|If you use the `section` element it should probably have an <<.attr id>> of its own|
+|<<.def span>> |<$text text="""<span id="#007">Marker 007 is here!</span>"""/>|`span` elements can be used to insert an <<.attr id>> mid-paragraph|
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify "#Suggestions-for-ids">>>Suggestions for target names to use</h2>
+
+| ! | ! Sample code | ! Observations |
+|<<.def Recommended>> |<$text text="""<a id="#part001-of-TiddlerName"></a>"""/> |Include the tiddler name for easy unique <<.attr id>>s|
+|<<.def "Avoid: whitespace">> |<$text text="""<h2 id="#0 0 1">A New Heading</h2>"""/>|Whitespace is not guaranteed to work in all browsers|
+|<<.def "Avoid: %">> |<$text text="""<section id="#sect001%20of%20TiddlerName">This is a new section</section>"""/>|URI encoding (turning space into %20 and so on) may not work in some browsers|
+|<<.def "Avoid: duplicate IDs">> |<$text text="""<span id="#007">Marker 007 is here!</span>"""/>|<<.attr id>> values should be unique within entire wiki|
+|<<.def "Avoid: duplicate IDs">> |<$text text="""<a id="#007"></a>"""/>A different marker 007|If <<.attr id>> values are duplicated, one will be ignored|
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify "#qualify-example">>> ''Avoiding duplicate IDs when transcluding''</h2>
+The <<.attr id>> and anchor link to this header has been made as follows:
+
+```
+<a href=<<qualify "##qualify-example">>>Avoiding duplicate IDs when transcluding</a>
+
+<h2 id=<<qualify "#qualify-example">>>Avoiding duplicate IDs when transcluding</h2>
+```
+;For this to work:
+
+* The <<.attr href>> and <<.attr id>> values use the [[macro invocation syntax for attributes|HTML in WikiText]], using the [[qualify Macro]] to create a unique <<.attr id>> value.
+* Both the <<.attr id>> and the anchor link must be in the same tiddler.
+* There must not be any quote characters between the `=` and the `<<`.
+* The double quotes around the target name are optional, but recommended.
+* There should be a total of three `>` characters after the target name, two `>>` to close the `<<qualify` macro, and one `>` to close the `<a` tag.
+
+<a href=<<qualify "##Top">>>Back to the top</a>
+
+<h2 id=<<qualify #Style_Hints>>>''Style Hints'' </h2>
+
+If you don't want the link to look like an external link, give the `<a>` element's <<.attr class>> attribute the value <<.def tc-tiddlylink>> and if you want the link to also be italic & bold, give the additional classes <<.def "tc-tiddlylink-missing tc-tiddlylink-shadow">> like below:
+
+```
+<a class="tc-tiddlylink" href="##Introduction:Anchor-Links-using-HTML">Back to the top</a> or just back to <a class="tc-tiddlylink tc-tiddlylink-missing tc-tiddlylink-shadow" href=<<qualify ##Hints>>>Hints</a>.
+```
+<a class="tc-tiddlylink" href="##Introduction:Anchor-Links-using-HTML">Back to the top</a> or just back to <a class="tc-tiddlylink tc-tiddlylink-missing tc-tiddlylink-shadow" href=<<qualify ##Style_Hints>>>Style Hints</a>.
+
+If you want to include an <<.attr id>> attribute to a link in your sidebar Table of Contents, you can include it in your listed tiddler's <<.field caption>> field similar to the way shown below:
+
+```
+<span id=#some-value>Your caption</span>
+```
+
+<a id=<<qualify "#Bottom_of_tiddler">>></a>
+
+<a href=<<qualify "##Top">>>Back to the top</a>

package/editions/tw5.com/tiddlers/wikitext/Block Quotes in WikiText.tid

@@ -9,7 +9,7 @@ There are two ways to produce HTML block quotes in TiddlyWiki5, one for content
 
 ! Multi-line Block Quotes
 
-The syntax for multi-line block quotes ({{$:/core/images/quote}}) is:
+The syntax for multi-line block quotes (<<.icon $:/core/images/quote>>) is:
 
 <<wikitext-example src:"<<<
 This is a block quoted paragraph

package/editions/tw5.com/tiddlers/wikitext/Code Blocks in WikiText.tid

@@ -5,7 +5,7 @@ tags: WikiText
 title: Code Blocks in WikiText
 type: text/vnd.tiddlywiki
 
-You can use triple backticks <code>&#96;&#96;&#96;</code> to mark code blocks ({{$:/core/images/mono-block}}):
+You can use triple backticks <code>&#96;&#96;&#96;</code> to mark code blocks (<<.icon $:/core/images/mono-block>>):
 
 <pre>
 &#96;&#96;&#96;
@@ -40,5 +40,5 @@ This will be monospaced
 &#96;&#96;&#96;
 </pre>
 
-Note that some keyboard layouts treat the backtick as a [[dead key|http://en.wikipedia.org/wiki/Dead_key]], making it hard to type. The trick is to type three backticks followed by a space. Alternatively, type all six backticks in one go, then a space, and then move the cursor back three characters to type or paste the content.
+Note that some keyboard layouts treat the backtick as a [[dead key|https://en.wikipedia.org/wiki/Dead_key]], making it hard to type. The trick is to type three backticks followed by a space. Alternatively, type all six backticks in one go, then a space, and then move the cursor back three characters to type or paste the content.
 

package/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid

@@ -7,13 +7,13 @@ type: text/vnd.tiddlywiki
 
 Available character formatting includes:
 
-* <code>&#96;backticks&#96;</code> for `code` ({{$:/core/images/mono-line}})
+* <code>&#96;backticks&#96;</code> for `code` (<<.icon $:/core/images/mono-line>>)
 ** Alternatively, <code>&#96;&#96;double backticks allows &#96;embedded&#96; backticks&#96;&#96;</code>
-* `''bold''` for ''bold text'' ({{$:/core/images/bold}})
-* `//italic//` for //italic text// ({{$:/core/images/italic}})
-* `__underscore__` for __underscored text__ ({{$:/core/images/underline}})
-* `^^superscript^^` for ^^superscripted^^ text ({{$:/core/images/superscript}})
-* `,,subscript,,` for ,,subscripted,, text ({{$:/core/images/subscript}})
-* `~~strikethrough~~` for ~~strikethrough~~ text ({{$:/core/images/strikethrough}})
+* `''bold''` for ''bold text'' (<<.icon $:/core/images/bold>>)
+* `//italic//` for //italic text// (<<.icon $:/core/images/italic>>)
+* `__underscore__` for __underscored text__ (<<.icon $:/core/images/underline>>)
+* `^^superscript^^` for ^^superscripted^^ text (<<.icon $:/core/images/superscript>>)
+* `,,subscript,,` for ,,subscripted,, text (<<.icon $:/core/images/subscript>>)
+* `~~strikethrough~~` for ~~strikethrough~~ text (<<.icon $:/core/images/strikethrough>>)
 
 See also: [[Code Blocks in WikiText]]