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 Challenge

Im not quite sure if I am using the right html tag for this question.

I'm not quite sure if my tags are in the wrong location or if I'm using the correct tags period.

index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Web Design &amp; Development Blog!</h1> 
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Recent Work</a></li>            
        </ul>
      </nav>
    </header>

    <h2>The Main Articles</h2>   

    <main><h3>My Favorite HTML Courses</h3> 

    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget <a href="#">feugiat ante faucibus</a>.</p</main>>

    <h3>10 Handy CSS Features</h3> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et <a href="#">ultrices posuere</a>.</p>    

    <h3>Follow Me on Social Media:</h3>

    <ul>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">LinkedIn</a></li>     
    </ul>

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
  </body>
</html>

Also, Steven means this...

</p</main>>

^^>>invalid code.

2 Answers

Steven Parker
Steven Parker
231,248 Points

At first glance, I notice an starting tag for <main>, but I don't see a corresponding ending tag.

The closing tag is after the following paragraph.

Steven Parker
Steven Parker
231,248 Points

I didn't think to scroll right. But now that I did, I see two other issues:

  • the ending </main> tag appears to be inside the ending paragraph tag
  • the main container isn't enclosing as much of the document as the instructions asked for

Probably worth noting that it's bad practice to write elements on one line unless they are really short(and usually only for inline elements like span and anchor tags).

As Steven mentioned, that paragraph tag is pretty hard to read.

Though its not a rule or a requirement, you should consider the readibilty of your code. by blocking your code out, you can see if you accidentally placed a closing main tag inside of a paragraph tag a little easier as well. ;)

eg:

<main>
    <p>
        <b>
            Aaron's Fun house

        </b>
        <span>
            $12/ride

        </span>

    </main>

</p>

Even though I normally use better spacing than in the example, it becomes pretty easy find my mistake by looking at the indentation and the "blocking" of code. Most editors will even highlight the closing tag when you click the opening tag and vice versa. This will be an even stronger tool for you and getting a better format standard as far as blocking is concerned will only strengthen that tool.

And sometimes you will work alone on a project, you may not be the last person to ever touch it.

I know this is just a code challenge, but its a good idea to get use to doing this early so you dont have to retrain yourself later when you work with a group of developers. :)

They'll often times have their own code standards and this is usually one of them.

Thanks for the feedback.