Lets see why the Div tag is considered one of the most important tag while designing the web page layout.
DIV Tag: DIV tag is known as division tag. Div tag does sectional division in the HTML document, by enclosing with large section of HTML elements together in a group. So Div tag is also known as block-level element. Thus we can apply CSS to the whole section of elements by using Div tag. And updation or changes to the CSS script also becomes easy. Use of Div Tag makes the web page to look more presentive and with systematic block contents to avoid misinformation about the webpage or website. <div> is open tag and </div> is closing tag. It also supports Global and Events attributes.
Example:
SPAN Tag: SPAN tag makes style changes to small section of the tag's inline content whether it be a text or image content. So Span tag is also known as inline element. <span> is open tag and </span> is closing tag. It supports Global and Events attributes.
Sample Code:
DIV Tag: DIV tag is known as division tag. Div tag does sectional division in the HTML document, by enclosing with large section of HTML elements together in a group. So Div tag is also known as block-level element. Thus we can apply CSS to the whole section of elements by using Div tag. And updation or changes to the CSS script also becomes easy. Use of Div Tag makes the web page to look more presentive and with systematic block contents to avoid misinformation about the webpage or website. <div> is open tag and </div> is closing tag. It also supports Global and Events attributes.
Example:
 |
| DIV tag representation |
SPAN Tag: SPAN tag makes style changes to small section of the tag's inline content whether it be a text or image content. So Span tag is also known as inline element. <span> is open tag and </span> is closing tag. It supports Global and Events attributes.
Sample Code:
<!DOCTYPE html>OUTPUT:
<html>
<head>
<h1>Importance of DIV & Span Tags</h1>
</head>
<body>
<div id= header style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">
Welcome to <a href="https://aryanschooltech.blogspot.com/">AryanSchoolTech !</a><br>
<b>About Div Tag & Span Tag</b>
<div id= nav style="background-color:lime;border:1px solid pink;padding:20px;font-size:20px">navigation </div>
<div class=article style="display: table-cell;width:600px; background-color:orange; border:1px solid pink;padding:20px;font-size:20px">
About Div tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML div element is used to wrap large sections of elements.
<img src="images.png" height="200" width="400">
</div>
</div>
<div class=a style="display: table-cell;width:700px;background-color:yellow; border:1px solid pink;padding:20px;font-size:20px">
About Span tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML span element is used to wrap small portion of texts, image etc.
<p>This text has used span element to color the word <span style="color:blue;font-weight:bold;">blue</span> as a style.</p>
<img src="span.jpg" height="100" width="400">
</div>
</div>
<p>Thank You!</p>
</div>
</body>
</html>
<!-- Use of Div tag and span tag -->
 |
| Use of Div tag and span tag |
No comments:
Post a Comment