Blog ❯ Author: Fabio Moschini|Date: 21.08.2022
Introduction to Markdown
Markdown

What is Markdown?
It's a language through which you can define the layout of a web page. Text written using Markdown syntax can be converted to HTML and many other formats.The Markdown language maintains almost unchanged readability of the text, making its use simple and immediate.
For example, this text written in Markdown:can be transformed into HTML and displayed as follows:
Page Title
Page Description
The following text is in italics, unlike this one which is in bold; finally, this textAs it's evident, the text written in Markdown is absolutely readable, although there are characters that define the layout. A markdown file is a text file with a 'md' extension and contains both the text and its formatting, applied using symbols such as the hash #, asterisk *, underscore _ or greater than >.
What are the tools to create a file in Markdown?
Since a markdown file is in text format, you can create or modify this type of file with any text editor.However, there are features that make life easier for those who need to write, view, or convert a markdown file.
For this reason, it's preferable to use advanced editors such as:
What are the rules for defining layout in Markdown?
In the previous example, we used some rules that Markdown provides to define the layout of a text.For example, for the title we used the "hash" character #, followed by a space and the text that defines the title.
When the text is converted to HTML, the character # is replaced by the tag <h1>, whose closing tag will be inserted at the end of the line. Similarly, for the subtitle we used the double hash ##, which corresponds to the <h2> tag in HTML.
As it's easily intuitive, the sequence of three hashes corresponds to the tag <h3> and so on, up to six hashes that correspond to the tag <h6>. In the example we used other rules for text formatting, such as, for example, the one to set italics, through the asterisk character *. This way, the text between two characters * is converted to HTML using the tags <i> ... </i>. In a very similar way, for bold we use the double asterisk ** which, in HTML, becomes <b> ... </b>, while to have strikethrough text you must enclose it between two double tilde characters ~~, which, in HTML, becomes <s> ... </s>.
Defining a paragraph or block of text
Markdown uses an empty line to define paragraphs.Markdown:Result:
This text, although written on different lines, is part of the same paragraph
while from this line starts a new paragraph
while from this line starts a new paragraph
What are the most important rules in Markdown?
This table shows the most used rules for formatting text with Markdown:| Markdown | Formatted Text | HTML | Notes |
|---|---|---|---|
| # Title | Title | <h1> ... </h1> | heading 1 |
| ## Title | Title | <h2> ... </h2> | heading 2 |
| ### Title | Title | <h3> ... </h3> | heading 3 |
| #### Title | Title | <h4> ... </h4> | heading 4 |
| ##### Title | Title | <h5> ... </h5> | heading 5 |
| ###### Title | Title | <h6> ... </h6> | heading 6 |
| *Text* | Text | <i> ... </i> | italics |
| _Text_ | Text | <i> ... </i> | italics |
| **Text** | Text | <b> ... </b> | bold |
| __Text__ | Text | <b> ... </b> | bold |
| ***Text*** | Text | <b><i> ... </i></b> | bold and italics |
| ___Text___ | Text | <b><i> ... </i></b> | bold and italics |
| ~~Text~~ | <s> ... </s> | strikethrough |
Other rules defined in Markdown
Blockquote
The greater than character > is used, followed by the text:Markdown:
Result:
blockquote
It's possible to use multiple greater than characters in sequence to define higher level blockquotes:
Markdown:
Result:
first level blockquote
second level blockquote
third level blockquote
Lists
Each item in the list is preceded by the "minus" character -:Markdown:Result:
- Element no. 1
- Element no. 2
- Element no. 3
- Element no. 2
- Element no. 3
Numbered Lists
Each item in the list is preceded by the characters 1.:Markdown:Result:
1. Element no. 1
2. Element no. 2
3. Element no. 3
2. Element no. 2
3. Element no. 3
Links
The text to click is enclosed in square brackets, while the URL of the link follows in round brackets:Markdown:Result:It's possible to use other methods to create links. For example, instead of defining the URL right after the text, you can use a label that references the URL:
Markdown:Result:
You can also use a number as a label for the URL:
Markdown:Result:
Source Code
To indicate a block of lines that represent source code, enclose the code between two sequences of three "backtick" characters ```.It's also possible to indicate the language for which you want to apply the formatting:
Markdown:Result:
Images
For images, there are two methods:Inline-style:
Markdown:Result:

or Reference-style:
Markdown:
Result:

Tables
For table definition, the "pipe" character | is used to delimit columns and a sequence of - to separate the header from other rows.The content of the cells can be formatted according to the established rules.
Markdown:
Result:
| Column 1 | Column 2 |
|---|---|
| First row | No formatting |
| *Second row* | *Italics* |
| **Third row** | **Bold** |
Horizontal Rule
To separate one section of the page from another, you can insert a horizontal rule.In HTML this element can be defined with the tag <hr>.
In Markdown it's sufficient to write one of these sequences of characters:
- - "minus" character ---
- - "asterisk" character ***
- - "underscore" character ___
The line must not contain any other characters.
Markdown:Result: