Question on <div> lecture

I have question about the below excercise of adding div below h1 and closing div after h3. (i gotta delete this < of the tag or else it would not appear as codes)
Is h2 now child of div? if that’s true, then what is the relationship of h2 and h1 ? and what consequences does it have?

body>
  h1>The Brown Bear</h1>
  div>
    	h2>About Brown Bears</h2>
 		  h3>Species</h3>
   		 h3>Features</h3> 
  /div>

Hi @web9020947765 welcome to the forums! :slight_smile:

Can you post a link to the material you’re referring to?

Whatever you’ve copy&pasted into your post hasn’t worked. :slight_smile:

I’ve just edited my post. Please take a look. Thanks!

If you use the </> icon in the post editor, it will add ``` before and after your code so the forum will ignore it and display it as code, like so:

<div id='some_stuff'>
   <div id='some_inside_stuff'>
      <strong>INSIDE</strong> a div!
   </div>
</div>

In your code, you have a <div> which contains an <h2> element, and 2 <h3> elements.

All three of these have a common parent element, which is the <div>.

The <h2> and <h3> elements are siblings, and so won’t affect each other (for style inheritance etc).

Hope that helps.

6 Likes

Hello, and welcome to the forums @web9020947765 :slightly_smiling_face:!

No. The <h2> is contained inside of the <div></div>.

Even though it isn’t exactly true, <h2> and <h1> are both headings. The <h1> just happens to be a big tag, and the <h3> happens to be the smaller tag.

There really isn’t consequences. The <div> just labels the the different sections. The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript. I guess you could say that it’s in its own section now.

I hope this helps =)

4 Likes

Thank you for your explanation. I got confused about relationships of the tag because I thought indentation would mean h2 becomes child of div .
So <div> </div>does not affect the hierarchy , it just dives the text into sections?

1 Like

Thanks for your explanation and advice on the post editor as well!

1 Like

For the purposes of HTML, any indentation (or other white-space) exists solely to make the markup easier for a human to read. It’s ignored by the rendering engine, and so has no impact on the document hierarchy.

In your example, your <h2> and <h3> elements are child elements of the <div>.

We can verify this through JavaScript. For example, let’s say we had the following markup.

<!doctype html>
<html>
<head>
<title>Child Element Example</title>
</head>

<body>
<h1>An H1 header!</h1>
<div id="d1">
<h2>Inside DIVs!</h2>
<p>This is a paragraph inside a div element.</p>
<h3>Cool, no?</h3>
</div>

<div id="output">
</div>

</body>
</html>

There’s no indentation, in part to illustrate my statement that it’s of no importance to the rendering engine and also because I threw that together in gedit.

The resulting page, when rendered, looks like this:
image

I can adjust my markup to include a small block of JavaScript, with which I can verify which items are the children of my <div id="d1"> element. Like so:

<!doctype html>
<html>
<head>
<title>Child Element Example</title>
</head>

<body>
<h1>An H1 header!</h1>
<div id="d1">
<h2>Inside DIVs!</h2>
<p>This is a paragraph inside a div element.</p>
<h3>Cool, no?</h3>
</div>

<div id="output">
</div>

<script language="javascript">
var theDiv = document.getElementById('d1');
var childElements = theDiv.children;

for (var i = 0; i < childElements.length; i++) {
document.getElementById('output').innerHTML = document.getElementById('output').innerHTML + childElements[i] + "<br/>";
}
</script>

</body>
</html>

You’ll have to forgive the poor standard of my JavaScript there, I’m not great with it (it’s actually one of the courses I’m taking here on Codecademy!). Now that’s there, if I refresh my HTML page, we can see the elements which are the child elements of the <div>.

image

@stetim94 summarised the parent/child relationship brilliantly in an older post here on the forum:

I hope that clarifies things for you a bit more. :slight_smile: We’re here to help, though, if you have any more questions. :slight_smile:

3 Likes

Very detailed explanation, Thankss!
Just to be sure of my interpretation, indentation has nothing to do with hierarchy.
And, <div> </div> affects the hierarchy.
I think this parent-child hierarchy will make more sense to me when i start learning CSS!