HTML | Block and Inline Elements

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output 2:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Recommended Posts:



    Article Tags :
    Practice Tags :


    1


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.