Laurel Keck

Basic Markdown and HTML Syntax

Note: John Gruber developed Markdown as a simple way to convert text files into HTML. I’m including some of the basics below, but theres a very thorough explanation of markdown on his website Daring Fireball.

List of elements:

Headers

Markdown

# Header Level One
## Header Level Two
### Header Level Three
#### Header Level Four
##### Header Level Five
###### Header Level Six

HTML

<h1>Header Level One</h1>
<h2>Header Level Two</h2>
<h3>Header Level Three</h3>
<h4>Header Level Four</h4>
<h5>Header Level Five</h5>
<h6>Header Level Six</h6>

Displays as

Header Level One

Header Level Two

Header Level Three

Header Level Four

Header Level Five
Header Level Six

Paragraph

Markdown

This is a paragraph.

HTML

<p>This is a paragraph.</p>

Displays as

This is a paragraph.

Emphasis

Use when the item needs emphasis applied to it. If you are wanting something to be italicized for aesthetic purposes, use CSS to make it so.

Markdown

It's *very important* to use semantic HTML.

HTML

<p>It's <em>very important</em> to use semantic HTML.</p>

Displays as

It’s very important to use semantic HTML.

Strong

Use when the item needs strong emphasis applied to it. If you are wanting something to be bold for aesthetic purposes, use CSS to make it so.

Markdown

**strong**

HTML

<strong>strong</strong>

Display as

strong

Markdown

[Wikipedia](https://wikipedia.org/ "Wikipedia") is one of my most-visited websites.

HTML

<p><a href="https://wikipedia.org/" title="Wikipedia">Wikipedia</a> is one of my most-visited websites.</p>

Displays as

Wikipedia is one of my most-visited websites.

This is a handy way to handle links if you’re going to reference one in several places on your page, and makes it a bit easier to update all references to the link later on if the URL needs to be changed. It also makes your paragraph more readable in its Markdown form as there’s not a long URL in the middle of your text.

Markdown

Installing [Jekyll][jekyll] requires installing [Homebrew][1] and [Ruby][2].

[jekyll]: https://jekyllrb.com/ "Jekyll"

[1]: https://brew.sh "Homebrew"
[2]: https://www.ruby-lang.org/ "Ruby"

HTML

<p>Installing <a href="https://jekyllrb.com/" title="Jekyll">Jekyll</a>
requires installing <a href="https://brew.sh" title="Homebrew">Homebrew</a>
and <a href="https://www.ruby-lang.org/" title="Ruby">Ruby</a>.</p>

Displays as

Installing Jekyll requires installing Homebrew and Ruby.

Unordered Lists

Using either *, + or - yields the same result.

Markdown

* Thing
+ Thing
- Thing

HTML

<ul>
  <li>Thing</li>
  <li>Thing</li>
  <li>Thing</li>
</ul>

Displays as

  • Thing
  • Thing
  • Thing

Ordered Lists

Markdown

1. Thing One
2. Thing Two
3. Thing Three

HTML

<ol>
  <li>Thing One</li>
  <li>Thing Two</li>
  <li>Thing Three</li>
</ol>

Displays as

  1. Thing One
  2. Thing Two
  3. Thing Three

Multi-Paragraph List Item

Markdown

*    Thing One.

     A bit more about thing one.

*    Thing Two.

HTML

<ul>
  <li>
    <p>Thing One.</p>
    <p>A bit more about thing one.</p>
  </li>
  <li>
    <p>Thing Two.</p>
  </li>
</ul>

Display as

  • Thing One.

    A bit more about thing one.

  • Thing Two.

Definition Lists

Markdown

Word
: Definition
: Additional Definition

HTML

<dl>
  <dt>Word</dt>
  <dd>Definition</dd>
  <dd>Additional Definition</dd>
</dl>

Displays as

Word
Definition
Additional Definition

Inline Code

Markdown

When you need to display `<code>` in a sentence.

HTML

<p>When you need to display <code>code</code> in a sentence.</p>

Display As

When you need to display <code> in a sentence.

Code Block

Markdown

[Tab] <ol>
[Tab]   <li>Thing One</li>
[Tab]   <li>Thing Two</li>
[Tab]   <li>Thing Three</li>
[Tab] </ol>

HTML

<pre><code>
  <ol>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
  </ol>
</code></pre>

Displays as

<ol>
  <li>Thing One</li>
  <li>Thing Two</li>
  <li>Thing Three</li>
</ol>

Blockquote

This is also an example of how HTML can be combined with Markdown. Note that I’ve used <br> to add a line break in the quote, &mdash; to include an em dash, and added the <cite> tag around the name attributed to the quote.

Markdown

> To have an open mind<br>
> but not an empty head.
>
> &mdash; <cite>Edward Tufte</cite>

HTML

<blockquote>
  <p>To have an open mind<br>
  but not an empty head.</p>

  <p>&mdash; <cite>Edward Tufte</cite></p>
</blockquote>

Displays as

To have an open mind
but not an empty head.

— Edward Tufte