In this tutorial we will show you the solution of div and span tag in HTML, in HTML today we will discuss about what is the difference between div and span tag. Mostly we all have used both of tags in html many times.
But many from us don’t know that what the difference between them is. So, today our topic is about to tell you what is the difference between div and span tag.
Step By Step Guide On Div And Span Tag In HTML :-
Now, we all know that div is known as division. It help us to make section in html page and also day you can divide the webpage with the help of division in number of section you want.
The div tag occupies the full width but height is according to CSS or text added in this.
Whereas the span tag is used where you want to add some special effects in a line full of text.
It is same as division but with one difference that it can be used as inline tag.
For example, if you want to apply strikethrough and other unwanted things in html within a line or paragraph then you can you span tag.
Span tag does not have specified/ default and pre-defined width as div tag. Whereas div tag occupies the full line of webpage.
<!DOCTYPE html>
<html>
<head>
<title>Div tag</title>
<style>
div {
color: white;
background-color: black;
margin:10px;
font-size: 30px;
}
</style>
</head>
<body>
<div> this is div tag </div>
<div> this is div tag </div>
<div> this is div tag </div>
<div> this is div tag </div>
</body>
</html>
Here is the example of span tag in html:
<!DOCTYPE html> <html> <head> <title>span tag</title> </head> <body> <p><span style="background-color:red">the text using span tag and red in color</span> this line is of paragraph and black in color <span style="color:blue;">this is again blue and with span </span> this is in paragraph <span style="background-color:yellow;">this is again span using with yellow color </span> we hope that you understand this properly</p> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, the content to be showed on browser’s display is written here. Here, we show you two example mostly both are same. But in body we use div tag in first example and paragraph with span in next example. Here you see that by default the division tag occupies the full width whereas the span tag occupies the width which it needs actually.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we hope that you understand the example properly. In this article we show the use of division tag and span tag.
There is nothing any major difference in both of them. I hope this tutorial on div and span tag in HTML helps you.
About Pragati
