Difference between <div> and <span> Tag in HTML

Both the tags (<div> and <span>) are used to represent the part of the webpgage, <div> tag is used a as block part of the webpage and <span> tag is used as a inline part of the webpage like below:

 <div>A Computer Science Portal for Geeks <span>GeeksforGeeks<span></div>

HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a block-level tag. In this example, the div tag contains the entire width. It will be displayed div tag each time on a new line, not on the same line.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Div tag</title>
          
        <style>
            div {
                color: white;
                background-color: #009900;
                margin: 2px;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <div> div tag </div>
        <div> div tag </div>
        <div> div tag </div>
        <div> div tag </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

HTML <span> tag: The HTML span element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes). A better way to use it when no other semantic element is available. The span tag is very similar to the div tag, but div is a block-level tag and span is an inline tag.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>span tag</title>
    </head>
      
    <body>
        <h2>Welcome To GFG</h2>
      
        <!-- Inside paragraph applying span tag 
        with different style -->
        <p><span style="background-color:lightgreen"
            GeeksforGeeks</span> is A Computer Science Portal 
            where you can<span style="color:blue;"
            Publish</span> your own <span 
            style="background-color:lightblue;">articles</span>
             and share your knowledge with the world!!
        </p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Differences between <div> and <span> tag:

<div> <span>
The <div> tag is a block level element. The <span> tag is an inline element.
It is best to attach it to a section of a web page. It is best to attach a CSS to a small section of a line in a web page.
It accepts align attribute. It does not accept align attribute.
This tag should be used to wrap a section, for highligting that section. This tag should be used to wrap any specific word that you want to highlight in your webpage.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.