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


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


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