Difference between <div> and <span> Tag in HTML
In HTML, the <div> and <span> tags are used for structuring and styling content. <div> creates block-level containers for grouping elements, while <span> creates inline containers for styling specific portions of text or elements within a block-level container.
Syntax:
<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 HTML <div> tag is a block-level element used for grouping and structuring content. It provides a container to organize and style sections of a webpage, facilitating layout design and CSS styling.
Note: Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag.
Example: In this example we uses <div> tags styled with CSS to create colored, block-level containers. Each div displays text “div tag” with white text on a green background, differentiated by margins and font size.
<!DOCTYPE html>
<html>
<head>
<title>Div tag</title>
<style>
div {
color: white;
margin: 2px;
font-size: 25px;
}
.div1 {
background-color: rgb(142, 142, 245);
}
.div2 {
background-color: #9af19a;
}
.div3 {
background-color: rgb(232, 232, 137)
}
.div0 {
background-color: #009900;
}
</style>
</head>
<body>
<div class="div1"> div tag </div>
<div class="div2"> div tag </div>
<div class="div3"> div tag </div>
<div class="div0"> div tag </div>
</body>
</html>
Output:
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.
Example: In this example the <span> tag’s use for inline styling. It highlights “GeeksforGeeks” with a light green background, and “Publish” with blue color, emphasizing text within a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<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:
Output
Differences between <div> and <span> Tags
| <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. |
