<div style="box-shadow: inset 0 0 0 1px currentColor; padding: 10px 20px; max-width: 54ch; margin: 20px auto; border-radius: 4px">

0. To embed JS code **literally in `<script>`**: Replace `<` to `\x3C` in sequences `</` and `<!--`.
1. To interpolate **inside an HTML tag**:
* Replace `&` to `&amp;` first, and then
* Replace `<` to `&#x3c;`.
<!---->
Same to interpolate text in `<title>`; \
Keyword: RCDATA state.
2. To interpolate **an attribute**: additional `"` to `&#x22;` or `'` to `&#x27;` depending on which type of quotation marks.
> *avoid* unquoted user input (harder to escape)!

</div>

<!-- oh hell I have to insert this to restore HackMD's highlighting: </script> -->

## Notions

* Indispensible in any HTML framework, frontend- or backend-oriented
* Hard to do correctly if you are not a web pwner

## References
* alert(1) to win: https://alf.nu/alert1
* The specification: https://html.spec.whatwg.org/multipage/parsing.html
* [Hyper text literal by observablehq](https://github.com/observablehq/htl)
* Utilities functions from SvelteKit: [`serialize_data.js`](https://sourcegraph.com/github.com/sveltejs/kit/-/blob/packages/kit/src/runtime/server/page/serialize_data.js) [`escape.js`](https://sourcegraph.com/github.com/sveltejs/kit/-/blob/packages/kit/src/utils/escape.js).