Why are these not classed as inside the div container?

HTML-CSS
1

They are not classed as ‘within the div container’ yet they should be,
why does the computer not recognize this as valid code yet placing the closing div elements after the first marker still class the 2nd and 3rd DIV elements as within the would be closed DIV container?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>CSS Color Markers</h1>
  <div class="container">
    <div class="marker">
      <div class="marker">
    <div class="marker">
      </div>
      </div>
    </div>
  </div>
</body>
</html>

/* file: styles.css */
h1 {
text-align: center;
}

.marker {
width: 200px;
height: 25px;
background-color: red;
margin: auto;
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44

Challenge: Step 14

Link to the challenge:

2

You are nesting the two new divs. You should add the two new divs after the first one so that all three of them are at the same level.

3

but how does the div container separate the first closing tag from the 4th closing tag?
is it the spacing before each tag? this is the only thing I can think of that might be a contributing factor

4

A div element is composed of both an opening <div> tag and a closing </div> tag. So to place an element after a div would mean to place the element after the closing </div> tag.

5

right, but with an anchor <a></a> that’s closed, <a> <a> </a> </a> that wouldn’t work because you have to close the first A anchor before adding the second A anchor…?

how does the the div container know that the first closing tag is for the 1st marker and not for the container?

6

This is not valid HTML. You can’t nest an anchor inside of an anchor.

7

right, so why can I nest a <div> within a <div> when they have the same closing tag?

(how does the interpreter recognize the difference between closing tags?)

8

Because some elements can be nested within elements of the same type. You can nest as many divs inside of divs as you like. Same with spans. And sections. And many more.

As far as how the browser determines which closing div tag goes with which opening div tag, it sort of does the same thing you do with your eyes, it keeps track of the number of opening div tags and then looks for the corresponding closing div tags.

9

Thanks, it’s been straining my brain thinking of all the possible ways that would be possible, the indentures before the nested <`div>'s didn’t make any real difference to the coding aspect :sweat_smile:

So if the first tag doesn’t close, the system will wait for a spare closing tag to become available and pair them off as a formation? That’s fairly clever.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.