DEV Community

Md Abdul Mutalib
Md Abdul Mutalib

Posted on

Markdown Syntax & Features: A Comprehensive 2025 Guide

#markdown

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
Enter fullscreen mode Exit fullscreen mode

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.

Collapsed by default
This section was collapsed by default!

The source code:

<details>
  <summary>Collapsed by default</summary>
  This section was collapsed by default!
</details>
Enter fullscreen mode Exit fullscreen mode

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

Open by default
This section is open by default thanks to open in the <details open> 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 H2O, which should push the "2" down.

Superscript Tag

Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up.

Lists

Unordered List:

Use -, *, or +:

- Item 1
- Item 2
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Ordered List: Use numbers: 

1. First item
2. Second item
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Links

Create hyperlinks using brackets and parentheses:

[OpenAI](https://openai.com)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Rendered, the above code displays:

Markdown Logo

Code Blocks

  • Inline Code: Use backticks: `code`
  • Block Code: Use triple backticks: 
def hello_world():
    print("Hello, world!")
Enter fullscreen mode Exit fullscreen mode

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 
| 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                          |
Enter fullscreen mode Exit fullscreen mode

Table 2

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

Task Lists

  • [x] Complete Markdown guide
  • [ ] Publish the blog post 
- [x] Complete Markdown guide
- [ ] Publish the blog post
Enter fullscreen mode Exit fullscreen mode

Footnotes

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

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

[^1]: This is the footnote itself.
[^note]: This is another footnote.
Enter fullscreen mode Exit fullscreen mode

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

Footnotes

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

  1. Such as this footnote. ↩

  2. When using text for footnotes markers, no spaces are permitted in the name. ↩

Top comments (0)

Read next

ebereplenty profile image

Essential Questions to Ask Recruiters During the Interview

NJOKU SAMSON EBERE -

dharshinisri_g_04a9fda5b6 profile image

Amazon Macie

Dharshinisri G -

zevireinitz profile image

💡 The Untold History of GitHub Awesome-Lists 🤯

Zevi Reinitz -

excalibra profile image

Batch Processing for Setting IE Homepage, Trusted Security Zones, Compatibility View, and Preventing Edge Hijacking

Excalibra -