Advertisement
❮ Previous: Markdown Escaping Characters Next: Markdown Cheat Sheet ❯

Markdown HTML

You can use many HTML tags in Markdown applications.

If you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images.

Using HTML is also helpful when you need to change the attributes of an element, like specifying the color of text or changing the width of an image.

You can use HTML place the tags in the text of your Markdown-formatted file.

Remember that not all Markdown applications support HTML in Markdown documents.

Check your Markdown application’s documentation and some applications support only a subset of HTML tags.

You have to use blank lines to separate block-level HTML elements like <div>, <table>, <pre>, and <p> from the surrounding content.

And try not to indent the tags with tabs or spaces — that can interfere with the formatting.

Note: You can’t use Markdown syntax inside block-level HTML tags. For example, <p>This is **bold** text. </p> won’t work.


Underline

You can underlined text is not something you typically see in web writing, probably because underlined text is nearly synonymous with links.

However, if you’re writing a paper or a report, you may need the ability to underline words and phrases. A couple of applications like Bear and Simplenote provide support for underlining text, but Markdown doesn’t natively support underlining.

If your Markdown processor supports HTML, you can use the <ins> or <u> HTML tag to underline text in your document.

Example

This text is <ins>underlined</ins>.

This text is <u>underlined</u>.

Try this code ❯


Centering Text

You can use style attribute and text-align CSS property to centering text.

Example

<p style="text-align: center">Centered</p>

Try this code ❯


Strike Through

You can use HTML <strike> or <del> tag to strike through the text, as shown in the following example:

Example


This text is <strike>strike through</strike>.

This text is <del>strike through</del>.

Try this code ❯


Color

The Markdown doesn’t allow you to change the color of text, but if your Markdown processor supports HTML, you can use the style attribute and set color CSS property to set color using a color’s name or the hexadecimal #RRGGBB code.

Example

This is <span style="color:red">red</span> color

<p style="color:red">This paragraph is red</p>

Try this code ❯


Background Color

You can set background color by using background-color CSS property if your markdown application support HTML.

Example

This is <span style="background-color:red">red</span> color

<p style="background-color:red">This paragraph is red</p>

Try this code ❯


Subscript

If your markdown application support HTML by using <sub> tag you make subscript.

Syntax:

<sub>words or phrases</sub>

Example

H<sub>2</sub>O

Try this code ❯


Superscript

If your Markdown application supports HTML than you can use the <sup> HTML tag.

Syntax:

<sup>2</sup>

Example

X<sup>2</sup>

Try this code ❯


Tables

You can create table by using html table elements.

Example

<table>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>24</td>
 </tr>
 <tr>
  <td>Jane</td>
  <td>Doe</td>
  <td>34</td>
 </tr>
</table>

Try this code ❯


Advertisement

blockquote

You can use <blockquote> HTML tag if your markdown application support Markup Language, as show in following example:

Example

<blockquote>Climate change includes both global warming driven by human-induced emissions of greenhouse gases and the resulting large-scale shifts in weather patterns.</blockquote>

Try this code ❯


Line Break

You can also use trailing white space or the <br> HTML tag at the end of the line.

Example

This paragraph will break here<br>and continue.

Try this code ❯


Images

There is no Markdown syntax for images doesn’t allow you to specify the width and height of images.

If you need to add width and height of a image and your Markdown processor supports HTML, you can use the <img> HTML tag with the width and height attributes to set the dimensions of an image in pixels.

This is how image will displayed:

Example

<img src="flowers.jpg" width="100" height="100">

Try this code ❯


Caption

There is no caption support image in Markdown, but there are two possible workarounds. If your Markdown application supports HTML, you can use the <figure> and <figcaption> HTML tags to add a caption for your image.

flowers

Flowers

Example

<figure>
  <img src="flowers.jpg" alt="flowers">
  <figcaption>Flowers</figcaption>
</figure>

Try this code ❯

❮ Previous: Markdown Escaping Characters Next: Markdown Cheat Sheet ❯
Advertisement