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 Lee ChenChih
Lee ChenChih
Courses Plus Student 1,285 Points

Why do we need to add two section tag. I think one can solve it.

Why do we need to add two section tag. I think one can solve it. I am curious about it. I think it's able to used one section. Is it because neater or any reason.

Taki mhd
Taki mhd
Courses Plus Student 1,714 Points

Can you please expand on your question, are you referencing a code challenge? Or is this a general question, if so, please elaborate so we can help.

Lee ChenChih
Lee ChenChih
Courses Plus Student 1,285 Points

There is a lesson,and i am not sure why we need to add two section on "Build the Contact Page" in HTML course.

1 Answer

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Hi,

So I believe that we are talking about the "How to Build a Website" course - "Adding Pages to a Website" - Build the Contact Page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

During the video Nick explains that he is using 2 sections to allow him to do a 2 column design for the desktop view.

Later on in the course in the "Responsive Web Design and Testing" - Build a Three Column Layout video Nike will use the 2 sections in the media queries, floating one section to the left and the other to the right.

But as well as the use to position the items on the screen, the section element is more generally used to represent a generic section of a webpage page. Such as thematic grouping of content. In this case the 2 sections are being used to group the 'General Information' into 1 section and the 'Contact Details' into another.

The How to Use The HTML5 Sectioning Elements blog post has a small section on when and how to make use of the section element.

I hope that helps.

Also if you are watching a video or completing a task and want to ask a question, then there is a "Get help" on the page that I recommend that you use. It will create your question here on the community pages and it will also add a link back to the video or task that you were completing at the time that you wanted to ask the question. It will just help us to zero in on the best way to help.