The <div> tag HTML is an important element used for creating divisions within a web page. It is a block-level element, which means it creates a new block on the page and takes up the full-width available by default. The <div> tag is a popularly used tool in the field of web development for structuring and organizing content, applying styling, and grouping related elements together.
When to use Div Tag
Div tag HTML also known as <division Tag> is among one of the most used tags of HTML, Containing both opening and closing tags. Div tag HTML has multipurpose features and uses. We can use this tag to do several things on a web page which include creating web layouts, styling CSS pages, using JAVAScript to create a web page, and much more.
Let us understand in more detail like when and where to use Div tag HTML.
Using Div Tag in Web Layouts
The main and basic use of Div Tag HTML is to group similar content together on a web page so that you can style it easily and comfortably.
One of the popular examples of using a Div tag in Web layout is that We can Group different sections of the web page using a Div tag; Grouping of the Header Section, Nav section, and Footer of the web page can be done in a single Div tag.
Using Div in CSS Art
In CSS Art, Div tag plays an important role in creating shapes, designs, and elements using CSS styling. Each Div tag acts as a building block where you apply CSS properties creatively to get your desired shape or design.
Now you must be thinking about How to use this tag for creating shapes and designs.
Don’t worry we will understand the basic syntax of using Div tag in CSS art with an example.
<!DOCTYPE html>
<html>
<head>
<title>Example of Using Div Tag</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
background-color: #f0f0f0;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #3498db;
}
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #e74c3c;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”circle”></div>
<div class=”triangle”></div>
</div>
</body>
</html>
In this code given above, <div class= “container”> acts as a basic CSS page where all these drawings and shapes will be displayed.
Inside the container, we have two <div> elements: one with the class “circle” and the other with the class “triangle.”
The “circle” <div> is styled to create a circular shape with a blue background color as you can see above I have used code #3498db in the background color option similarly the “triangle” <div> is styled to create a triangular shape with a red background color as I have used code #e74c3c in the background color class. You can also change the width, height, and other measurements of the shapes according to your preference by changing the height and width of the shape.
Styling the Div Tag
As we have discussed earlier, the <div> tag is an easy-to-style tag which makes it a popular choice of developers for grouping and structuring content on web pages.
The <div> tag can be styled using various CSS properties, we will discuss each property with an example for your better understanding and clarity.
Applying Font Properties in Div
We can apply different CSS properties such as adjusting font size and changing font family and font style on content grouped together using <Div> tag.
Let us discuss it with the help of a code that how <Div> changes the Font properties of a text:
<!DOCTYPE html>
<html>
<head>
<title>Changing Font Properties using Div Tag.</title>
<style>
.text-container {
font-family: Arial;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class=”text-container”>
“This Text is edited using Font properties in Div Tag”
</div>
</body>
</html>
Here in this code above, CSS properties like font family, font size, font weight, and color are used to style the text inside the <div> tag. The text within the <div> Tag will be displayed in Arial font, with a font size of 20 pixels, and a font weight of Bold.
Applying Color and Background color in Div Tag
We can also change the color of the text as well as the background color of our web page in CSS using Div Tag HTML.
Below is the code for understanding how you can add color as well as background color to your Text.
<!DOCTYPE html>
<html>
<head>
<title>Color and Background Color</title>
<style>
.text-container {
color: white;
background-color: #3498db;
padding: 20px; }
</style>
</head>
<body>
<div class=”text-container”>
This text has a color and background color applied using CSS.
</div>
</body>
</html>
In the code above Text-Container class is defined in <Div> tag, Here we have used the text color as white and the background color as Blue using Hex code #3498db. You can see the output written in between div tags.
How to Style in Div Tag
We can apply different text transformation properties on a Div tag. These text transformation properties include Using uppercase text, Underlining the sentence, Changing line spacing, and line height, and much more.
Here is an example of how we can change text style in Div tag HTML.
<!DOCTYPE html>
<html>
<head>
<title>Styling Text with Div</title>
<style>
.styled-text {
text-align: center;
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 2px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class=”styled-text”>
This text is styled using CSS within a <div> tag.
</div>
</body>
</html>
In the code given above, Styled-text is a CSS class and the <div> tag is used to group all the similar elements together.
In this code above all the text written will be transformed into upper case, aligned in the center, all the text will be underlined too as we have defined above, the letter spacing between the texts will be 2px, and the line height of the text in the paragraph will be 1.5px.
How to Create a Shadow Effect with the Div Tag
You can also create a shadow effect on the web page with the Div tag using the box-shadow property, let us understand how to implement the Box-shadow property with the Div tag.
<!DOCTYPE html>
<html>
<head>
<title>Shadow Effect</title>
<style>
.shadow-div {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px #7fecad;
margin: 20px;
}
</style>
</head>
<body>
<div class=”shadow-div”>
This div has a shadow effect applied using CSS.
</div>
</body>
</html>
Let’s understand the code written for the box shadow case above in a better way, So each value in box shadow is written here for a different purpose:
- The first value (5px) represents the offset on the x-axis, which basically determines whether the shadow will spread horizontally.
- The second (5px) represents the offset on the y-axis, which determines how far the shadow will spread vertically.
- The next 10px is for the blur-radius. Which determines how blurry you want the shadow to be.
- The last value is the shadow color which determines the color of the shadow in the above case we have used #7fecad for the shadow color.
How to use Multiple Div Elements Without Getting Confused
Using Div tag HTML makes it easy to group many elements together on a web page. We can use multiple Div tags to group different elements in the web page but using multiple Div tags in a single code, sometimes creates confusion for a developer as the code becomes complex and hard to understand.
You can use multiple Div elements without getting confused by following some simple rules given below:
- Give each <div> a unique class or ID name to distinguish them, this reduces confusion.
- Use CSS to style your <div> elements and the content inside them. You can set properties like width, height, background color, and more to make each section look unique and differentiated from one another.
- Use CSS positioning to arrange your <div> elements on the webpage. This helps control where each section will appear in the code.
Learn HTML with PW Skills
Still confused about How to start and where to start from? Don’t worry we got your back here. Explore the exciting world of website building with our Web development course! Starting from the basics of HTML to becoming an advanced Web designer gaining all the essential knowledge of HTML, CSS, JavaScript ,and much more. This course will provide you with a simplified road map to start your journey with experienced faculty staff, providing regular doubt sessions and Daily practice sheets for polishing your skills regularly.
Whether you’re into Web designing or just curious about how websites work, this course is for you. Get ready to unlock the secrets of HTML and start building your own awesome websites.
FAQs on DIV TAGS HTML
What is a <div tag used for in HTML?
<Div tag HTML also known as <division Tag is among one of the most used tags of HTML, Containing both opening and closing tags. Div tag HTML has multipurpose features and uses. We can use this tag to do several things on a web page which include creating web layouts and styling CSS pages.
How do I style a div> tag with CSS?
You can style a div> tag using CSS by applying various properties such as width, height, background color, border, padding, margin, display, and more. These properties allow you to customize the layout of the <div and its content.
Can I have multiple div> tags in a single HTML document?
Yes, you can have multiple div> tags in a single HTML document. In fact, most developer uses multiple div> tags for organizing different sections of a webpage, such as headers, navigation menus, and footers.
