Both the tags (<div> and <span>) are used to represent the part of the webpage, <div> tag is used a as block part of the webpage and <span> tag is used as a inline part of the webpage like below:
<div>A Computer Science Portal for Geeks <span>GeeksforGeeks</span></div>
HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). 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. In this example, the div tag contains the entire width. It will be displayed div tag each time on a new line, not on the same line.
html
<!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>
|
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.
html
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<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>
|
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. |
|---|
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.