Shorthand Examples

(These examples use the terms from the project glossary).

Simple cases

Shorthand starts with an HTML element name

It the simplest case, the shorthand is just the HTML element
name, without attributes or properties, followed by the contents
of the element.

q quotation

<q>quotation</q>

Attributes are suffixed to shorthand with a dot

One or more attributes can be added to the element name in the
fluent dot-attached naming style.

h3.id=hidden_head.hidden Hidden Sub-subtitle

<h3 id='hidden_head' hidden>Hidden Sub-subtitle</h3>

The ID attribute has a special shorthand

The ID attribute can be joined to the element name with a single
hash. If the ID should contain a hash, then it must be
specified with the .id=#ex notation (because multiple hashes
can be confused for href or src shorthand
described below).

h1#intro-title Chapter [incr chap]: Introduction
h2#$chap.1 Section 1
h3#$chap.1.1 Subsection 1.1
h4#$chap.1.1.a Ooops! not what I want
h4#$chap.1.1..a Paragraph 1.1.a

<h1 id='intro-title'>Chapter 1: Introduction</h1>
<h2 id='1'>Section 1</h2>
<h3 id='1.1'>Subsection 1.1</h3>
<h4 id='1.1' a>Ooops! not what I want</h4>
<h4 id='1.1.a'>Paragraph 1.1.a</h4>

Note that a data-dot that does not precede a digit must be
doubled, as demonstrated in the last line of the preceding
example shorthand and expansion.

In HTML the first value associated with an attribute name is
used, later values are redundant.

hr#first.id=second.id=third

<hr id='first'/>

The class attribute also has a special shorthand

The class attribute can be joined to the element name with an
equals sign; ID shorthand cannot come before the class shorthand,
but it can come afterwards.

hr=fatrule.id=r1
hr=thinrule#r2

<hr class='fatrule' id='r1'/>
<hr class='thinrule' id='r2'/>

CSS properties can be written in shorthand
```
h3.color:green.bgcolor:black {$ echo "hello, world!"}
```
```
<h3 style='color: green; bgcolor: black'>$ echo "hello, world!"</h3>
```
In CSS the last value associated with a property is used,
earlier values are redundant.
```
h1.color:blue.color:green Greetings!
```
```
<h1 style='color: green'>Greetings!</h1>
```
## Special cases ### cite The special cite-notation applies to the elements blockquote,
del, ins and q. Read about the more common
href-notation and substitute cite= for href=. ### href Because several elements take an href attribute, and because we
expect them to be written frequently in hypertext, there is a
special, optional shorthand for element taking an href attribute.
Shorthand with two or more hashes attached to the elements a
(anchor), area, base, and link expands to ID (if present)
and href attributes.
```
a#uid#url#fragment
a#uid#url
a#uid##fragment
a##url#fragment
a##url
a###fragment
```
```
<a id='uid' href='url#fragment'>
<a id='uid' href='url'>
<a id='uid' href='#fragment'>
<a href='url#fragment'>
<a href='url>
<a href='#fragment'>
```
### src The special src-notation applies to the elements audio,
embed, iframe, img, input, script, source, track,
and video elements. Read about the more common
href-notation and substitute src= for href=. ## Rare cases ### Shorthand can end with a dot
```
q. another quotation
```
```
<q>another quotation</q>
```
The dot is useful when an element name is the same as that of a
Tcl command.
```
set. [set message "Hello, world!"]
```
```
<set>Hello, world!</set>
```
### Void-element shorthand element names can end with a slash
```
hr/
```
```
<hr/>
```
The slash is useful when the element name is the same as that of
a Tcl command.
```
source/
```
```
<source/>
```