Headlines

Sr. No	Markdown/code	Result
1	# Newcommer Community	Newcommer Community
2	## Newcommer Community	Newcommer Community
3	### Newcommer Community	Newcommer Community
4	#### Newcommer Community	Newcommer Community
5	##### Newcommer Community	Newcommer Community
6	###### Newcommer Community	Newcommer Community

<h1></h1> HTML tag is also used instead of #.

<h2></h2> HTML tag is also used instead of ##.

<h3></h3> HTML tag is also used instead of ###.

<h4></h4> HTML tag is also used instead of ####.

<h5></h5> HTML tag is also used instead of #####.

<h6></h6> HTML tag is also used instead of #####.

When we use code the output will be

With out code the output like:

Headlines and sub-headlines are significant components as they show the design of your post and guide the eye of the peruser. Headings are used in search engines to index the structure. Clients skim your pages by their headings. Use headings to show the record structure.

---

Align text into two cells

<div class = "pull-left">Text will be written here...... This code is used to write the text in two different column.</div>


Pull-left used to pull the text into left column and pull-right used to pull the text into right side. We use either pull-left or pull-right at a time.

By using above code the output will be

---

Different HTML Tags

1. <center>Center tag used to align the text into center.</center>

2. *Italic* and <i>Italic</i> both used to Italic the text.

3. H<sub>2</sub>SO<sub>4</sub> sub tag is used to write the formula for H₂SO₄

4. a<sup>2</sup>+ b<sup>2</sup> = c<sup>2</sup> sup tag is used to write the formula for Pythagoras' theorem.
   a²+ b² = c²

Links

1. @ is used to tag someone on the steemit network. @cryptokraze.

2. When we use a link in steemit.It is automatically clickable.
https://steemit.com/hive-172186/@adnaniqbal1/achievement-3-by-adnaniqbal1-or-or-task-content-etiquette

3. Sometime we don't want to show the link, we hyperlink it in any word or phase. We can done it two ways

First Way

<b>[My achievement 3](https://steemit.com/hive-172186/@adnaniqbal1/achievement-3-by-adnaniqbal1-or-or-task-content-etiquette)</b>

Result

My Achievement 3

Second Way

<b><a href="https://steemit.com/hive-172186/@adnaniqbal1/achievement-3-by-adnaniqbal1-or-or-task-content-etiquette"> My Achievement 3</a></b>

Result

My Achievement 3

Table

we can create the table in two ways

First Method

Payment Plans| Basic Shopify | Shopify | Advanced Shopify
--------- | ---------- | ---------- | ----------
Fee per month | 29$ | 79$ | 299$
Status | For Initial Business | For large business | For Huge business

Result

Payment Plans	Basic shopify	Shopify	Advanced Shopify
Fee per month	29$	79$	299$
Status	For Initial Business	For large business	For Huge business

Second Method

<table>
<tr>
<th>Payment Plans</th> <th>Basic shopify</th><th>Shopify</th><th>Advanced Shopify</th>
</tr>
<tr>
<th>Fee per month</th> <th>29$ </th><th>79$ </th><th>299$</th>
</tr>
<tr>
<th>Status</th> <th> For Initial Business</th><th>For large business </th><th>For Huge business</th>
</tr>
</table>

Result

Payment Plans	Basic shopify	Shopify	Advanced Shopify
Fee per month	29$	79$	299$
Status	For Initial Business	For large business	For Huge business

Code

Adding code is sometimes necessary to make code understand by others. It can be done in two ways.

1. <b>Use back-tick symbol (`) before and after the code.</b>
2. <code><b>Use code tag before and after the code.</b></code>

Quotes - Blockquotes

Sometimes we write a quote in steemit Blog. We need to highlight the quote. It was done in two ways.

First Method

>“When a thing has been said and said well, have no scruple. Take it and copy it.”― Anatole France'

Result

“When a thing has been said and said well, have no scruple. Take it and copy it.”― Anatole France

Second Method

<blockquote>“When a thing has been said and said well, have no scruple. Take it and copy it.”― Anatole France</blockquote>

Result

“When a thing has been said and said well, have no scruple. Take it and copy it.”― Anatole France

---

Line break and Ruler

Line break:
To give an extra line space <br> tag is used in both HTML and steemit
Ruler:
If we want to separate a paragraph, we can use it before the beginning of paragraph 3 dashes, 3 stars
--- or ***
<hr> tag is also used for this purpose.

---

Videos

We can use youtube videos in steemtit platform.

<center><iframe width="727" height="409" src="https://www.youtube.com/embed/nqKzSz6-5c8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

The output will be

Source

Align Images

Align left

<div class="pull-left">
https://cdn.steemitimages.com/DQmZKRYjkbeBNNfwrJQZYFoiWwsMCL2nhTYkCd7UPtSZXPB/Achievement%204.png
</div>
When we align the image on the left side. The text is written on the right side. And image dimension reduces to half.

Result

Align Center

<center>
https://cdn.steemitimages.com/DQmZKRYjkbeBNNfwrJQZYFoiWwsMCL2nhTYkCd7UPtSZXPB/Achievement%204.png
</center>

Result

Align Right

<div class="pull-right">
https://cdn.steemitimages.com/DQmZKRYjkbeBNNfwrJQZYFoiWwsMCL2nhTYkCd7UPtSZXPB/Achievement%204.png
<center><sub><a href="https://www.google.com">Source</a></sub></center>
</div>
When we align image on right side. The text written on left side. And image dimension reduce to half.

Result

Change the dimensions

Change the dimensions

We can change the dimensions of the image by adding
https://steemitimages.com/0x0
before the image link. By changing the dimensions 0x0, the image dimensions will change
Dimensions1920x1080

https://cdn.steemitimages.com/DQmZKRYjkbeBNNfwrJQZYFoiWwsMCL2nhTYkCd7UPtSZXPB/Achievement%204.png

Dimensions400x400

https://steemitimages.com/400x400/https://cdn.steemitimages.com/DQmZKRYjkbeBNNfwrJQZYFoiWwsMCL2nhTYkCd7UPtSZXPB/Achievement%204.png

Utilize these markdowns in our post,

Special appreciation to @cryptokraze, @vvarishayy, @haidermehdi