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 Beginner
<span>w3wiki</span>
</div>
Table of Content
- HTML div tag
- HTML span tag
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.
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: 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;
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 Div Tag Example 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: In this example we demonstrates the <span> tag’s use for inline styling. It highlights “w3wiki” 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>
<h2>Welcome To GFG</h2>
<p>
<span style="background-color:lightgreen">
w3wiki
</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:
HTML span Tag
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. |
Contact Us