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

Posted by Trevor Brandt
Trevor Brandt
1,520 Points

Should I use <section> or <div>?

I am working on my personal website and I'm confused about <section> and <div>. The content I am referring to is the main body of my website (the welcome message). So far I have:

<div id="wrapper"> <section> <h1> Welcome!</h1> <p>Welcome to my website.</p> </section> </div>

Is this correct or should I use a different approach?

Thank you in advance!

3 Answers

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Without more information, that block actually looks like a good place to use a header tag (different than a heading tag like h1). Is it part of the header of the page?

As for when you should use section tags, it's a bit subjective. They indicate general sections of a document, like groups of similar content, and normally include a heading identifying the section's content.

Trevor Brandt
Trevor Brandt
1,520 Points
Trevor Brandt
Trevor Brandt
1,520 Points

It's going to be the only block on the page. But I think I see what you mean.

So let's say I have a homepage. If I wanted the homepage to have a welcome message and then a larger body of text with additional information, the welcome message should be contained in header and the other information could go in section?

Thanks again for your help!

James Hall-Treworgy
James Hall-Treworgy
3,326 Points
James Hall-Treworgy
James Hall-Treworgy
3,326 Points

This is a typical layout

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title> Website name | Greetings </title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  </head>
  <body>
    <header>
        <h1> Welcome! </h1>
        <h2> The world best source of information </h2>
      </header>
    <div>
      <nav>
      </nav>
      <section>
      </section>
      <footer>
        <p> &copy; 2016 Your name </p>
      </footer>
    </div>
  </body>
</html>