Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between HTML tags and ?
We can use both DIV and SPAN tags as containers in HTML, as they both serve different purposes. Both are essential HTML elements for structuring and styling web content. Let's explore each tag in detail.
DIV Tag
The <div> tag is a block-level element that helps in separating and organizing content like text, images, navigation bars, and other sections. It creates a rectangular block that spans the full width of its container and always starts on a new line.
DIV tags can be styled with CSS or manipulated with JavaScript. They are easily targeted using class or id attributes. Any type of content can be placed inside a <div> tag.
Example
Following example demonstrates the use of DIV tag for creating a website header:
<!DOCTYPE html>
<html>
<head>
<style>
.logo {
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
.header {
padding: 0 70px;
display: flex;
align-items: center;
margin-bottom: 20px;
color: crimson;
justify-content: space-between;
margin-top: 20px;
background-color: #f5f5f5;
}
.list {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
list-style-type: none;
}
.list li a {
text-decoration: none;
font-size: 1.4rem;
color: blue;
}
</style>
</head>
<body>
<div class="header">
<h2 class="logo">TutorialsPoint</h2>
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
SPAN Tag
The <span> tag is an inline element used to style or manipulate smaller parts of content with CSS or JavaScript. Unlike DIV, SPAN does not break the flow of text and only takes up as much width as necessary. Multiple span tags can be inserted within block elements.
Example
Following example demonstrates the use of SPAN tag for styling individual words:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
max-width: 900px;
margin: 0 auto;
height: 100vh;
}
p {
font-size: 2.5rem;
text-align: center;
}
.green {
color: green;
font-weight: bold;
}
.blue {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Welcome to <span class="green">GREEN world</span> which gives fresh air.
Welcome to <span class="blue">BLUE world</span> which gives fresh water.
</p>
</body>
</html>
Difference between DIV and SPAN Tags
The following table highlights the key differences between DIV and SPAN tags:
| SPAN Tag | DIV Tag |
|---|---|
| Inline-level element | Block-level element |
| Used for styling smaller parts of content | Used for grouping large sections of content |
| Does not break text flow | Creates line breaks before and after |
| Takes only necessary width | Takes full width of container |
| Cannot contain block-level elements | Can contain any type of elements |
Practical Example: Block vs Inline Behavior
This example demonstrates the visual difference between block-level DIV and inline SPAN elements:
<!DOCTYPE html>
<html>
<head>
<style>
.div-example {
background-color: lightblue;
margin: 10px 0;
padding: 10px;
border: 2px solid blue;
}
.span-example {
background-color: lightgreen;
padding: 5px;
border: 2px solid green;
}
</style>
</head>
<body>
<h3>DIV (Block-level):</h3>
<div class="div-example">This is a DIV element</div>
<div class="div-example">This is another DIV element</div>
<h3>SPAN (Inline):</h3>
<p>This is <span class="span-example">inline SPAN</span> and <span class="span-example">another SPAN</span> in the same line.</p>
</body>
</html>
Conclusion
Use <div> for creating layout sections and grouping large content blocks, while <span> is perfect for styling individual words or phrases within text. Understanding their block vs inline behavior is crucial for proper HTML structure.
3K+ Views
