Now that we know about HTML element nesting and parent/child relationships, let’s see another way these concepts are applied on a real-life webpage.
Div elements divide your page by enclosing other elements. These enclosed groups of elements can then be organized, moved and styled independently from one another.
Div elements are often used with the class attribute. Here’s an example:
<div class="main"> ... </div>
... indicates where other HTML elements would normally be enclosed by the
Below, we will use divs to divide our page into three separate parts.
First, we will enclose all the elements between
</body> in a div element with a class attribute of “container”.
<div class="container"> ... </div>
All the HTML elements you added in previous exercises should be inside the opening
- the navbar h2
- the navbar ul
- the company heading h1
- the tagline h3
- the paragraph
- the video
Make sure the closing
</div> tag is at least one line below the closing
Run your code. Notice that the elements have shifted in the web browser. We will fix this effect later on.
Next, we will enclose the navbar h2 and ul in another div and give it a class attribute of “nav”. You can use the code below as a guide:
<div class="nav"> <h2>Ollie</h2> <ul> <li>sign up</li> <li>search bikes</li> <li>reserve a bike</li> <li>about us</li> </ul> </div>
Run your code.
Notice that the navbar section now has a yellow background.
Finally, enclose the company h1, the h3, paragraph and video elements inside a third div with the class attribute of “main”.
Feel free to use the code below as a guide:
<div class="main"> <h1>Ollie Bike Sharing</h1> <h3>Share Your Pedals with the World.</h3> <p>Easy-to-use, free bike sharing now available in 27 cities.</p> <video width="320px" height="240" controls> <source src="https://content.codecademy.com/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4"> </video> </div>
There will now be a total of three divs on the page: the div with the “container” class contains the divs with the “nav” and “main” classes.
Run your code.
The file main.css contains CSS styling for the “container”, “nav” and “main” classes, which enabled page elements to change. If you’re curious, explore main.css for fun. We will learn how CSS works later in the course.