HTML in Markdown

Intro to HTML

An HTML tag is a keyword wrapped in angle brackets. Most tags come in pairs: an opening tag and a closing tag with a slash. The content sits between them.

This is <u>underlined</u> text.
Press <kbd>Esc</kbd> to quit.
Water is H<sub>2</sub>O.

Some tags carry attributes that set options, written as name="value" inside the opening tag. The image tag below sets a width.

<img src="kitten.jpg" alt="A kitten" width="120">

Tags are either inline or block. Inline tags such as <u> and <span> sit within a line of text. Block tags such as <div> and <details> wrap whole sections and need a blank line above and below. Markdown syntax inside a block tag is left as written, so leave a blank line before any Markdown you want formatted.

Colours

Compatibility: CommonMark, Obsidian, VS Code, Pandoc

Markdown has no syntax for colour, so you use an HTML <span> with an inline style. Set a named colour such as red or a hex value such as #c0392b.

<span style="color:#c0392b">red text</span>
<span style="color:teal">teal text</span>

Many sites strip style attributes for safety, so this shows as plain text on GitHub, Reddit and others. On GitHub you can colour text through a math expression instead, which is rendered as an image.

$\color{red}{\textsf{red text}}$

See the table below for where inline colour works.

Accordion

Compatibility: CommonMark, GitHub, Obsidian, VS Code, Pandoc

An accordion is a label you click to reveal hidden content. Markdown has no syntax for it, so use the HTML <details> and <summary> tags. The <summary> is the visible label and everything after it stays folded until clicked. GitHub, GitLab and most editors support it.

<details>
<summary>Show details</summary>

Hidden text that appears
when you click the summary.

</details>

Leave a blank line after the <summary> line so the Markdown inside the block still formats.

Image sizing

Compatibility: CommonMark, GitHub, Obsidian, VS Code, Pandoc

Markdown always shows an image at its natural width. To set the width, write the image as an HTML <img> tag with a width in pixels. GitHub and most sites keep it.

<img src="kitten.jpg" alt="A kitten" width="80">
<img src="kitten.jpg" alt="A kitten" width="140">
<img src="kitten.jpg" alt="A kitten" width="220">

Compatibility

The HTML tags people reach for most, and where they work. A tick means the tag renders as expected. A tilde means it works with limits. A cross means it is stripped or shown as plain text.

A guide, not a guarantee. Sanitiser rules change, and a site may allow a tag while removing its attributes. For whole features rather than single tags, see the compatibility page.