How to use HTML inside Markdown
Try it — edit the markdown and watch the preview
Result
Runs entirely in this tab. Open the full editor to work on a real document.
Raw HTML is part of Markdown. It has been since the original spec, and it is the reason Markdown can express things it has no syntax for — underline, centring, collapsible sections, definition lists.
This is <u>underlined</u> and this is **bold**.
Two rules decide whether it works.
Rule one: blank lines decide what parses
CommonMark stops parsing Markdown the moment it enters an HTML block, and starts again at the next blank line. So this leaves the asterisks visible:
<div>
**not bold**
</div>
And this does not:
<div>
**bold**
</div>
The blank line after the opening tag closes the HTML block and lets Markdown resume. Renderers vary — the one on this page is more forgiving than strict CommonMark — so write the blank lines even where they seem unnecessary. They cost nothing and they are the difference between a working README on GitHub and a page full of asterisks.
Inline tags inside a paragraph have no such problem: <u>, <kbd>, <sub>
and friends work mid-sentence with no blank lines at all.
Rule two: a sanitiser sees it before you do
Anywhere Markdown is rendered from untrusted input — GitHub, this page, most forums and wikis — the HTML goes through a sanitiser first.
| Usually survives | Usually removed |
|---|---|
<u> <ins> <mark> <kbd> | <script> <style> |
<sub> <sup> <br> <hr> | style="…" attributes |
<details> <summary> | onclick and other handlers |
<dl> <dt> <dd> | <iframe> <form> <object> |
<img width> <p align> | <meta> <link> |
The pattern is that presentation and structure stay, and anything that can
execute or load goes. This is why the deprecated align attribute works on
GitHub and the modern style equivalent does not.
Collapsible sections
The most useful thing HTML adds:
<details>
<summary>Show the full output</summary>
Everything in here is hidden until clicked, and **still parses as Markdown**
as long as the blank lines are there.
</details>
No JavaScript involved — the browser handles it. Works on GitHub, here, and in
most static site generators. Add open to the <details> tag to have it start
expanded.
Showing HTML instead of running it
Put it in backticks, or escape the opening bracket:
Use `<details>` for a collapsible block.
<div> renders as text.
Inside a code span or code block, tags are always literal.
When to reach for it, and when not
HTML is the right answer when Markdown genuinely has no syntax: collapsible sections, definition lists, an underline, a centred logo, a keyboard key.
It is the wrong answer when Markdown does have syntax. A <b> instead of
**bold** reads worse in the raw file, loses the meaning, and will be
converted back to Markdown by the next tool that touches it. The point of the
format is that the source is readable — HTML is the escape hatch, not the
style.
Common questions
- Can I put HTML in a Markdown file?
- Yes. Raw HTML is part of the Markdown spec, which is why Markdown can express things it has no syntax for — underline, collapsible sections, definition lists. What is removed afterwards depends on the renderer's sanitiser, not on Markdown.
- Why is the Markdown inside my HTML not rendering?
- Blank lines. CommonMark stops parsing Markdown when it enters an HTML block and starts again at the next blank line, so `**bold**` on the line straight after a `<div>` stays literal. Put a blank line after the opening tag and before the closing one.
- Which HTML gets stripped?
- `<script>` and `<style>` always, everywhere worth using. `style` attributes usually — GitHub removes them and so does this page. Event handlers like `onclick`, and `<iframe>`, `<form>` and `<object>` in most places. What survives is the presentational and structural markup.
- How do I make a collapsible section?
- `<details>` with a `<summary>` inside it. It works on GitHub, here, and anywhere else HTML is allowed, and needs no JavaScript — the browser handles the toggle. Leave blank lines inside so the content parses as Markdown.
- How do I show HTML instead of rendering it?
- Put it in a code span or a code block, or escape the opening angle bracket as `<`. Inside backticks, `<div>` is text rather than markup.