HTML Elements Showcase – Inline vs Block

introduction:
In HTML, elements are broadly divided Into
two categories: block-level and inline.
Block elements take up the full width, while
inline elements only take as much space as needed.

[Block Elements] [Inline elements] [comaprison table]

Block Elements

  Example:<p>this is paragraph</p>
  Explanation:the <p>  tag defines a block of text
  that always starts on a new line

  Example: <h1>This is a heading </h1>
Explanation: Headings are block-level elements 
that take the full width.

Example:  <blackquote>
   "Coding is the new literacy."
   </blockquote>
Explanation: Blockquote is a block container for quotations.

    … (More inline elements shown)

Inline elements

Example: <span>This is inside a span </span>
Explanation: Span is an inline container with no new line.

Example: HTML stands for 
<abbr title="HyperText Markup Language"> HTML </abbr.>
Explanation: Abbr defines an abbreviation.

Example: E = mc<sup>2/sup<>
Explanation: Superscript is inline and sits above text.

Example: console.log("Hello World")</code>
Explanation: Code tag represents programming text.

… (More inline elements shown)

 

Comparison Table   
   Differences Between Inline and Block Elements

        
   
            Block Elements
             Inline Elements
        
      
    
     
       <div>    
      <span>    
    

     
       <p> 
       <a> 
    

    
       <h1> 
       <b> 
    

    
       <ul> 
       <i> 
    

    
       <blockquot> 
       <abbr> 
    


    
       <table> 
       <code> 
    

    
       <hr> 
       <sup> 
    

    
       <section> 
       <mark> 
    

 

[Back to top]

Block Elements	Inline Elements
`<div>`	`<span>`
`<p>`	`<a>`
`<h1>`	`<b>`
`<ul>`	`<i>`
`<blockquot>`	`<abbr>`
`<table>`	`<code>`
`<hr>`	`<sup>`
`<section>`	`<mark>`