Div Tag Usage
Using the div tag is straightforward. You open it with <div> & close it with </div>. Everything between these tags is part of the same section. You can put text, images, or even other divs inside. It's very flexible.
Examples
Let's see a simple example. Say we want to create a section for a welcome message on a webpage. We can do it like this:
<div>
Welcome to our website!
</div>
This code makes a section with the text "Welcome to our website!" But it won't look any different until we add some CSS to style it.
How to Style Div Tags with CSS
Styling div tags with CSS lets you add colors, set sizes, & much more. CSS stands for Cascading Style Sheets. It's what makes websites look good. You can tell each div on your page to look a certain way with CSS.
Using CSS in Divisions
You can use CSS with div tags in a few different ways. Here are two common methods:
Inline CSS
This means putting the CSS right inside the div tag. It's quick & easy for small changes. Here's how you do it:
<div style="background-color: blue; color: white;">
This section has a blue background & white text.
</div>
External CSS
This is when you put the CSS in a separate file. This method is great for bigger projects because you can use the same styles on many pages. Here's an example:
First, you create a CSS file (let's call it styles.css) & write your styles there:
.blue-section {
background-color: blue;
color: white;
}
Then, in your HTML, you link to this CSS file & use the class in your div:
<link rel="stylesheet" href="styles.css">
<div class="blue-section">
This section will have a blue background & white text.
</div>
Using CSS, you can make your div sections look exactly how you want. You can change colors, sizes, borders, & lots more.
Difference Between Div Tag & Span Tag
Sometimes, it might seem like div & span tags are similar. Both can be used to group content, but they are used in different situations.
The div tag is like a big box. It takes up the whole width of the page. You use div when you want to create a large block of content, like a section or a container for other elements.
On the other hand, the span tag is like a small box. It only takes up as much space as it needs. You use span for small pieces of content inside a line of text. For example, if you want to change the color of a few words in a sentence, you'd use span.
To better illustrate the difference between the div tag and the span tag, consider this example where we're creating a simple webpage snippet that includes a title, a paragraph, and a highlighted phrase within the paragraph.
First, let's use a div tag to create a separate block for the title and the paragraph:
<div style="background-color: lightblue; padding: 20px; text-align: center;">
<h2>Title of the Section</h2>
<p>This is a paragraph in a div block. Notice how the div takes up the entire width.</p>
</div>
In this example, the div creates a block that spans the full width of the container, with a light blue background and padding around it for some space. It groups the title and the paragraph together as one unit.
Now, let's highlight a phrase within the paragraph using a span tag:
<div style="background-color: lightblue; padding: 20px; text-align: center;">
<h2>Title of the Section</h2>
<p>This is a paragraph in a div block. Notice how <span style="background-color: yellow; font-weight: bold;">the span highlights only this phrase</span> without affecting the whole line or block.</p>
</div>
Here, the span tag is used to highlight just a part of the text within the paragraph. The span has a yellow background and bold text, but it only affects the content inside the span, without changing the layout of the surrounding text or the div block.
This example shows how div is used to structure and group larger blocks of content with a clear separation from other elements, while span is used for styling smaller sections of text within those blocks without disrupting the overall layout.
Supported Browsers for the Div Tag
The good news is, every web browser you can think of supports the div tag. This means whether you are using Chrome, Firefox, Safari, Edge, or even older browsers like Internet Explorer, div tags will work just fine.
When you use a div tag on your website, you don't have to worry about someone not being able to see your content properly because of the browser they are using. This makes div a reliable choice for creating different sections on your web pages.
Remember, while the div tag itself works everywhere, some CSS styles you apply might look a bit different from one browser to another. It's always a good idea to check your website on different browsers to make sure everything looks right.
Frequently Asked Questions
Can I put a div inside another div?
Yes, you can. Putting a div inside another one helps you organize your webpage better. It's like putting a small box inside a bigger one.
How do I make a div take up the whole screen?
To make a div fill the whole screen, use CSS. Set its width & height to 100%. Like this: style="width: 100%; height: 100%;".
Why isn't my div showing up?
A div might not show if it has no content or style. Try adding some text inside or style it with CSS to make it visible.
Conclusion
In this article, we learned all about the div tag in HTML. It's a super useful tool for making sections on your web pages. We saw how to use it, style it with CSS, and how it's different from the span tag. Plus, we learned that all browsers support the div tag, so everyone can see your web pages the way you designed them.
You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.
117+ registered 