The HTML division tag, called "div" for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content. Show
The In this tutorial, I will show you the various things you can do with the When to Use the div TagThe Ultimately, you'll almost always to use it to style whatever it contains or manipulate such things with JavaScript. ADVERTISEMENT 1. Use div in Web LayoutsYou'll primarily use the Later in this tutorial, I will take you through how to make a web layout with multiple Div itself does not have a direct effect on the presentation of the content unless you style it. 2. Use div in CSS ArtWith the div tag, you can make various shapes and draw anything because it is easy to style.
To make a square with
You can make a circle with the
Making the Nigerian flag with the To make
it, define 3
ADVERTISEMENT As we discussed above, the div tag is very easy to style. It's one of the reasons why many developers use it to group similar content. The div tag accepts almost all CSS properties without a problem. Let's look at a few examples of that now. 1. How to Apply Font Properties with divYou can apply the CSS properties such as
ADVERTISEMENT 2. How to Apply Color with the Div TagYou can apply the CSS
3. How to Style Texts with the Div TagYou can apply the CSS
ADVERTISEMENT 4. How to Create a Shadow Effect with the Div TagYou can create a shadow effect with the
What’s happening in the CSS above? I was able to create the shadow effect with the CSS box-shadow property.
The output looks like this: How to Use Multiple Div Elements without Getting ConfusedDiv tags are commonly used to group similar content together. In older and even some newer web pages, you'll find divs all around, despite the fact that semantic tags are recommended for accessibility and better SEO. Since
I will walk you through how to put this into practice by making a basic web layout. The first section you'll want to make is the header, containing the logo and navbar:
Before styling the navbar, I made some CSS resets to make things align correctly and display nicely:
In the code snippet above:
To style the navbar appropriately, I will grab the container
For the remaining sections apart from the footer, the HTML and stylings are generic:
I gave the individual sections a greyish background color and a height of 200px. I positioned the h2 tags inside in their centers with Flexbox and applied a Finally, I gave the footer a deeper
grey background color to make it distinct, and centered the content in it with a The resulting layout looks like this: ADVERTISEMENT ConclusionThe HTML div tag is commonly used among web developers everywhere. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. This is because semantic tags are better for accessibility and SEO. In short, the div tag remains useful and isn’t going anywhere anytime soon, so feel free to use it when necessary. Thank you for reading and have a nice time. Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started |