Learn the essentials of Markdown with this comprehensive guide. Explore basic syntax, advanced features like tables, task lists, and footnotes, and start creating readable, well-formatted content with ease

Markdown Guide: Learn Markdown Syntax and Features

Markdown is a lightweight markup language that makes it easy to format plain text for web publishing. For instance, instead of learning complex HTML tags like <b> for bold text or <a> for links, you can use simple symbols like ** for bold or [text](url) for links. This simplicity speeds up writing and keeps your content readable, even without rendering.

It’s widely used in documentation, blogging, and even coding environments. This guide will help you understand the basics and get started with Markdown.

Why Use Markdown?

• Simplicity: Write content with minimal formatting syntax.
• Portability: Works across multiple platforms and tools.
• Readability: Even without rendering, Markdown documents are easy to read.

Basic Syntax

Here are some common Markdown elements:

Headings

Use # symbols to define headings. The number of # symbols corresponds to the heading level:

# Heading 1
## Heading 2
### Heading 3

Blockquotes

Single line blockquote:

Quotes are cool.

Emphasis

Add emphasis using asterisks or underscores:

• Italic: *text* or _text_
• Bold: **text** or __text__
• Bold and Italic: ***text***

  Details Tag (collapsible sections)

The HTML <details> tag works well with Markdown and allows you to include collapsible sections, see W3Schools for more information on how to use the tag.

The source code:

<details>
  <summary>Collapsed by default</summary>
  This section was collapsed by default!
</details>

Or, you can leave a section open by default by including the open attribute in the tag:

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
  and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Strike Tag

This tag will let you strikeout text.

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC², which should lift the 2 up.

Lists

Unordered List:

Use -, *, or +:

- Item 1
- Item 2

Unordered Lists (Nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

* List item one 
    * List item one 
        * List item one
        * List item two
        * List item three
        * List item four
    * List item two
    * List item three
    * List item four
* List item two
* List item three
* List item four

Ordered List: Use numbers:

1. First item
2. Second item

Ordered List (Nested)

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

1. List item one 
    1. List item one 
        1. List item one
        2. List item two
        3. List item three
        4. List item four
    2. List item two
    3. List item three
    4. List item four
2. List item two
3. List item three
4. List item four

Links

Create hyperlinks using brackets and parentheses:

[OpenAI](https://openai.com)

Images

Embed images with similar syntax as links, but add an exclamation mark ! at the start. For example:

![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Rendered, the above code displays:

Code Blocks

• Inline Code: Use backticks: `code`
• Block Code: Use triple backticks:

  def hello_world():
    print("Hello, world!")
  

Advanced Features

Markdown also supports advanced features like tables, task lists, and footnotes. For example:

Table 1

| Entry            | Item   |                                                              |
| --------         | ------ | ------------------------------------------------------------ |
| [John Doe](#)    | 2016   | Description of the item in the list                          |
| [Jane Doe](#)    | 2019   | Description of the item in the list                          |
| [Doe Doe](#)     | 2022   | Description of the item in the list                          |

Table 2

| Name | Class | Grade | 
|:----------|:---------:|------:| 
| Alice | Math | A | 
| Bob | Science | B | 
| Charlie | History | A | 
| David | Math | C | 
| Eva | Science | B | 

Task Lists

• Complete Markdown guide
• Publish the blog post

- [x] Complete Markdown guide
- [ ] Publish the blog post

Footnotes

Footnotes can be useful for clarifying points in the text, or citing information.¹ Markdown support numeric footnotes, as well as text as long as the values are unique.²

This is the regular text.[^1] This is more regular text.[^note]

[^1]: This is the footnote itself.
[^note]: This is another footnote.

Conclusion

Markdown is an essential tool for anyone working in web development, technical writing, or content creation. Its simplicity and versatility make it a favorite among professionals and hobbyists alike.

Ready to dive in? Start by trying out some basic Markdown syntax today! Here’s a quick exercise:

Write a small paragraph about your favorite hobby using Markdown. Include:

1. A heading for the title of your hobby.
2. A short description with some italic and bold text.
3. A list of reasons why you enjoy it.
4. A link to a resource where others can learn more.

You can also explore tools like Dillinger or Typora to make the experience even smoother.

Learn more about Markdown and start creating your own documents today!

Additional Resources

• Markdown Guide - An extensive resource for learning all things Markdown.
• CommonMark - A widely-used Markdown specification.
• GitHub Flavored Markdown (GFM) - Learn about GitHub’s Markdown version and its extensions.
• W3Schools - HTML Details Tag - Learn how to use the <details> tag with Markdown.
• Dillinger - A cloud-enabled, mobile-ready, offline-storage, AngularJS-powered, HTML5 Markdown editor.
• Typora - A minimal Markdown editor that provides a seamless live preview.

Footnotes

The footnotes in the page will be returned following this line, return to the section on Markdown Footnotes.