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>
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.
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?
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:
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>.
@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. We’re here to help, though, if you have any more questions.
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!