HTML in Markdown

Markdown is designed to be simpler and more readable than HTML. However, it sometimes does not have the features needed for complex formatting. To help with this, most Markdown processors allow you to use HTML tags in your Markdown documents to extend its functionality.

Basic HTML in Markdown

HTML and Markdown can be mixed in the same document, making it useful when you need formatting options that aren't available in standard Markdown.

Syntax:

_Standard Markdown text._

<p style="color: hotpink; padding: 10px;">
    HTML text with styling.
</p>

Return to Markdown.

Result:

Standard Markdown text.

HTML text with styling.

Return to Markdown.

Examples of HTML elements used in Markdown

Text formatting

<!-- Text color -->
<span style="color: orange;">Orange text</span>

<!-- Background color and padding -->
<p style="background-color: yellow; color: black; padding: 5px;">Highlighted text</p>

<!-- Text alignment -->
<div style="text-align: center;">Centered text</div>

<!-- Font size -->
<div >
  <p style="font-size: 20px;">
</div>

Orange text

Highlighted text

Tables with formatting

While Markdown has table syntax, HTML tables offer more control and options:

<table>
  <thead>
    <tr>
      <th>User</th>
      <th>Total spend</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Homer Simpson <br>@h_simpson</td>
      <td style="font-weight: bold;">$176.99</td>
    </tr>
  </tbody>
</table>

Definition lists

Markdown does not have built-in support for definition lists:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>

  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Embedding content

<!-- Images with specific dimensions -->
<img src="/markdown_logo.svg" width="300" height="200" alt="markdown logo">

<!-- Video  -->
<video width="800" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

HTML Comments in Markdown

HTML comments can be used to add notes to your Markdown. The comments won't be visible in the rendered document:

Syntax:

<!-- TODO: Add more detail to this section -->

HTML comments can be used to add notes to your Markdown. The comments won't be visible in the rendered document.