Hi there, and welcome to the community!
So the <body></body>
tags encompass all the elements that will be visible on the screen.
<html>
<head>
<!-- This isn't visible -->
</head>
<body>
<!-- Everything here will be visible -->
</body>
</html>
Then, you have to think of the elements within the body
in terms of blocks, or sections. This is how you’ll organize content within the body of the document. That’s where div
comes in handy.
div
will represent a block, a division within the body content that will serve as a container for a section of the document that contains its own elements. The div
will group content that’s related.
You know how on a web page, you can usually find a header with a logo up top, and a footer with some links and a copyright notice at the bottom? These are sections of the document. Everything in between will represent another section.
<body>
<div><!-- This is our header --></div>
<div><!-- This is the main content --></div>
<div><!-- This is our footer --></div>
</body>
Notice the indentation for those div
s? This is because they’re direct children of the body
.
Now we can start adding children elements to the div
s.
<body>
<div id="our-header">
<img id="our-logo">
<div id="our-navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>Blog</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
Here, notice that “our-header” is a section that has a set of children and grand-children.
The div
“our-logo” and the div
“our-navigation” are both direct children of “our-header”, so they’ll be indented the same way within their parent block.
But then, “our-navigation” contains an ul
(unordered list), which is a child of “our-navigation”. Since it is a direct child, we’ll give it some indentation. The unordered list itself has children, the li
(list item) elements, that are its direct children. So they’ll also receive some indentation to support that visually.
But as @mtf just said, indentation isn’t necessarily needed.
You could write the same code like this:
<body>
<div id="our-header">
<img id="our-logo">
<div id="our-navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>Blog</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
It wouldn’t change a thing. But it’d be slightly more difficult for us to navigate. So, visually speaking, indentation helps. But that’s about it.