A Guide to Writing Web Content Using Markdown

By Thoriq Firdaus. in Web Design. Updated on September 12, 2023.

If you’re not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling between your code editor and browser to preview the output.

For those who write online content regularly, using Markdown is a more convenient option. Markdown enables you to draft your articles in plain text, which can later be converted into valid HTML. Plus, with the right tools, you can see the rendered output instantly.

Interestingly, Markdown is becoming the go-to format for new publishing platforms like Ghost, AnchorCMS, and ScriptoGram. These platforms prefer Markdown because it keeps their interface clean and free from bulky WYSIWYG JavaScript libraries.

In this article, we’ll guide you through the Markdown format and introduce you to some tools that make writing in Markdown a breeze. Let’s dive in.

Quick Guide to Markdown Syntax

Markdown uses a variety of notations to structure your content. Let’s explore some of these.

Creating Paragraphs

Creating a paragraph in Markdown is straightforward. Simply write your text and press Enter to start a new paragraph. For example:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This will be converted into:

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Formatting Text: Bold and Italic

You can use asterisks to format text as either bold or italic. Specifically, a single asterisk is used for italic, and double asterisks are used for bold.

 *Lorem ipsum*
 **Lorem ipsum**

The above example will be rendered as:

 <em>Lorem ipsum</em>
 <strong>Lorem ipsum</strong>

If you wish to make the text both bold and italic, you can wrap it with three asterisks, like this:

 ***Lorem ipsum***

Creating Headings

In Markdown, you can create headings using hash tags. A single hash tag represents a level 1 heading, two hash tags for a level 2 heading, and so on.

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

This will be converted into the following HTML tags:

 <h1>Heading 1</h1>
 <h2>Heading 2</h2>
 <h3>Heading 3</h3>
 <h4>Heading 4</h4>
 <h5>Heading 5</h5>
 <h6>Heading 6</h6>

Creating Lists: Ordered and Unordered

For unordered lists in Markdown, you can start each line with either an asterisk or a dash.

 - this is a list item
 - this is another list item
 - this is yet another list item

For ordered lists, you can start each line with a number, like so:

 1. this is list item 1
 2. this is list item 2
 3. this is list item 3
 4. this is list item 4
 5. this is list item 5

You can also create nested lists by simply using spaces to indent the items.

 1. Hello
  1.1 Nested Hello
 2. Hello
  2.1 Nested Hello
 3. Hello

In HTML, these list types will be translated into <ul> for unordered lists and <ol> for ordered lists.

Creating Horizontal Lines

In Markdown, you can create horizontal lines, equivalent to the HTML <hr> tag, by using dashes or equal signs. Here’s an example:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat.
 
 --------------------------------
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 ================================

The output will resemble the following:

Creating Blockquotes

To create a blockquote in Markdown, start each line with a > sign, as shown below:

 > Duis aute irure dolor in reprehenderit in voluptate velit esse
 > cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 > proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This will be wrapped in an HTML <blockquote> element.

Creating Links

To create a clickable text link in Markdown, wrap the text in square brackets and the URL in parentheses, like this:

 [Hongkiat.com](https://www.hongkiat.com/blog/)

Adding Images

Inserting an image in Markdown is similar to creating a text link. Start with an exclamation mark, followed by the image’s alt text in square brackets and the image URL in parentheses. Here’s how:

 ![image](http://imageurl.jpg)

You can also include a title for the image as follows:

 ![image](http://imageurl.jpg "Image Title")

Markdown Limitations

It’s important to note that Markdown’s formatting syntax is designed to address issues that can be conveyed in plain text. As such, it doesn’t support some HTML tags like table, pre, and div.