HTML

Press <kbd>Cmd</kbd>+<kbd>S</kbd>. H<sub>2</sub>O, 3 m<sup>2</sup>,
<mark>highlighted</mark>, <ins>underlined</ins>, <small>fine print</small>.

# HTML

The Formatted view draws the HTML that github.com renders and markdown has no syntax for. Everything else is shown as its source. Either way the file keeps the HTML byte for byte.

Full syntax: [embedding HTML on markdownlang.com](https://www.markdownlang.com/advanced/html.html).

## Inline tags

```markdown
Press <kbd>Cmd</kbd>+<kbd>S</kbd>. H<sub>2</sub>O, 3 m<sup>2</sup>,
<mark>highlighted</mark>, <ins>underlined</ins>, <small>fine print</small>.
```

Press <kbd>Cmd</kbd>+<kbd>S</kbd>. H<sub>2</sub>O, 3 m<sup>2</sup>, <mark>highlighted</mark>, <ins>underlined</ins>, <small>fine print</small>.

- The tags hide like the `**` around bold text: with Reveal at the caret they show while the caret is inside the pair; in Pure they never show.
- There is no button or shortcut. Write them in the Source view.
- Attributes are ignored, as GitHub ignores `class` and `style`.
- A tag without its partner in the same paragraph is shown as source.
- `==highlight==` is not markdown. Use `<mark>`.

## Blocks

| Tag | Drawn as |
| --- | --- |
| `<figure>` holding `<img>` tags and an optional plain-text `<figcaption>` | Its pictures and its caption. Every picture is shown; `class` is ignored, so a figure with a light and a dark screenshot shows both, as on GitHub. |
| `<picture>` with a `<source>` per `prefers-color-scheme` | The picture that matches the app's theme. |
| `<details>` with a `<summary>` | A row showing the summary, with the content set in under it. Always open in the editor. |
| `<div align="center">`, `<p align="...">` | What is inside it, aligned. Written around markdown with blank lines inside, it aligns those blocks. As one block, it is drawn when it holds only pictures or only plain text. |
| `<span>` | Plain text. |
| `<img>`, `<br>` | A picture, a line break. See [Pictures](/docs/reference/links-footnotes-pictures#pictures) and [Line breaks](/docs/reference/text#line-breaks). |

- Clicking a drawn block shows its source; clicking elsewhere draws it again. In Pure mode the source is never shown, and Backspace and Delete do nothing beside a hidden block tag, so a pair is removed in the Source view.
- Nothing drawn from HTML is edited in the Formatted view. Edit it in the Source view.

## Shown as source

Everything else: a `<table>`, a link around a centred picture, a `<summary>` with markup in it, `<h1 align="center">`, a `<picture>` inside a sentence, a figure holding more than pictures and a plain caption.

- Inline, it is set in the monospace face with the tag names in one colour.
- On its own lines, it sits on a panel with an `HTML` label at the top right. Lines are not wrapped; a wide line scrolls sideways.
- Clicking the label folds the block to its first line and says how many lines it has. A fold is a state of the view, not of the file; it survives a visit to the Source view and is gone after a restart.
- A `<script>` tag is shown as text and never runs. An <!--wymark: {"author":"Claude","time":"2026-10-09T20:40:00Z"}@@John: this sentence is carried over from the old Markdown page, which predates this week's HTML work. None of the three backlog entries on that work say what an `<img>` with an unknown attribute does now. Confirm, or cut the sentence.-->`<img>` with an event handler, an unknown attribute or a `javascript:` source is shown as text.<!--wymark-end-->

## Comments

HTML comments are hidden, as on GitHub. Wymark's own comments are HTML comments with a `wymark:` prefix. A renderer that shows HTML comments, such as Typora, shows them. See [Comments](/docs/concepts/comments) and the [marker reference](/docs/how-it-works/markers).