HTML | Block and Inline Elements

Difficulty Level : Easy
Last Updated : 28 Jan, 2019

Every element in HTML has a default display value which depends upon the element type. Block or inline are the default display value for the most of the elements.

Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.

div element: The div element is used as a container for other HTML elements. It has no required attributes. Style, class and id are the commonly used attributes.

Syntax:

<div>GFG</div>

Example-1:

<!DOCTYPE html> 
<html> 
  
<body> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
    
    <!-- Div element. -->
    <div style="background-color:black; 
                color:white; 
                padding:20px;"> 
        
        <h1>GeeksforGeeks</h1> 
        
        <h3>GeeksforGeeks is a science  
          portal for geeks.</h3> 
  
        <h3>You can give reviews as well as  
          contribute posts on this portal.</h3> 
  
  </div> 
  
</body> 
  
</html> 

Output:

Inline Elements: An inline element is the opposite of the block-level element. It does not start on a new line and takes up only necessary width.

span element: The span element is used as a container for text. It has no required attributes. Style, class and id are the commonly used attributes.

Syntax:

<span>GFG</span>

Example-2:

<!DOCTYPE html> 
<html> 
<style> 
    body { 
        text-align: center; 
    } 
      
    h1 { 
        color: green; 
    } 
</style> 
  
<body> 
  
    <!-- Sapn element. -->
    <h1>Geeks<span style="color:red"> 
      for</span>Geeks</h1> 
  
</body> 
  
</html> 

Output 2:

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge
Safari
Opera

My Personal Notes

Related Articles