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/>