How to write markdown

Default avatar.
April 15, 2013
How to write markdown.

ThumbnailRecently, there's been a lot of talk about markdown as an alternate way to format text.

I decided to do a little research and see what all the talk was about and I was actually quite glad of what I found; markdown is simple markup language that makes it easier for writers to write good content for the web without having to worry about the HTML code in their articles.

The benefit of using markdown is that you can write substantially cleaner articles and it also makes it easier for anyone reading your articles to be able to read it, without actually opening the page in a browser.

How to write markdown

Writing markdown is the simplest thing you can imagine:

Bold and italic text

To create italic text you just need to surround the text by one star:

This is *italic text.*

Which will produce:

This is italic text.

And to create bold text you insert two stars:

And this is **bold text.**

Which will produce:

And this is bold text.

Headings

To create headings in markdown all you need to is add a hash sign before your content. One hash sign is the equivalent of an <h1>, two means an <h2> and so on until <h6>:

# this is an heading 1
## this is an heading 2
### this is an heading 3
#### this is an heading 4
##### this is an heading 5
###### this is an heading 6

Paragraphs

Writing paragraphs is as simple as writing your text, and if you want to add another another paragraph you just need to press enter and in the next line a new paragraph will be added:

One paragraph

And here is another paragraph

Is the equivalent of:

<p>One paragraph</p>
<p>And here is another paragraph</p>

Blockquotes

To create blockquotes you need to add a angled bracket (>) before the text you want, like so:

> Somebody said this quote some years ago

Which is the same as:

<blockquote>
<p>Somebody said this quote some years ago</p>
<blockquote>

Links

Creating links is very simlar to HTML, you first place the text you want the user to see inside square brackets and then place the link location inside a pair of parentheses:

[Webdesigner Depot](https://www.webdesignerdepot.com)

Which is the equivalent of:

<a href=”https://www.webdesignerdepot.com”>Webdesigner Depot</a>

Images

Images use the same basic syntax as links, but in images the text you place in square brackets will be the alt text and you also need to place an exclamation mark before everything to make markdown know that what you are writing is an image and not a link:

![My image](http://example.com/myimage.jpg)

Is the same as:

<img src=”http://example.com/myimage.jpg” alt=”My image” />

Unordered Lists

To create a simple unordered list you only need to create the list items, you don’t need to worry about opening and closing the list. All you need to do is to add a line break, then add an asterisk before each item:

* One list item
* Another list item
* And a third one

Is the equivalent of:

<ul>
<li>One list item</li>
<li>Another list item</li>
<li>And a third one</li>
</ul>

Ordered Lists

Like the unordered lists you only need to concern yourself with the actual list items, there's no opening or closing. To use an ordered list you just need to use numbers instead of asterisks:

1 One list item
2 Another list item
3 And a third one

Is the equivalent of:

<ol>
<li>One list item</li>
<li>Another list item</li>
<li>And a third one</li>
</ol>

Conclusion

Markdown is a really good backup if you write articles for the web and you are not a savvy HTML developer, it really facilitates the creation of content for the web. There is even a Wordpress Plugin that allows markdown in posts and comments and automatically converts it to HTML.

Have you learnt to use markdown? What benefits have you found over other forms of markup? Let us know in the comments.

Featured image/thumbnail, blogging image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…