Hi there, and welcome to the community!
<body></body> tags encompass all the elements that will be visible on the screen.
<!-- This isn't visible -->
<!-- Everything here will be visible -->
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.
<div><!-- This is our header --></div>
<div><!-- This is the main content --></div>
<div><!-- This is our footer --></div>
Notice the indentation for those
divs? This is because they’re direct children of the
Now we can start adding children elements to the
Here, notice that “our-header” is a section that has a set of children and grand-children.
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:
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.