Markdown: The Ultimate Guide to Mastering Basics
Tags: markdown, webdev, beginners, guide
Published: 2023-06-21 12:00:00

_**Markdown: The Ultimate Guide to Mastering Basics**_

If you’ve ever written anything online, chances are you’ve come across [Markdown](https://en.wikipedia.org/wiki/Markdown). It’s a simple markup language that allows you to easily format and style text without having to learn complex HTML or CSS. In this blog post, we’ll go over the basics of Markdown and show you how to use it to create clean, easy-to-read text.

## What is Markdown?

Markdown is a lightweight markup language that uses a simple syntax to format text. It was created by **John Gruber** in 2004 as a way to write in an easy-to-read and easy-to-write format that could be converted into HTML. Markdown is now widely used on websites like [GitHub](https://github.com/), [Reddit](https://www.reddit.com/), and [Stack Overflow](https://stackoverflow.com/), among others.

![Example of Markdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4og3xtz5pycmovd4x3en.jpg)

## Markdown Syntax

Mastering the syntax of Markdown is a breeze with its simple and intuitive design. Discover the power of basic elements like headers, lists, links, and more, to effortlessly enhance your content. Here are some of the basic elements you can use:

### Headers
To add a header, simply put a “#” symbol at the beginning of a line of text. The more “#” symbols you use, the smaller the header will be. For example:

```markdown
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
```

### Emphasis
To make text bold, surround it with two asterisks (“*”). To italicise text, surround it with a single asterisk (“”). For example:

```markdown
This is **bold** text.
This is *italic* text.
```

### Lists
To build a bulleted list, simply put a “-“ or “*” symbol at the beginning of each line. To create a numbered list, put the number followed by a period. For example:

```markdown
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3

1. Ordered List Item 1
2. Ordered List Item 2
3. Ordered List Item 3
```

### Links
To create a link, put the text you want to display in square brackets, followed by the URL in parentheses. For example:

```markdown
[Click here](https://www.example.com)
```
### Images
To add an image, put an exclamation mark (“!”) before the square brackets used for a link. Inside the brackets, include the alternate text for the image (which will be displayed if the image can’t be loaded) and the URL of the image file in parentheses. For example:

```markdown
![Alternate text](https://www.example.com/image.png)
```

### Code
To format code, surround it with backticks. For example:

This is `inline` code.

To format a block of code, start and end the block with three backticks. You can also specify the programming language to enable syntax highlighting. For example:


```javascript
function calculateSquare(number) {
  return number * number;
}

console.log(calculateSquare(5));
```


### Horizontal Rule
To insert a horizontal rule, put three or more dashes or asterisks on a line by themselves. For example:

```markdown
--- Horizontal Rule
```
## Conclusion
Markdown is a basic but powerful text formatting tool. It’s simple to use and can be used for everything from writing blog articles to producing README files for GitHub repositories. After reading this piece, you’ll be well on your way to utilising Markdown to create clear, easy-to-read content.

### Further reading
Looking to expand your knowledge of Markdown? Dive deeper with this fantastic resource – [How to write in Markdown – The MDN Web Docs project | MDN](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN)

### See also
[How to Write a Good README.md for Beginners](https://maxlockwood.dev/how-to-write-a-good-readme-md-for-beginners/)
[Git for Beginners: Mastering the Fundamentals of Version Control](https://maxlockwood.dev/git-for-beginners-mastering-the-fundamentals-of-version-control/)
[Exploring the world of Frontend Development](https://maxlockwood.dev/exploring-the-world-of-frontend-development/)

If you liked this article, then please share. You can also find me on [Twitter](https://twitter.com/maxlockwood88) for more updates.