The Div tag is an element in HTML that is utilized for creating divisions or segments within the content of a webpage. It is important to note that the Div tag is a paired tag, which means it requires an opening and a closing tag. Implementing the Div tag does not impact the overall layout or content of the webpage.
The <div> tag is a versatile container and a block-level element in HTML. Its primary function is to group together multiple HTML tags, allowing for the organization of content and the application of styles using CSS.
Note: The <Div> tag cannot be applied inside the <p> paragraph tag because if we use the <div> tag at any point, then the tag breaks the paragraph from that point. So, if we want to apply style inside a paragraph, then we have to use the <span> tag, which is used with the inline elements.
The comprehension of the <div> tag can be enhanced through illustrative examples. Below are several instances that demonstrate its usage.
Example 1: In this instance, the inline CSS style attribute is applied directly within the <div> tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Use Inline Style in Div
</Title>
</Head>
<Body bgcolor="red">
Hello User!...
<div style="height:150px; width:600px; color:blue;
border:1px solid; background-color: yellow;">
<center>
You are at C# Tutorial Site....
<br> <br>
Inline Cascading Style sheet is USED in this example.
<br>
So, here is no class is used.
</center>
</div>
</Body>
</Html>
The result of the HTML code displayed above can be observed in the screenshot below:
Illustration 2: In this instance, internal CSS is employed to establish a class that is subsequently utilized within the div element.
<!Doctype Html>
<Html>
<Head>
<Title>
Use Internal CSS class
</Title>
<style>
.Divclass {
border: 5px outset green;
background-color: gray;
text-align: center;
color: yellow;
}
</style>
</Head>
<Body bgcolor="red">
Hello User!...
<div class="Divclass">
You are at C# Tutorial Site....
<br> <br>
Internal CSS is used in this example. <br>
The Internal class creates the class which is to be define in div tag of body tag.
</div>
</Body>
</Html>