One of Markdown's most powerful architectural features is that it does not attempt to replace HTML. John Gruber explicitly designed Markdown as a writing format that seamlessly integrates with raw HTML tags whenever markdown syntax falls short.

If a feature cannot be expressed in Markdown (such as centering an image, creating a collapsible FAQ accordion, or displaying keyboard key caps), you can write raw HTML directly in your .md file!

Click to Zoom

1. The Raw HTML Rule in Markdown

Any raw HTML5 element placed inside a Markdown file is passed through directly to the compiled HTML output without modification:

2. High-Value HTML Tags for Technical Writers

1. Collapsible Accordions (<details> & <summary>)

Perfect for hiding long code snippets, spoilers, FAQ answers, or optional setup steps:

CREATE TABLE users ( id SERIAL PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE );

2. Keyboard Key Caps (<kbd>)

Display hotkeys and keyboard shortcuts cleanly:

(Renders key caps with distinct borders).

3. Highlighting Text (<mark>)

4. Subscript & Superscript (<sub> & <sup>)

3. Embedding Audio & Video Media

Standard Markdown does not have native audio or video players. Use HTML5 media tags:

Embedded Video:

Responsive YouTube / Loom Video Embeds:

Multiple Choice Questions

1. How does a Markdown compiler handle raw HTML tags written inside a .md file?

A. It throws a fatal syntax error B. It ignores them and deletes them C. It passes the HTML tags through directly into the generated output D. It converts the HTML into Python scripts Answer: C Explanation: Markdown is designed to allow raw HTML tags to pass directly through into the compiled document output.

2. Which HTML5 element pair is used inside Markdown to create collapsible dropdown accordions?

A. <dropdown> and <item> B. <details> and <summary> C. <accordion> and <tab> D. <collapse> and <toggle> Answer: B Explanation: The <details> tag with a <summary> heading creates native, interactive collapsible disclosure widgets supported in all modern browsers and GitHub.

3. Which semantic HTML tag is used to visually represent keyboard shortcut keys (like Ctrl or Enter) in documentation?

A. <key> B. <kbd> C. <btn> D. <input> Answer: B Explanation: The <kbd> (keyboard input) tag denotes user input from a keyboard, typically styled with rounded borders like a physical key cap.

4. How can you center-align an image or text block in standard Markdown?

A. Using the center* markdown marker B. Wrapping the element in an HTML <div align="center"> or <div style="text-align: center;"> tag C. Pressing Tab 10 times D. Markdown automatically centers all content Answer: B Explanation:** Since Markdown lacks native text alignment syntax, HTML container tags (<div style="text-align: center;">) provide alignment control.

5. Why must block-level HTML tags typically be preceded and followed by blank lines in CommonMark?

A. To prevent the Markdown parser from treating the HTML as an inline continuation of a paragraph B. To reduce file size C. Blank lines are required by the CSS engine D. To encrypt the file Answer: A Explanation: CommonMark requires blank lines around block-level HTML to clearly delineate where standard markdown parsing stops and raw HTML starts.