MarkDown and HTML Comparison MarkDown and HTML Comparison

Ashish Lahoti
Markdown

Markdown is gaining more popularity compare to HTML to style and format your content in text editors, blogs, and social media. Why so?

Markdown is easier to write than HTML, and it’s easier for most humans to read and write Markdown than HTML. Writing HTML by hand is more painstaking and laborious due to its semantic tags for each element.

Here is a comparison to show how you can write Markdown vs HTML to style and format your content:-

Markdown vs HTML

Element Markdown HTML Output
Headings 
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
          
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 2

Heading 2

Heading 2
Heading 2
Paragraphs 
This is a paragraph
          
<p>This is a paragraph</p>

This is a paragraph
Ordered List 
            
1. First Item
2. Second Item
3. Third Item
          
<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3
Unordered List 
            
- First Item
- Second Item
- Third Item
          
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3
Definition List 
            
First Term
: Definition of first term.


Second Term
: Definition of second term.
: Another definition.
          
<dl>
  <dt>First Term</dt>
  <dd>Definition of 
  first term.</dd>
  <dt>Second Term</dt>
  <dd>Definition of 
  second term.</dd>
  <dd>Another definition.</dd>
</dl>
First Term
Definition of first term.
Second Term
Definition of second term.
Another definition.
Blockquotes > This is a quote <blockquote>This is a quote</blockquote>
This is a quote
Code Blocks › › › › function test() {
› › › › › › console.log("markdown");
› › › › }
 <pre><code>
  function test() {
    console.log("markdown");
  }
</code></pre> 

function test() {
  console.log("markdown");
}
Horizontal Rule --- <hr/>
Table 
        
 Header 1 | Header 2 
----------|----------
 Cell 11  | Cell 12  
 Cell 21  | Cell 22  
          
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
    <tr>
      <td>Cell 21</td>
      <td>Cell 22</td>
    </tr>
  </tbody>
</table>
Header 1 Header 2
Cell 11 Cell 12
Cell 21 Cell 22
Bold I am **bold** I am <b>bold</b> I am bold
Italic I am *italic* I am <i>italic</i> I am italic
Strikethrough I am ~~strike~~ I am <del>strike</del> I am strike
Link [example link](http://example.com/) 
<a href="http://example.com/">
example link
</a>
 example link
Image ![Blog](/img/logo.png) <img src="/img/logo.png" alt="Blog"> Blog Logo
Code execute command `nano` execute command <code>nano</code> execute command nano