31:[] 2f:{"title":"Differences between html and htl.html","cells":[{"id":0,"value":"# Differences between html and htl.html\n[Hypertext Literal](https://observablehq.com/@observablehq/htl) (accessed with `htl.html`) is intended as an eventual replacement for the `html` tagged template literal. It is already used by the HTML cell mode. It is stricter, safer, and offers some new capabilities like attaching event listener functions inline.\n\nIn these side-by-side examples, the code inside the backticks is identical, but the first uses `html` and the second uses `htl.html`.\n\n_See also [Differences between htl.html and htl.html.fragment](https://observablehq.com/d/b9e28d55fa59922a)._","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"---\n### Interpolated strings are escaped","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"html`

i love ${\"bold\"} text

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"htl.html`

i love ${\"bold\"} text

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"---\n### Null is not rendered","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"html`hello ${null} world`","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"htl.html`hello ${null} world`","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"---\n### Functions can be interpolated","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"mutable clicks = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"---\n### Attributes can be toggled with booleans","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"viewof disabled = Inputs.toggle({ label: \"Disabled\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"---\n### Styles can be specified as an object","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"html`whoa`","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"htl.html`whoa`","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"---\n### Whitespace around the top-level node is enclosed in a span, not trimmed","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"html`\n

hello

\n`.outerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"htl.html`\n

hello

\n`.outerHTML","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}