In this article i want to teach you and show you how to use html tags in order to style your article and so on. i will show you the ones that is not mentioned in official tutorial and also how to use the alternate html tags for the ones is shown in official tutorial. and of course not every Html tag works so i made  complex work to find out which one is appropriate. so  lets get started.
1). < center > Text  < /center> without spaces. < center> is Html tag which brings text into center.
<center><b>Text</b></center>
2).<b>bold </b>   <strong> strong</strong>
< b> < /b>
< strong> < /strong>
they might appear the same but Programmatically they use different ways of doing it. might be meaningless for this purpose use any one of these.
3).try and use more then one spaces or tab into your text. can't you? i am here to show you how to overcome this problem. and here comes magical html tag into play.
< pre> < /pre> is the tag which gives every letter  its fixed position. lets check this out
<pre>
Text in a pre element
is displayed in a                     fixed-width
font, and it preserves
both      spaces and
line                          breaks
</pre>

4).Emphasize your text with using < em> < /em> tag

<em>Emphasized text</em> ; Not-Emphasized text
5).do you want to separate your paragraphs more obviously? use horizontal lines. for that < hr> will help.
   1 opinion
<hr>
2 opinion
<hr>
3 opinion
<hr>
gives your article more readability


6). if you want to mention disabled or incorrect sentence use < strike> < del> tags. same story as "bold" and "strong"
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
7).
are you tired of ugly quotation marks? like "" ↫ these? <q> </q> check out how beautiful they are. for this use < q> html tag.

<q>Build a future where people live in harmony with nature.</q> 
We hope they succeed.</p>
8). use superscript and subscript by using html < sub> < sup> tags. look how cool they are.
 Hydrogen<sup >1</sup><sub>1</sub>
9).use < img> tag for nice image inputs. 
< img  src="https://steemitimages.com/0x0/https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb5UjspY1GV7_EmwVIyo18OpDifjcKlGCZin0vkoipqB3n3UQtYL8t4XvY" >
<img  src="https://steemitimages.com/0x0/https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb5UjspY1GV7_EmwVIyo18OpDifjcKlGCZin0vkoipqB3n3UQtYL8t4XvY" >
and with the combination of < pre> you can have this picture anywhere you like.
<pre>                      <img  src="https://steemitimages.com/0x0/https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb5UjspY1GV7_EmwVIyo18OpDifjcKlGCZin0vkoipqB3n3UQtYL8t4XvY" > </pre> 
< pre>        {spaces there as much as you want to generate fixed position}              < img  src="https://steemitimages.com/0x0/https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb5UjspY1GV7_EmwVIyo18OpDifjcKlGCZin0vkoipqB3n3UQtYL8t4XvY" > < /pre>

cool isn't it? 

10). now we are going in hard styling. <q>tables</q>
<table> 
<th> Earnings</th>

<tr>
<td>Author rewards</td>
<td>3$</td>
</tr>
<tr>
<td>Curation rewards</td>
<td>0.36$</td>
</tr>
<tr>
<td>Comment rewards</td>
<td>11.10$</td>
</tr>
</table>
for this we are gonna be using Html < table> tag With its association tags like < th> which make header like cells. < td> makes ordinary cells which contains information. < tr> which defines table row. and in which will be placed < td> tags. 


<code>
< table> 
< th> Earnings< /th>

< tr>
< td>Author rewards< /td>
< td>3$< /td>
< /tr>
< tr>
< td>Curation rewards< /td>
< td>0.36$< /td>
< /tr>
< tr>
< td>Comment rewards< /td>
< td>11.10$< /td>
< /tr>
< /table>

</code>
11). ordered and unordered lists. 

<ol >
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ul >
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

< ol >
  < li>Coffee< /li>
  < li>Tea< /li>
  < li>Milk< /li>
</ol>
<pre>
< ul>
  < li>Coffee< /li>
  < li>Tea< /li>
  < li>Milk< /li>
< /ul>
ol = ordered list
ul = unordered list
li = list item

</pre>











<h1> <em>in order  this code to work you have to delete spaces after  < mark both at start and end.</em></h1>



![New-Microsoft-PowerPoint-Presentation-_6_.gif](https://steemitimages.com/DQmekyc4d4GSc24wvgqHDPaPdKRyX24GKMB7txogCCMC7Mk/New-Microsoft-PowerPoint-Presentation-_6_.gif)