FAQ: Learn HTML - Intro to HTML - Divs

This community-built FAQ covers the “Divs” exercise in Codecademy’s lessons on HTML.

FAQs on the HTML exercise Divs

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

1 Like

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
1 Like

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!

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.

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.

1 Like

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