@@ -15,9 +15,8 @@ This document will walk through the basics of Sail and its syntax.
1515
1616It’s easy to see how Sail can directly translate to HTML:
1717
18−#### Sail code
19−
20−```hoon
18+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead>
19+<tbody><tr><td><pre class="language-hoon">
2120;html
2221 ;head
2322 ;title: My page
@@ -30,30 +29,26 @@ It’s easy to see how Sail can directly translate to HTML:
3029 ; Welcome to my page.
3130 ; Here is an image:
3231 ;br;
33− ;img@"https://media.urbit.org/docs/userspace/dist/wut.svg";
32+ ;img@"/foo.png";
3433 ==
3534 ==
3635==
37−```
38−
39−#### HTML code
40−
41−```
42−<html>
43− <head>
44− <title>My page</title>
45− <meta charset="utf-8" />
46− </head>
47− <body>
48− <h1>Welcome!</h1>
49− <p>Hello, world! Welcome to my
36+</pre></td><td><pre>
37+&lt;html>
38+ &lt;head>
39+ &lt;title>My page&lt;/title>
40+ &lt;meta charset="utf-8" />
41+ &lt;/head>
42+ &lt;body>
43+ &lt;h1>Welcome!&lt;/h1>
44+ &lt;p>Hello, world! Welcome to my
5045 page. Here is an image:
51− <br />
52− <img src="https://media.urbit.org/docs/userspace/dist/wut.svg" />
53− </p>
54− </body>
55−</html>
56−```
46+ &lt;br />
47+ &lt;img src="/foo.png" />
48+ &lt;/p>
49+ &lt;/body>
50+&lt;/html>
51+</pre></td></tr></tbody></table>
5752
5853## Tags and Closing
5954
@@ -73,15 +68,9 @@ particular will be rendered as a single tag like `<br />` and `<img src="s
7368Filled tags are closed via line-break. To fill text inside, add `:` after the
7469tag name, then insert your plain text following a space. Example:
7570
76−```hoon
77−;h1: The title
78−```
79−
80−Produces:
81−
82−```
83−<h1>The title</h1>
84−```
71+| Sail | HTML |
72+| ---------------- | -------------------------- |
73+| `;h1: The title` | `<h1>The title</h1>` |
8574
8675### Nested
8776
@@ -91,41 +80,36 @@ tag, the text will be wrapped in a `<p>` tag.
9180
9281Example:
9382
94−```hoon
83+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>
84+<pre class="language-hoon">
9585;body
9686 ;h1: Blog title
9787 This is some good content.
9888==
99−```
100−
101−Produces:
102−
103−```
104−<body>
105− <h1>Blog title</h1>
106− <p>This is some good content.</p>
107−</body>
108−```
89+</pre></td><td><pre>
90+&lt;body>
91+ &lt;h1>Blog title&lt;/h1>
92+ &lt;p>This is some good content.&lt;/p>
93+&lt;/body>
94+</pre></td></tr></tbody></table>
10995
11096If we want to write a string with no tag at all, then we can prepend
11197those untagged lines with `;` and then a space:
11298
113−```hoon
99+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>
100+<pre class="language-hoon">
114101;body
115102 ;h1: Welcome!
116103 ; Hello, world!
117104 ; We’re on the web.
118105==
119−```
120−
121−Produces:
122−
123−```
124−<body>
125− <h1>Welcome!</h1>
126− Hello, world. We’re on the web.
127−</body>
128−```
106+</pre></td><td><pre>
107+&lt;body>
108+ &lt;h1>Welcome!&lt;/h1>
109+ Hello, world!
110+ We’re on the web.
111+&lt;/body>
112+</pre></td></tr></tbody></table>
129113
130114## Attributes
131115
@@ -139,111 +123,72 @@ shown below.
139123
140124### Generic
141125
142−Wide-form attributes:
143−
144−```hoon
126+<table><thead><tr><th>Form</th><th>Example</th></tr></thead><tbody>
127+<tr><td>Wide</td><td><pre class="language-hoon">
145128;div(title "a tooltip", style "color:red")
146129 ;h1: Foo
147130 foo bar baz
148131==
149−```
150−
151−Tall-form attributes:
152−
153−```hoon
132+</pre></td></tr>
133+<tr><td>Tall</td><td><pre class="language-hoon">
154134;div
155135 =title "a tooltip"
156136 =style "color:red"
157137 ;h1: Foo
158138 foo bar baz
159139==
160−```
161−
162−Produces:
163−
164−```
165−<div title="a tooltip" style="color:red">
166− <h1>Foo</h1>
167− <p>foo bar baz </p>
168−</div>
169−```
140+</pre></td></tr>
141+<tr><td>HTML</td><td><pre>
142+&lt;div title="a tooltip" style="color:red">
143+ &lt;h1>Foo&lt;/h1>
144+ &lt;p>foo bar baz &lt;/p>
145+&lt;/div>
146+</pre></td></tr></tbody></table>
170147
171148### IDs
172149
173150Add `#` after tag name to add an ID:
174151
175−```hoon
176−;nav#header: Menu
177−```
178−
179−Produces:
180−
181−```
182−<nav id="header">Menu</nav>
183−```
152+| Sail | HTML |
153+| ------------------- | ----------------------------------- |
154+| `;nav#header: Menu` | `<nav id="header">Menu</nav>` |
184155
185156### Classes
186157
187158Add `.` after tag name to add a class:
188159
189−```hoon
190−;h1.text-blue: Title
191−```
192−
193−Produces:
194−
195−```
196−<h1 class="text-blue">Title</h1>
197−```
160+| Sail | HTML |
161+| ---------------------- | ---------------------------------------- |
162+| `;h1.text-blue: Title` | `<h1 class="text-blue">Title</h1>` |
198163
199164If you want a class name that contains a space, you will need to use use the
200165syntax of a generic attribute:
201166
202−```hoon
203−;div(class "logo inverse");
204−```
205−
206−Produces:
207−
208−```
209−<div class="logo inverse"></div>
210−```
167+| Sail | HTML |
168+| ----------------------------- | ---------------------------------------- |
169+| `;div(class "logo inverse");` | `<div class="logo inverse"></div>` |
211170
212171### Images
213172
214173Add `@` after the tag name to link your source:
215174
216−```hoon
217−;img@"example.png";
218−```
219−
220−Produces:
221−
222−```
223−<img src="example.png"/>
224−```
175+| Sail | HTML |
176+| --------------------- | ----------------------------- |
177+| `;img@"example.png";` | `<img src="example.png"/>` |
225178
226179To add attributes to the image, like size specifications, add the desired
227180attribute after the `"` of the image name and before the final `;` of the `img`
228−tag:
229−
230−```hoon
231−;img@"example.png"(width "100%");
232−```
181+tag like ;img@"example.png"(width "100%");`.
233182
234183### Links
235184
236185Add `/` after tag name to start an `href`.
237186
238−```hoon
187+<table><tr><th>Sail</th></tr><tr><td><pre class="language-hoon">
239188;a/"urbit.org": A link to Urbit.org
240−```
241−
242−Produces:
243−
244−```
245−<a href="urbit.org">A link to Urbit.org</a>
246−```
189+</pre></td></tr><tr><th>HTML</th></tr><tr><td><pre>
190+&lt;a href="urbit.org">A link to Urbit.org&lt;/a>
191+</pre></td></tr></table>
247192
248193## Interpolation
249194
@@ -251,36 +196,29 @@ The textual content of tags, despite not being enclosed in double-quotes, are
251196actually tapes. This means they support interpolated Hoon expressions in the
252197usual manner. For example:
253198
254−```hoon
199+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>
200+<pre class="language-hoon">
255201=| =time
256−;p: foo {<time>} bar
257−```
258−
259−Produces:
260−
261−```
262−<p>foo ~2000.1.1 baz</p>
263−```
202+;p: foo {&lt;time>} bar
203+</pre></td><td><pre>
204+&lt;p>foo ~2000.1.1 baz&lt;/p>
205+</pre></td></tr></tbody></table>
264206
265207Likewise:
266208
267−```hoon
209+<table><tr><th>Sail</th></tr><tr><td><pre class="language-hoon">
268210=/ txt=tape " bananas"
269211;article
270212 ;b: {(a-co:co (mul 42 789))}
271213 ; {txt}
272− {<our>} {<now>} {<`@ux`(end 6 eny)>}
214+ {&lt;our>} {&lt;now>} {&lt;`@ux`(end 6 eny)>}
273215==
274−```
275−
276−Produces:
277−
278−```
279−<article>
280− <b>33138</b> bananas
281− <p>~zod ~2022.2.21..09.54.21..5b63 0x9827.99c7.06f4.8ef9</p>
282−</article>
283−```
216+</pre></td></tr><tr><th>HTML</th></tr><tr><td><pre>
217+&lt;article>
218+ &lt;b>33138&lt;/b> bananas
219+ &lt;p>~zod ~2022.2.21..09.54.21..5b63 0x9827.99c7.06f4.8ef9&lt;/p>
220+&lt;/article>
221+</pre></td></tr></table>
284222
285223## A note on CSS
286224
@@ -445,7 +383,8 @@ The [mictar rune](/docs/hoon/reference/rune/mic#-mictar) makes a `$marl` (a list
445383of XML nodes) from a complex hoon expression. This rune lets you add many
446384elements inside another Sail element. For example:
447385
448−```hoon
386+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>
387+<pre class="language-hoon">
449388=/ nums=(list @ud) (gulf 1 9)
450389;p
451390 ;* %+ turn nums
@@ -454,17 +393,15 @@ elements inside another Sail element. For example:
454393 ;sup: {(a-co:co n)}
455394 ;sub: {(a-co:co n)}
456395==
457−```
458−
459−Produces:
460−
461−```
462−<p>
463− <sub>1</sub><sup>2</sup><sub>3</sub>
464− <sup>4</sup><sub>5</sub><sup>6</sup>
465− <sub>7</sub><sup>8</sup><sub>9</sub>
466−</p>
467−```
396+</pre></td><td><pre>
397+&lt;p>
398+ &lt;sub>1&lt;/sub>&lt;sup>2&lt;/sup>
399+ &lt;sub>3&lt;/sub>&lt;sup>4&lt;/sup>
400+ &lt;sub>5&lt;/sub>&lt;sup>6&lt;/sup>
401+ &lt;sub>7&lt;/sub>&lt;sup>8&lt;/sup>
402+ &lt;sub>9&lt;/sub>
403+&lt;/p>
404+</pre></td></tr></tbody></table>
468405
469406### `;=` Mictis
470407
@@ -473,23 +410,20 @@ of XML nodes) from a series of `$manx`es. This is mostly useful if you want to
473410make the list outside of an element and then be able to insert it afterwards.
474411For example:
475412
476−```hoon
413+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>
414+<pre class="language-hoon">
477415=/ paras=marl
478− ;= ;p: This is the first node.
479− ;p: This is the second.
480− ;p: Here is the last one.
416+ ;= ;p: First node.
417+ ;p: Second node.
418+ ;p: Third node.
481419 ==
482420;main
483421 ;* paras
484422==
485−```
486−
487−Produces:
488−
489−```
490−<main>
491− <p>This is the first node.</p>
492− <p>This is the second.</p>
493− <p>Here is the last one.</p>
494−</main>
495−```
423+</pre></td><td><pre>
424+&lt;main>
425+ &lt;p>First node.&lt;/p>
426+ &lt;p>Second node.&lt;/p>
427+ &lt;p>Third node.&lt;/p>
428+&lt;/main>
429+</pre></td></tr></tbody></table>