This forum is now read-only. Please use our new forums! Go to forums
Is nesting multiple <div>'s necessary?
Hi.
In the example code for Multiple Selectors, the separate div’s are not clearly distinguished with closing brackets. They appear this way
< div>first example text < div>second example text < div>third example text < /div> < /div> < /div>
The three closing brackets all appear at once at the end, which initially confused me.
Would it be okay instead to use closing brackets after each div? See below:
< div>first example text < /div> < div>< div>second example text< /div>< /div> < div>< div>< div>third example text< /div>< /div>< /div>
This seems a little more in line with what the other courses taught. Is there a reason not to do it this way and to group the closing brackets together on one line?
Thank you!
Answer 53e90a3080ff332031000206
Answer 53ed0e28548c352d9f000095
;The first example sets up divisions within divisions. Maybe smaller blocks of info within larger blocks of info. The second example sets up 3 blocks that can separately be located anywhere on the page; where as the first inner blocks(div) will move with the outside div.
Answer 53ee777d7c82ca6c5a000958
Just wanted to throw this reminder out there: With nested tags, the first tag opened is the last tag closed.
You can think of it like those Russian nesting dolls. That’s how nesting code works. One thing inside of another.
<div>
<p> The paragraph nesting doll goes inside the div nesting doll. </p>
</div>
Answer 53fa674e631fe9794c00754c
Further to what Jem said, there is a visual difference between nesting and not-nesting div’s in html code. Below is the same code in css applied to the different pattern of div’s. put this code into “stylesheet.css”:
div {
background-color: #abcdef;
border: 2px solid black;
font-size: 25px;
padding: 10px;
}
Now put this code into the html tab
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3>I'm plain old font!</h3>
<div>
<h3>Me, too!</h3>
<div>
<h3>Me three!</h3>
<div>
<h3>Forget you guys. I'm about to be red!</h3>
</div>
</div>
</div>
<div>Me too!</div>
<div>Me three!</div>
<div>Forget it!</div>
</body>
</html>
See the result…
1 comments
I’m going to point out that the code you have posted will not work simple as that. The reason is because the “h3 nested inside three
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
Why not answer the question.
I did, just in an indirect way. it’s just fine to do it the way he had, and makes more sense than the way they had us do it.