A Guide to Markdown for Simpler Web Writing

It’s easy to explain why writers, designers, developers, and tech geeks choose to learn markdown. It is very simple to write semantic, lightweight, and lightning fast with regards to formatting articles and plain text.

Nowadays it’s widely used in article writing, documentation, help text, etc. In this article, we’ll talk about the basic syntax and resources, where anyone can enrich their knowledge. So, let’s start!

Heading

To write an HTML heading in Markdown we use the # (hash mark) syntax. If we want to switch between h1 to h6, we’ll change the number of hashes (#) that are used.


# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

list.scotch.io

Markdown supports two list items, both ordered (numbered) and unordered (bulleted) lists. Unordered lists, use * asterisks, + plusses, and - hyphens interchangeably as list markers:


* Science  
* Geography 
* Livestock

    + Science
    + Geography
    + Livestock
    
    - Science
    - Geography
    - Livestock

Output

  • Science
  • Geography
  • Livestock

    • Science
    • Geography
    • Livestock

    • Science

    • Geography

    • Livestock

Numbered lists are easy, because Markdown keeps track of the numbers for you.


1. Science     
2. Geography
3. Livestock

Output

  1. Science
  2. Geography
  3. Livestock

Nested List Items

To create nested list items, we just have to indent. Nested lists can be made with indents of four spaces and eight spaces.


1. JavaScript Library
    - jQuery;             // Indented four spaces.
        * jQuery Mobile   // Indented eight spaces.
    - Node and AngularJS  // Four spaces again.

Output

  1. JavaScript Library
    • jQuery;
      • jQuery Mobile
    • Node.js and Angular

Horizontal Rules

In HTML, we insert the <hr/> syntax for a horizontal rule, but in Markdown we will use three or more hyphens, asterisks, or underscores on a line by themselves. They will all work the same.


Rule 1
*******
Rule 2
====

Output

Rule 1


Rule 2


Paragraphs

To write a paragraph or text in HTML, we use the predefined <p> </p> tags, but in Markdown, a block of text is automatically converted to a paragraph. For a blank line, two spaces are used instead of a <br> tag.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Italics and Bold

Paragraph and plain text formatting are very easy in Markdown. We use single asterisks*around the text for italic text. We can also use an underscore_ instead of * for italic formatting. The same formatting will happen for bold text except we’ll just use double asterisk** or double underscore__. Finally, we can use the asterisk three times *** or underscores ___ for *Bold and Italic formatting.


*Italic text*, and so is _this_.
**Bold text**, and so is __this__.
Use ***italics and bold together*** if you ___have to___.

Output

Italic text, and so is this. Bold text, and so is this. Use italics and bold together if you have to.

Code

To write a code block we can use the backtick character (```) around the code. When we’re working with the inline code blocks we just use the backtick once: inline code blocks.


```
<nav>
    <ul>
        <li></li> 
        <li></li> 
        <li></li> 
    </ul>
 </nav>
```

or

`hello!`

Images

To add an image link we’ll use the following syntax:


`![Alt Text](image/path/img.jpg)` **Alt Text** 

The exclamation ! mark is necessary for declaring images.

Links

Markdown supports two styles for formatting links. One style that is offered by Markdown is the inline and the other is the reference links. To create an inline link we’ll need to use the following markups [Text](http://www.example.com)

On the other hand, for the reference links we’ll need to use a second set of square brackets, in which you place a label of your choosing to identify the link. Check out some examples below:


// inline
[scotch.io](https://scotch.io)

// reference
This is [an example][1] reference-style link.

[1]: http://example.com

Blockquotes

To write blockquotes we just add this > (greater than) symbol before a text block. If you’re quoting passages of text in an email message, then you know how to create a blockquote in Markdown. It looks nice if you carefully wrap the text and put a > before every line:


> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Resources

Here are some resources to help you learn some more markdown.

Online Markdown Tools

Here are some online tools that will help you write in markdown. These are good when authoring blog posts or when you just need a clean editor to write markdown.

Conclusion

With the proliferation of frontend tools and editors trying to get non-coders and coders alike to write valid markup, markdown is the best way right now. It is being used across a variety of different tools including GitHub and many CMSs and it doesn’t hurt to add markdown to your toolbelt.

I hope this article has encouraged you to start exploring in Markdown (if you haven’t already). Furthermore, you can check out the resources and tools I’ve linked to in this tutorial.

If you have questions, let me know in the comments!

Md Abdul

Hello, I am a freelance front-end web designer & developer. Couple of years’ working experience in web design & front-ends development. I'm also a regular writer for several networks, speaker, and Founder of the Opensource-It & Opensource-Studio.