HTML vs Markdown

Before We proceed to the code I just want to explain a little bit about the HTML and Markdown in Steemit. Because I know some of you confuse about the difference between the two.

So, HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page.

All HTML is valid Markdown. If you’re stuck, not able to format your content as you would like (for example using tables), you can always use plain HTML instead of Markdown.

While Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Markdown is not a replacement for HTML, or even close to it…The idea for Markdown is to make it easy to read, write, and edit prose. - John Gruber

HTML tags add lots of in-line noise. They make a document hard to read. For people unfamiliar with HTML, it could be impossible. Reading a Markdown document should make plain sense to anyone.

Here’s an example of the difference:

1. Headers :

• Markdown

   Code :
        # h1

        ## h2

        ### h3

   Output :

      h1

       h2

        h3

• HTML

   Code :
        <h1> h1 </h1>

        <h2> h2 </h2>

        <h3> h3 </h3>

   Output :
  

      h1

  
  

       h2

  
  

        h3

2. Italics :

• Markdown

   Code :

                *italic*

   Output :

        italic

• HTML

   Code :
        <i> italic </i>

   Output :
        italic

3. Bold :

• Markdown

   Code :

                __bold__

   Output :

         bold

• HTML

   Code :
        <b> bold </b>

   Output :
        bold

3. Lists :

• Markdown

   Code :
        * unordered
      * unordered

        1. ordered
      2. ordered

   Output :

  • unordered
  • unordered
    
  1. ordered
  2. ordered

• HTML

   Code :
        <ul>      
       <li class="new">unordered</li>
       <li class="new">unordered</li>
      </ul>

        <ol>      
       <li class="new">ordered</li>
       <li class="new">ordered</li>
      </ol>

   Output :

  • unordered
  • unordered
  1. ordered
  2. ordered

4. Images :

• Markdown

   Code :

  
      Direct Image link :
  https://cdn.steemitimages.com/DQmeaC9H7qcgKC7CVfRPG26VBe5Baoasth8DHWbHwByEFmU/33744616_2076889862594494_5752343445783969792_n.jpg
     

   Output :
  

  

• HTML

   Code :
  

   Output :
  

  

4. Links :

• Markdown

   Code :

  
      [Image Source](https://cdn.steemitimages.com/DQmeaC9H7qcgKC7CVfRPG26VBe5Baoasth8DHWbHwByEFmU/33744616_2076889862594494_5752343445783969792_n.jpg)
     

   Output :
        Image Source

• HTML

   Code :
  

  

   Output :
        Image Source

😃Thank you for reading!😃

Please... follow me and resteem this post to help more newbies here in Steemit

If you have comments, opinions, reactions or corrections, please drop it off. I will surely appreciate it.