Hello, Friends Today's post is for Those users who don't know how we use markup to make our post stylish and unique that attract the reader. This is a quick markdown reference with samples that I made for my own use. I want to share this with you so that it can help you to write Stylish and beautiful posts using HTML markup.

Contents

1. Headings
2. Text Formatting
3. Breaklines
4. Lists (Order-List and Un-Order-List)
5. Tables
6. Centralized Text
7. Quotes
8. Inline Code
9. Block Code
10. Text/image layout (Align the text/images left and right)
11. Links and Images
12. Embedded Youtube Video

https://cdn.pixabay.com/photo/2015/06/08/15/11/typewriter-801921_960_720.jpg
Image Source

1. Heading 1

# Heading 1

Heading 2

## Heading 2

Heading 3

### Heading 3

Heading 4

#### Heading 4

Heading 5

##### Heading 5

Heading 6

###### Heading 6

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

2. Text Formating

Guide how you can format your text, Decent, Stylish and Beautiful.

Bold

**Bold**
<strong>Bold</strong>
<b>Bold</b>
__Bold__

Bold
Bold
Bold
Bold

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

Italic

<i>Italic<i>
*Italic*
_Italic_

Italic
Italic
Italic

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

Strikethrough

~~Strikethrough~~
<strike>strikethrough</strike>

Strikethrough
strikethrough

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

Bold/Italic

We can use the bold tag along side with the italic tag so our text can get both attributes of bold and itlaic.

**_my username is @wajahatsardar_**
<b><i>My username is @wajahatsardar</i></b>
__*My username is @wajahatsardar*__

My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

Bold/Italic/Strikethrough

You can use these three combine with each other as follow.

**_~~My username is @wajahatsardar~~_**
<b><i><strike>My username is @wajahatsardar</strike><i></b> 
__*~~My username is @wajahatsardar~~*__

My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

3. Breaklines

Break lines are used to break the lines forcefully.

---
***
<br>
***
<hr>

https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

4. Lists

Lists are of two types

1. Order List
2. Unorder List

Order Lists

An ordered list typically is a numbered list of items. It gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.

<ol>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5

You can also make Order-list just like this and whatever number you will allot the list it will arrange it in order that's why it is known as Order-list. You can create simply Number then dot(.) than a word/sentence.
Example
1.Word/Sentence

1. Item 1
2. Item 2
2. Item 3
5. Item 4
5. Item 5

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5

https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

Un-Order-List

<ul>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

• Item 1
• Item 2>
• Item 3
• Item 4
• Item 5

You can also create Un_Order_list by adding +, -, * then space and then Word/Sentence

1. • Item 1
     * Item 1
2. • Item 2
     - Item 2
3. • Item 3
     + Item 3

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

5. Tables

The proper way to generate a table is by using the standard HTML markup. Begin the table content with <table> and end it with </table>. Each table row needs to be placed inside a <tr> and </tr> and any field inside it has to be put inside a table heading:

Example

<table>
    <tr>
        <th>Variable 1</th><th>Variable 2</th><th>Variable 3</th>
    </tr>
    <tr>
        <td>Value 1</td><td>Value 2</td><td>Value 3</td>
    </tr>
         <tr>
        <td>Value 1</td><td>Value 2</td><td>Value 3</td>
    </tr>
        <tr>
        <td>Value 1</td><td>Value 2</td><td>Value 3</td>
    </tr>
</table>

Variable 1	Variable 2	Variable 3
Value 1	Value 2	Value 3
Value 1	Value 2	Value 3
Value 1	Value 2	Value 3

You can also create a table like this way if you don't understand the basic of HTML.

Example

User|Posts|Steem Power|Hive Power
-|-|-|-
Wajahatsardar|1000|4500|4000
xyz|200|9000|30000
abc|38|288|2626|

User|Posts|Steem Power|Hive Power -|-|-|- Wajahatsardar|1000|4500|4000 xyz|200|9000|30000 abc|38|288|2626|

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

6. Center

<center> My user name is @wajahatsardar</center>

My user name is @wajahatsardar

Center/Bold/Italic/Strikethrough

<center>**_~~My username is @wajahatsardar~~_**</center>

**_~~My username is @wajahatsardar~~_**

https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

7. Quotes

> My username is @wajahatsardar

My username is @wajahatsardar

8. Inline code

Use `Code` for Inline code 
`My username is @wajahatsardar`

My username is @wajahatsardar
Use Code for Inline code

9. Code block

 ```
 Code block
 ```

Surround your Code by triple backticks both beginning and at the end.

Code block

https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

10. Text/image layout

<div class="justify-text">
Text or images go here.
</div>

---

<div class="pull-left">
Text or images go here.
</div>

<div class="pull-right">
Text or images go here.
</div>

---

---

---

https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

11. [Links and Images]:

https://steemit.com/
https://steemit.com/

https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji real.jpg

[Source](link of the image)

[Image src](https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg)

https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png

12. Insert Youtube video

https://www.youtube.com/watch?v=xAgZYCHi8MQ
https://www.youtube.com/watch?v=xAgZYCHi8MQ
src

https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/BqIuXs6C-RedLine.png

https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/f5zec6UG-CurieCurator.jpg

• Earn Passive Manna by simply signing up for it here. Manabase is a Universal Basic Income Cryptocurrency.
• Earn Ecoin just by creating Account click Here. Ecoin current price

https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/BqIuXs6C-RedLine.png