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 Structuring Content Challenge

Posted by Joseph Luck
Joseph Luck
1,251 Points

Confused about placing ul, h1, and p tags in introductory content on HTML Basics challenge task 1 of 4.?

The questions states that if wants me to place the ul, h1 and p tags above the introductory elements?

index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>            
    </ul>
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>

    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
  </body>
</html>

3 Answers

Leanne Millar
Leanne Millar
7,726 Points

Hi Joseph; I've used comments within the code to try and explain visually what the question is asking you. I hope this helps you to understand a little better. Utilising these code blocks such as | <header> | <footer> | <nav> | <section> | <article> | help to make your code more readable and also help when styling individual elements. When you begin working with CSS more; you will discover that these are really important when you want to change a particular UL or P element's styling but you don't want it to affect the styling of every UL or P element in the site. 

<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
<!--The question asks you to 
"Place the ul, h1 and p elements at the top of the page
inside an element that represents a group of introductory content". -->
<header> <!--Introductory content.--> 
<!-- The header tag is the header of the page and groups 
your INTRO section into a readable format-->
<nav> <!-- Defines the site navigation section-->
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>            
    </ul>
</nav> <!--Closes the navigation section-->
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>
</header> <!-- Closes the Header section -->
    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>

    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
  </body>
</html>
Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

The question reads:

Place the ul, h1 and p elements at the top of the page inside an element that represents a group of introductory content.

They're asking for you to place the elements that are already in the document inside an element appropriate for the introductory content. You will need to determine which element to use, and then surround the correct content with this element's opening and closing tags. Hope that helps :)

Oscar Nava
Oscar Nava
9,593 Points
Oscar Nava
Oscar Nava
9,593 Points

Hi Joseph,

You can put the ul, h1 and p tags inside the <header> </header> like this: <header>
<ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li>
</ul> <h1>My Web Design & Development Portfolio!</h1> <p>A site featuring my latest work.</p> </header>