One of the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
<div>s don’t inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. <div>s allow us to group HTML elements to apply the same styles for all HTML elements inside. We can also style the <div> element as a whole. You can see how this can be done in the Learn CSS course.
<div>s can contain any text or other HTML elements, such as links, images, or videos. Remember to always add two spaces of indentation when you nest elements inside of <div>s for better readability.
1. Below the <h1> heading that says The Brown Bear, add an opening <div> tag.
Place the closing </div> tag after the <h3> element that says Features.
Remember to use your space bar to add two spaces of indentation when you nest elements.
2. Above the <h2> element that says Habitat, add an opening <div> tag.
Close the </div> tag after the <h3> element that says Countries with Small Brown Bear Populations.
3. Above the <h2> element that says Media, add an opening <div> tag.
Place the closing </div> tag right above the closing </body> tag.
<body>
<h1>The Brown Bear</h1>
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
<h2>Media</h2>
</body>