Markdown is a very handy way of producing content for the web without having to write HTML. It allows you to write text using its very simple syntax and then converts it to structurally valid HTML.
If you’re looking to use the Markdown syntax for your web documents, we’ve created a cheatsheet that can help you learn and understand the syntax. While there are many flavors of Markdown, this list contains all the syntax of the core Markdown spec and the extended syntax supported by Github Flavoured Markdown.
Download this Cheatsheet
Enter your email below to receive this PDF cheatsheet in your Inbox.
| Markdown | HTML |
|---|---|
| Plain Text | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, accusantium provident necessitatibus corrupti culpa cum? Culpa, aspernatur vel perferendis doloremque facere reiciendis illum eaque laborum, voluptatum, quos minus omnis dicta. | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, accusantium provident necessitatibus corrupti culpa cum? Culpa, aspernatur vel perferendis doloremque facere reiciendis illum eaque laborum, voluptatum, quos minus omnis dicta.</p> |
| Headings | |
| # Text | <h1>Text</h1> |
| ## Text | <h2>Text</h2> |
| ### Text | <h3>Text</h3> |
| #### Text | <h4>Text</h4> |
| ##### Text | <h5>Text</h5> |
| ###### Text | <h6>Text</h6> |
| ## A Custom Heading {heading-id} | <h2 id=”heading-id”>A Custom Heading</h2> |
| Emphasis | |
| **Strong** or __strong__ | <strong>Strong</strong> |
| *Emphasis* or _emphasis_ | <em>Emphasis</em> |
| ~~Strikethrough~~ | <del>Strikethrough</del> |
| ==Highlight== | <mark>Highlight</mark> |
| O~2 | O<sub>2</sub> |
| x^2 | x<sup>2</sup> |
| \*\*Strong\*\* | <pre>**Strong**</pre> |
| Links | |
| [MTE](https://www.maketecheasier.com/) | <a href=”https://www.maketecheasier.com/”>MTE</a> |
| [MTE](https://www.maketecheasier.com/ “Search”) | <a href=”https://www.maketecheasier.com/” title=”Search”>MTE</a> |
| [mte]:https://www.maketecheasier.com/ “Search”[MTE][mte] | <a href=”https://www.maketecheasier.com/” title=”Search”>MTE</a> |
| <https://www.maketecheasier.com> | <a href=”https://www.maketecheasier.com”>https://www.maketecheasier.com</a> |
| Named Anchors | |
| [Chapter 1](#chapter-1) | <a href=”#chapter-1″>Chapter 1</a> |
| [Chapter 2](#chapter-2) | <a href=”#chapter-2″> Chapter 2</a> |
| [Chapter 3](#chapter-3) | <a href=”#chapter-3″>Chapter 3</a> |
| Images | |
|  | <img src=”/path/to/img.jpg” alt=”Alt Text” /> |
|  | <img src=”/path/to/img.jpg” alt=”Alt Text” title=”Title”/> |
| [img1]: /path/to/img.jpg “Title” ![Alt Text] [img1] | <img src=”/path/to/img.jpg” alt=”Alt Text” title=”Title”/> |
| Tables | |
| | Company | Tagline | |———–|————————–| | Google | Don’t be evil | | Nike | Just do it | | Reddit | frontpage of the internet | | <table> <tr> <th>Company</th> <th>Tagline</th> </tr> <tr> <td>Google</td> <td>be evil </td> </tr> <tr> <td>Nike</td> <td>Just do it</td> </tr> <tr> <td>Reddit</td> <td>Frontpage of the Internet</td> </tr> </table> |
| | Company | Tagline | | :— | | | Google | be evil | | <table> <tr> <th>Company</th> <th>Tagline</th> </tr> <tr> <td align=’right’>Google</td> <td>be evil </td> </tr> </table> |
| | Company | Tagline | | | :—: | | Google | be evil | | <table> <tr> <th>Company</th> <th>Tagline</th> </tr> <tr> <td>Google</td> <td align=’center’>be evil </td> </tr> </table> |
| | Company | Tagline | | | —:| | Google | be evil | | <table> <tr> <th>Company</th> <th>Tagline</th> </tr> <tr> <td>Google</td> <td align=’left’>be evil </td> </tr> </table> |
| Horizontal Rule | |
| * * * | <hr /> |
| – – – | <hr /> |
| _ _ _ | <hr /> |
| Inline Code | |
| use `<header>` instead of `<div id=”header”>` | use <code><header></code> instead of <code><div id=”header”></code> |
| Code Blocks | |
| ` ` ` section { float: left; margin: 0 auto; }` ` ` | <pre><code>section { float: left; margin: 0 auto; } </code></pre> |
| ` ` `css section { float: left; margin: 0 auto; }` ` ` | <!– language: lang-css — > <pre><code>section { float: left; margin: 0 auto; } </code></pre> |
| Lists | |
| Unordered List
* Android |
<ul><li>Android</li> |
| Ordered List
1. First | <ol> <li>First</li> <li>Second</li> <li>Third <ol> <li>Alpha</li> <li>Beta</li> </ol> </li> </ol> |
| Checkbox List – [ ] Tomatoes – [ ] Eggs – [ ] Milk | <!– language: lang-php — > <form action=”/checkbox.php”> <input type=”checkbox” id=”01″ name=”01″ value=”tomatoes”> <label for=”01″> Tomatoes</label><br> <input type=”checkbox” id=”02″ name=”02″ value=”eggs”> <label for=”02″> Eggs</label><br> <input type=”checkbox” id=”03″ name=”03″ value=”milk”> <label for=”03″ Milk</label><br> </form> |
| Blockquotes | |
| > make tech > easier | <blockquote> <p>make tech easier</p> </blockquote> |
| > make tech easier | <blockquote> <p>make tech easier</p> </blockquote> |
| > Level One > > > Level Two > > > > > Level Three | <blockquote> <p>Level One</p> <blockquote> <p>Level Two</p> <blockquote> <p>Level Three</p> </blockquote> </blockquote> </blockquote> |
| Definition List | |
| Hello : A word in the English language to signify greetings. : “Hello! How are you?” Thanks : A word in the English language to signify gratitude towards another person. : “Oh wow, thanks!” | <dl> <dt>Hello</dt> <dd>A word in the English language to signify greetings.</dd> <dd>”Hello! How are you?”</dd> <dt>Thanks</dd> <dd>A word in the English language to signify gratitude towards another person.</dd> <dd>”Oh wow, thanks!”</dd> </dl> |
| Footnotes | |
| This is an example text [^1] with a couple of footnote tags[^2]. | <p>This is an example text <a href=”#tag-1″> [1]</a> with a couple of footnote tags<a href=”#tag-2″>[2]</a></p> |
| [^1]: The text is a short sentence that talks about footnote tags. [^2]: A tag could either a single numeral or a word or phrase. | <p id=”#tag-1″>[1]: The text is a short sentence that talks about footnote tags. </p> <p id=”#tag-2″>[2]: A tag could either a single numeral or a word or phrase. </p> |
Image credit: Unsplash
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
