Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Basics Structuring Your Content Grouping Content with <main> and <div>

Posted by Nathan Holborow
Nathan Holborow
1,196 Points

Why is it common practice to wrap everything within the <body> tag with a <div> tag?

I understand that you use <div> tags to wrap content that has no specific tag that relates to it. Using the <div> tag in this way help you to structure/write the code and also to add CSS to the content within that <div> tag.

However, I can not seem to understand the need to wrap everything within the <body> in a <div> tag. It's not like you want to add the same CSS class to everything within the body as most of the content within the body will want to be different to each other such as a heading would want different CSS to a paragraph.

I also do no see the benefit to the browser reading the code and how it would help screen readers and other such things as it is being used to wrap everything apart from what is contained in the <head>, and is just a generic wrapping tag with no semantic value.

If I seem to be confusing myself could you just give me a simple reason why you wrap everything inside the <body> with a <div> tag

Nathan Holborow
Nathan Holborow
1,196 Points

In the video that this is related to, he says that "designers and developers use the <div> tag as a wrapper for the entire page"(At around 2:35 in the video). He then proceeds to insert a <div> tag after the opening <body> tag and a closing </div> tag before the closing </body> tag. I just don't understand why you would wrap everything in the <div> tag.

4 Answers

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Nathan,

Guil explains this in the next video. For example: wrapping everything inside the <body> in a <div> (usually classed or id as 'wrapper' here at treehouse) you enable yourself to repeat HTML tags multiple times without your page structure breaking down. For example you can't target two <footer> tags twice in CSS. But you can do it when you place one of them (or both of them) in a div with an id or class.

<body> 
   <header>
      <h1>
         Hello, this is header in the body
      </h1>
   </header>
            <div id="wrapper">
               <header>
                  <h1>
                     And this is the wrapper's header
                  </h1>
               </header>
               <footer>
                     <p>
                         This is the wrapper's footer
                  </p>
               </footer> 
            </div>
   <footer>
      <p>
         This is the body's footer
      </p>
   </footer> 
</body>

Having said this. Simple websites usually don't need this. However, big complex projects that also have to factor in users with handicaps really need to set up a good structure for them to navigate.

Hope it helps!

Phil Arnold
Phil Arnold
11,331 Points

Excellent point, well made!

Rui Xu
Rui Xu
11,245 Points
Rui Xu
Rui Xu
11,245 Points

Excellent example, thanks!

Phil Arnold
Phil Arnold
11,331 Points
Phil Arnold
Phil Arnold
11,331 Points

I am not sure I am completely following your question, however, here goes: there is no need to wrap everything in the <body></body> within a <div></div> Since HTML5, we now have access to more semantic elements to clearly indicate the content and types of content within a web page. I would advocate trying not to use a <div> when you can use one of the new HTML5 elements.

You probably know this already so forgive me for repeating, the <html><head> and <body> elements are mandatory within any HTML file and must always be in the order I have specified. I hope this helps, apologies if it does not.

Nathan Holborow
Nathan Holborow
1,196 Points

Thank you for the quick response. I understand what you have said but it doesn't really answer my question. I added a new comment to my original question to re-explain my question.

Melvin Ho YK
PLUS
Melvin Ho YK
Courses Plus Student 25,247 Points
Melvin Ho YK
Melvin Ho YK
Courses Plus Student 25,247 Points

I have the same question as intended here, why create another <div> tag for a wrapper to wrap all <body> content, where you can just use <body> tag alone instead. So in CSS, you just use the body tag for styling. Because Guil used a two-footer tag in this course and have to open up the div for the wrapper to accommodate two-footer.
If I only have one footer, then I will not create another div tag as the wrapper. I will just use my <header>, <main>, <section> and <footer> in my body tag.

Nathan Holborow
Nathan Holborow
1,196 Points
Nathan Holborow
Nathan Holborow
1,196 Points

Thanks for all the support, really appreciate it!