Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

The <div> tag and <span> tag are used to represent the part of the webpage, the <div> tag is used a as block part of the webpage, and the <span> tag is used as an inline part of the webpage like below: 

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

Table of Content

HTML div tag

The div tag is known as the 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.

Example: 

html




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


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:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>span tag</title>
</head>
 
<body>
    <h2>Welcome To GFG</h2>
 
    <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>


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 highlighting that section. This tag should be used to wrap any specific word that you want to highlight in your webpage.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads