FAQ: Learn HTML - Intro to HTML - Divs

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

2 Likes

4 posts were split to a new topic: Why should we use divs if they don’t change anything visually?

7 posts were merged into an existing topic: Why should we use divs if they don’t change things visually?

2 posts were split to a new topic: Should I start by learning HTML?

A post was split to a new topic: How can I add a line in HTML

2 posts were split to a new topic: I’m having a syntax error

2 posts were split to a new topic: Why should I group elements with div?

2 posts were split to a new topic: Can you type more than one code per line?

hello there, i was wondering the effect of div tag only happens on the written code or it has effect when we execute our code ?

When inserting a div around elements, is it necessary to indent the closing div? Or should there just be a space between the opening div and the rest of the element? How exactly does this improve readability?

Consider,

<div><div><div><div><div></div></div></div></div></div>

How readable is that? Yet, the browser has no problem disseminating it.

No white space was used at all, yet those DIVs will all render accordingly. What’s more, CSS and DOM script can narrow in on any one of them.

White space has practically no meaning in HTML. By ‘practiclally’ we mean that one space will be rendered in all cases.

<p>here is       some text</p>

<- here is some text

<p>here is
some text</p>

<- here is some text
2 Likes

Thank you very helpful.

1 Like

Hi to everyone, it’s my first post / question. In the example given on the left panel of this exercise, I know ‘body’ tag is the super-grand-daddy or the Adam / Eve in the whole scheme of things but how do I know ‘h1’ and ‘p’ tags belong to the same level of descendents, i.e sibiling children of ‘div’ tag in this case?

In short, how do I know whether the next opening tag or tags should be indented with two spaces to mean it’s a child that follows next? Thank you very much in advance!

1 Like

Indentation is not needed in HTML. It does make nesting more visible.

<parent>
    <child>

    </child>
</parent>

In the above pseudo code, we say the child is nested in the parent. Indentation makes it easier to see child elements and identify their parent.

1 Like

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 divs? This is because they’re direct children of the body.

Now we can start adding children elements to the divs.

<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.

7 Likes

Hi ghostlovescore,

It’s a month late for personal reasons but I deeply appreciate your reply. It’s very helpful in aiding my understanding. I wish you the very best in health. Thank you very much!

1 Like

Don’t we have html elements that have a semantic meaning, that we can use to group related elements in a html document, other than using a div?

1 Like

There are certainly more html elements, and also html elements which are better semantically speaking. But we can’t throw everything at learners at once :wink:

2 Likes

Hello!
In this exercise the instructions says: Remember to use your “space” bar to add two spaces of indentation when you nest elements.
I’m wondering exactly where to put these two spcaes. Is it in front of the opening <div> and the closing </div>, or is it in front of all the elements thats between the opening <div> and closing div </div>?

Thanks in advance!

I would do the following:

<div>
  <p>nested paragraph element</p>
</div>

given the paragraph is nested within the div element, so the spaces are before the opening element

this of course applies to multiple levels of nesting:

<div>
  <div>
    <p>lala</p>
  </div>
</div>

this really improves readability and ensuring all tags are properly closed