Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between HTML tags <div> and <span>?
We can use both DIV and SPAN tags as a Container, as they both have their own specialty. Both are HTML5 tags. First let us discuss about DIV Tag in detail with examples.
DIV TAG
DIV helps in separating the data like text, images, navigation bar etc., we can also create particular sections by using the DIV tag, it consists of open and close tags <DIV> </DIV>, both open and close tags are compulsory if we want to divide the page.
DIV tags can be styled with CSS or manipulated with JavaScript, it is easily styled by using the class or id attribute. Any sort of data can be placed inside the <div> tag.
Example
Following example demonstrates the use of DIV tag -
<!DOCTYPE html>
<html>
<head>
<style>
.logo {
margin: 10;
padding: 10;
box-sizing: border-box;
}
.header {
padding: 0 70px;
display: flex;
align-content: center;
margin-bottom: 20px;
color: crimson;
justify-content: space-between;
margin-top: 20px;
}
.list {
display: flex;
align-content: 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
It is an inline element used to make smaller part of content with the help of CSS or JavaScript. Within block elements, we can insert multiple span tags.
It is an inline element used to make smaller part of content with the help of CSS or JavaScript. Within block elements, we can insert multiple span tags.
Example
Following is the example demonstrate the use of SPAN tag −
<!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;
}
.font-style {
font-style: italic;
}
.green {
color: green;
}
.blue {
color: blue;
}
.orange {
color: orange;
}
</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 tag and SPAN tag in HTML
The following table differentiates between the DIV tag and SPAN tag in HTML −
SPAN TAG |
DIV TAG |
|---|---|
SPAN tag is called as Inline-level element |
DIV tag is called as Block-level element |
SPAN tag used for group the smaller part of content together. |
DIV tag used for grouping large content together |
SPAN tags are not necessary to nested |
DIV tags are generally nested |
Example
Consider the following example that demonstrates the difference between span and div tag by taking inline and block display −
<!DOCTYPE html>
<html>
<head>
<title>DIV and SPAN</title>
<style>
div {
width: 400px;
border: 0.5px;
}
div.boxmodel {
width: 400px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
table,
th,
td {
border: 1px solid black;
}
img {
width: 400;
height: 280;
}
</style>
</head>
<body>
<div>
<h3 align="center">Course Information </h6>
<table align="center">
<tr>
<th>Courses</th>
<th>Room Numbers</th>
<th>Tutors</th>
</tr>
<tr>
<td rowspan="2">HTML</td>
<td>Room 1</td>
<td>MR.Ram</td>
</tr>
<tr>
<td>Room 2</td>
<td>MRS. Priya</td>
</tr>
<tr>
<td rowspan="2">JAVA</td>
<td>Room 3</td>
<td>Ms Manju</td>
</tr>
<tr>
<td>Room 4</td>
<td>MR.Hari</td>
</tr>
<tr>
<td colspan="3">These Course Belong to Software Training</td>
</tr>
</table>
</div>
<br>
<br>
<div class="boxmodel">
<table align="center">
<tr>
<th>Courses</th>
<th>Room Numbers</th>
<th>Tutors</th>
</tr>
<tr>
<td rowspan="2">HTML</td>
<td>Room 1</td>
<td>Mr. Ram</td>
</tr>
<tr>
<td>Room 2</td>
<td>MRS.Priya</td>
</tr>
<tr>
<td rowspan="2">JAVA</td>
<td>Room 3</td>
<td>Ms Manju</td>
</tr>
<tr>
<td>Room 4</td>
<td>Mr.Hari</td>
</tr>
<tr>
<td colspan="3">These Course Belong to Software Training</td>
</tr>
</table>
</div>
</body>
</html>
2K+ Views
