Hello guys this is a kinda guide that will show you how to use these both programations languages, they would totally help you to improve the quality of your content if you use them properly. Also, I'll be giving you some tips that could attract whales to your content.

<center>https://steemitimages.com/DQmWERuTr3BXQZs7VZdP64MHaRNdgTJ9SpoE1jssb5Trvvq/U5ds9sVsZmJjDfnTktNxU6JMjNBJBE2_1680x8400.png<sub>[Source](https://steemit.com/spanish/@axorve/guia-rapida-como-etiquetar-tus-articulos-de-steemit)</sub></center>


<h2>Let's begin</h2>

First, what's HTML and Markdown?

<b>HTML</b>

> HTML is a programming language used for web developers. This is the acronym for HyperText Markup Language, i.e. Hypertext Markup Language.

<b>Markdown</b>

> Markdown is a markup language that makes it easy to format text using a series of characters in a special way. In the beginning, it was thought to elaborate texts whose destination was going to be the web with more speed and simplicity than if we were using HTML directly. And while that's usually the best use we can make of it, we can also use it for any type of text, regardless of where it's going to go.

Now that you are familiar with the terms let's see some of their functions, are you ready? Stay tuned till the end.

<h1>Titles or headers</h1>

* HTML:

Place a HTML code using, < h1> Text < /h1> to make your text larger, you will only have six codes posibilities those are:

        <h1>Title</h1>
        <h2>Title</h2>
        <h3>Title</h6>
        <h4>Title</h6>
        <h6>Title</h6>
        <h6>Title</h6>

You will get something like this:

<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h6>
<h4>Title</h6>
<h6>Title</h6>
<h6>Title</h6>

* Markdown:

To make a text larger, place the # sign followed by a space before the text.
For example:

<code> # Tittle </code>

The more you place the # sign, the smaller the text will be. It is only possible to place up to 6 characters.

Placing this codes:
<code> # Title </code>
<code> ## Title </code> 
<code> ### Title </code>
<code> #### Title </code>
<code> ##### Title </code>

You will get something like this

# Title
## Title 
### Title
#### Title
##### Title

<hr>

<h1>Quotes</h1>

To create the citation format in the text simply place the ">" sign followed by a space and then the text.

For example:

> This is a quote.

If you want to combine one appointment with another, you should set it up as follows:

<code> > This is  a quote.</code>
<code> > >This quote belongs to the first</code>

> This is a quote.

> >This quote belongs to the first

Another way to quote is using this code

     <div class="pull-right">
     <table style="width:100%">
     <tr>
      <th bgcolor="#FF0000"><center><h6>PUT YOUR QUOTE HERE</h6></center>
    <center><h6>AUTHOR</h6></center></th>
    </tr>
    </table>
    <br/>
    
<br>It looks like this

<div class="pull-left">
<table style="width:100%">
<tr>
  <th bgcolor="#FF0000"><center><h6>QUOTE</h6></center>
<center><h6>AUTHOR</h6></center></th>
</tr>
</table>
<br/>
</div>

<hr>

<h1>Lists</h1>

Lists are used to sort or list the content. Just type - or 1. followed by a space and then the text.
Let's see an example

<code>- Text</code> 

- Text

<code> 1 Text</code>

1. Text

<hr>

<h1>Code blocks</h1>

The code blocks allow you to format the language so that it has no effect. 

* HTML

      <code>Text</code>
    
* Markdown

      `` Text ``

Type `` between the two.

<hr>

<h1>Emphasis</h1>

Emphasis is used to highlight our text. There are several types:

* HTML

      <em>HTML italic text</em>
      <strong>Bold text html</strong>
      <em><strong>Bold text italic html</strong></em>
<em>Italic html text</em>
<strong>Bold text html</strong>
<strong><em>Bold italic html text</em></strong>

<div class="phishy">Text red html</div>

    <div class="phishy">Red text html</div>

<strike>HTML strikethrough text</strike>

    <strike>Strikethrough text html</strike>
    
<sub>Reduce text upwards <sub>

     <sup>Reduce text upwards</sub>


<hr>

<h1>Tables</h1>

        |Text|Text|
        |---|---|
        |Text|Text|
<br>        
|Black|Libertario|
|---|---|
|1|2|

You can even add more bars to add more columns

<hr>

<h1>Paragraphs</h1>

To jump to another line just type Enter but when we use HTML codes we must insert a line break with 

    <br> or <p>

and then enter. If not, our text will be stuck to the next paragraph.

To insert a text separator line just type 

        "---" or just <hr>

and enter.

<hr>

To center the text type 

<center> Centered text</center>

    <center>Text centered</center>


<div class='pull-left'>Text on the left</div>

<div class='pull-right'>Text on the right</div>

<br><br>To place our text on the left, type the following.

    <div class='pull-left'>Text</div> and if right <div class='pull-right'>Text</div>

To place our justified text we type the following.
       
    <div class='text-justify'>Text justified</div>

<div class='text-justify'>
Wikipedia is a free encyclopedia, written collaboratively by the people who use it. It is a special type of website designed to make collaboration easy, called a wiki. Many people are constantly improving Wikipedia, making thousands of changes per hour. All of these changes are recorded in article histories and recent changes. For a more detailed account of the project, see About Wikipedia.[](https://en.wikipedia.org/wiki/Wikipedia:Introduction)
</div>
<hr>

<h1>Image</h1>

To place our image on the left, type the following.

    <div class='pull-left'>Image link</div>
and if it is to the right 

    <div class='pull-right'>Image link</div>

<br><div class='pull-left'>https://steemitimages.com/DQme6oq6beqKn12q4W9Ck7HJEeTwRUyuFSmtZ48Um9URV3w/html.png<center><sub>[Source](https://iconos8.es/icon/1042/html)</sub></center>

</div>

<br><br><div class='pull-right'>https://steemitimages.com/DQmT1SLSuVJz4HNDkJaXr9qciZNhW1jAhkWNhwfXPpHTMJ3/markdown-como-objeto-inteligente-1.png<center><sub>[Source](http://www.analiticaweb.es/agilidad-facilidad-markdown/)</sub></center>

</div>

<hr>
<h1>Sources</h1>

This might be one of the most important parts of steemit tbh, using sources of your images will give you the credibility you shall use it next to your link image.

You can either use

    <a href="Link"></a> or [](Link)
    
<HR>
  
 <h1>Witdh</h1>
 
  the width can be adjusted by varying the percentage of this code
 
     <table style="width:100%">
    
<hr>

Now you have learned everything you are supposed to learn about Markdown and HTML. 

To give you some more tips about the way you should write your posts to get votes from projects like @curie or @ocd.

1. You should always put references of your images.
2. Do not abuse Markdown or HTML.
3. Use sources of your research.
4. Make reference to the fact that the texts are your original texts.
5. Avoid harassing people so that they vote you.
6. Write a brief description of who you are at the end.
7. Use your own style, create your own banner and marks.
<hr>

<center><sub>**Thank you everyone for staying tunned. I hope this guide is helpful for everyone**.</sub></center>

<center>https://steemitimages.com/DQmaBU48CFJsUicUNUd9Fm9aVVP5zZfSesAxUYQUhgEh4Lg/DQmQwAs6qrv8fRmhd4GpfAJMaSj5hPtAK2BogeP2rMrRW5b_1680x8400.png</center>

<center><a href="https://discord.gg/S8NNCu"><img src="https://steemitimages.com/0x0/https://i.imgur.com/UgRQJHJ.png"/><img src="https://steemitimages.com/DQmTDLNSwrxM4R85rA2qsR18pugncTy5FDhVf5gJBoW5vLm/signature.gif"/></a></center><center><sub>**Get on board and become a member of the incredible team of - @promo-mentors**</sub></center>



<center><a href="https://discord.gg/FAAKJQ"><img src="https://media.discordapp.net/attachments/442373125762711552/443583821779173376/INFORMATIONWAR_LOGO_final.png"/><img src="https://media.discordapp.net/attachments/442373125762711552/443584009105178624/IW_Banner.png"/></a></center><center><sub>**If you are committed to the truth and want to get away from the conventional media I invite you to come over and be part of - @informationwar**</sub></center>

<center><a href="discord.gg/b7R3c9d"><img src="https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5dsHHDnsYzMp9RhCCFrvEjnNWeu1Xg_1680x8400"/><img src="https://steemitimages.com/DQmZYjggQ4WHiuHZkkDz7rJkRWz4jv98od39QJodhT8yJKc/UNETE.png"/></a></center><center><sub>**Check out my new spanish project named "La República" and enjoy debating - @larepublica** </sub></center>

<hr>

<div class='pull-left'>https://steemitimages.com/DQmTVHPyhPMYxakuWXkrewebQUE781TKSjG3SV2hGWqVLME/Sin-fondo.png</div>

<div class='pull-left'> 
<div class="text-justify">Young student of modern languages at the Central University of Venezuela (UCV). I believe truth is the only path to success for our society. I have a long-term relationship with Philosophy, politics, and economy.</div>

<hr>

<center><sub><h1>Thanks for reading!</h1></sub></center>


</div>