Hey there, steemian I'm grateful because I passed #achievement3, and you can see my post about it here.

Okay, now I'll go on to #achiement4, where we'll talk about Applying Markdown, which is how to structure articles on Steemit to make them appear more appealing.

with relation to steemit Markdown postings may be formatted in two ways: using symbols and using markup.

"I'll list the stuff here.:

• Create Heading and Sub
• Create bold, italic, bold italics and scribbled text
• Create a Rank Above and Below
• Bullets and Numbering
• Insert Text Link
• Inserting Tables
• Aligment text
• 2 colum paragraph
• align image in Paragraph
• Adding Code in a post
• Create a dividing line
• Writing Quotes - Blockquotes

---

![gambar.png]() --- - ### Create Heading and Sub

To Create a Heading (Title) and Sub heading (Sub Title) I usually use this, namely by using the following symbols:

# Your Title
## Your Title
### Your Title
#### Your Title
##### YourTitle
###### Your Title

Result :

Your Title

Your Title

Your Title

Your Title

YourTitle

Your Title

---

• Create bold, italic, bold italics and scribbled Text

Code:

Bold : ** Your Text **
Italic : * Your Text *
Bold Italic : *** Your Text ***

Result

Your Text
Your Text
Your Text

Or you can also use the markup <i> and closed with </i> for italics, and <b> for bold. Or add both codes for Bold italic letters

Ex :

<i>Italic Text</i>
<b>Bold Text</b>
<i><b>Italic Bold Text </i></b>

And to make the scribbled text it is enough to add the code <del> between the text or sentences.

• Ex : <del>Your Text</del>

• Result : Your Text

• Create a Rank Above and Below

Rank above using code <sup> and closed with </sup>
The ranks below use the <sub> code and are closed </sub>

Rank Above

• Ex : 3<sup>2</sup>

• Result : 3²

Rank Below

• Ex : H<sub>2</sub>O

• Result : H₂O

---

• Bullets and Numbering.

To make bullets you can use symbols (-) or this symbol (*)

Example Usage:

- Steemit
- Steemit
- Steemit
* Steemit
* Steemit
* Steemit

Result :

• Steemit
• Steemit
• Steemit
• Steemit
• Steemit
• Steemit

---

Numbering

Example Usage:
1. STEEM
2. STEEM DOLLAR
3. STEEMPOWERS

Result

1. STEEM
2. STEEM DOLLAR
3. STEEMPOWERS

---

• Insert Text Link.

To write a source or direct readers to another site or link, you can enter a link in the text with the following symbol:
[Newcomers' Community](https://steemit.com/trending/hive-172186)

Result : Newcomers' Community

---

Inserting Tables

There are two ways to create your table:

The First to Use this Code:

Colum Table1 | Colum Table2
--------- | ----------
Cell 1 | Cell 2
Cell 3 | Cell 4

you can add as many columns and cells as you need

Result :

Colum Table1	Colum Table2
Cell 1	Cell 2
Cell 3	Cell 4

The second way:

• Using HTML Table.
  The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the text in <th> elements are bold and centered. By default, the text in <td>elements are regular and left-aligned.Source

<table style="width:100%">
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 5</td>
</tr>
</table>

Result :

Title 1	Title 2	Title 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 5

---

• Aligment text

• justify

Code :

<div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin. Bibendum at varius vel pharetra vel turpis nunc. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Vitae auctor eu augue ut lectus. Euismod lacinia at quis risus sed vulputate odio ut enim. Malesuada fames ac turpis egestas integer.</div>

Result

---

- Center

<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin. Bibendum at varius vel pharetra vel turpis nunc. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Vitae auctor eu augue ut lectus. Euismod lacinia at quis risus sed vulputate odio ut enim. Malesuada fames ac turpis egestas integer</div>

Result

---

• Aligment Right

<div class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin. Bibendum at varius vel pharetra vel turpis nunc. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Vitae auctor eu augue ut lectus. Euismod lacinia at quis risus sed vulputate odio ut enim. Malesuada fames ac turpis egestas integer</div>

Result :

---

• Aligment Left.

<div class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin. Bibendum at varius vel pharetra vel turpis nunc. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Vitae auctor eu augue ut lectus. Euismod lacinia at quis risus sed vulputate odio ut enim. Malesuada fames ac turpis egestas integer</div>

Result

---

• 2 colum paragraph

Code :

<div class=pull-left>
Your Paragraph 1
</div>

<div class=pull-right>
Your Paragraph 2
</div>

Result :

---

• align image in Paragraph

Image Center Paragraph

<div class="pull-center">Image Link<center>image caption</center></div> Paragraph

Result :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin.

Image Right Paragraph

<div class="pull-right">Image Link<center>image caption</center></div> Paragraph

Result :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin.

---

Image left Paragraph

<div class="pull-left">Image Link<center>image caption</center></div> Paragraph

Result :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin.

---

![gambar.png]() - ### Adding Code in a post.

To enter the code in the post, you only need to add the <code> markup before the desired text and close with </code>. But this "only applies to plain text writing." To create a script / code like the example above, you can use the symbol (`) in each markup. Whether it's the opening tag or the closing tag.

Example :
<code>Good Morning!</code>

Result :
Good Morning!

• Create a dividing line.

-Code:
<hr>
---

The result:

---

• Writing Quotes - Blockquotes

There are two ways that we can quote, the first way is with <blockquote> markup and closed with </blockquote>. or you can just type the > sign before the sentence.

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin.

This is my #Achievement4 Task about Applying Markdown in Steemit Posts. Actually there is still a lot of code that can be used for steemit posts, you can read it here

thank you, hopefully my assignment # achievement4 can pass the verification.

Respect To :
@cryptokannon
@anroja
@heriadi
@cmp2020