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 Benji Beck
Benji Beck
5,238 Points

Can anyone help with validating my code or comment on improving syntax? Having trouble figuring with validator.w3

...html

<head>
    <meta charset="utf-8">
        <title>Benji Beck </title>
</head>

    <body>
        <header>
        <nav><a href="benjibeck.html">Home | <a href="about.html">About | <a href="contact.html">Contact
            <!---<a href="benjibeck.html"--->
                <hgroup>
                <h1>Benji Beck</h1>
                </a>
                <ul>
                <!---<li><a href="benjibeck.html">Portfolio</li>--->
                <!---<li><a href="about.html">About</li>--->
                <!---<li><a href="contact.html">Contact</li>--->
                </ul>
                </nav>
            </header>
            <section>
            <p>Gallery coming soon</p>
            </section>
            <footer>
                <a href="//http:linkedin.com/in/benjibeck"><img src="C:\Users\Benji\Desktop\portfolio\img\linkedinlogo.png" alt="LinkedIn Logo"></a> 
                <a href="//http:facebook.com/beck.benji"><img src="C:\Users\Benji\Desktop\portfolio\img\facebooklogo.png" alt="Facebook Logo"></a>
                <a href="//http:twitter.com/benji_beck"><img src="C:\Users\Benji\Desktop\portfolio\img\twitterlogo.png" alt="Twitter Logo"></a> 




            <br><p>&copy; 2017 Benji Beck</p>
            <!---<nav><a href="benjibeck.html">Home | <a href="about.html">About | <a href="contact.html">Contact--->
            </footer>
        </body>
    </html>

....

Benji Beck
Benji Beck
5,238 Points

Would it be okay to begin adding CSS elements via external style sheet?

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It looks like you have an incomplete <hgroup> element missing the closing tag. Also, hgroup is classified as experimental, and has been removed from the HTML5 (W3C) specification. So you may not want to use it at all. See this MDN documentation page for details.

There are also several incomplete anchor ("a") tags in the nav section.

Otherwise, while it's not actually an error, it seems odd that several other elements are included but commented out.

And adding CSS elements via external style sheet is a recommended "best practice", so that is a good idea.

Benji Beck
Benji Beck
5,238 Points

Hello Steven,

Thanks for informing me about hgroup. I'll learn from Rhys' revisions on my anchor tags and go back and review a few lessons on that.

Is it poor practice to use comments to hide elements that I'm unsure about? Would it be better stored in a separate text file?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Using comments while expermenting is fine, but you would normally remove any inactive lines from published versions of the code.

Rhys Kearns
Rhys Kearns
4,976 Points
Rhys Kearns
Rhys Kearns
4,976 Points

Usually comments are used for explaining your work though rather than hiding alternative methods as your code would get very cluttered otherwise! :)

Rhys Kearns
Rhys Kearns
4,976 Points
Rhys Kearns
Rhys Kearns
4,976 Points 
<head>
    <meta charset="utf-8">
    <title>
        Benji Beck 
    </title>
</head>

<body>
    <header>
        <nav>
            <a href="benjibeck.html">
                Home |
            </a>
            <a href="about.html">
                About |
            </a>
            <a href="contact.html">
                Contact
            </a>
            <h1>
                Benji Beck
            </h1>
        </nav>
    </header>
    <section>
        <p>Gallery coming soon</p>
    </section>
    <footer>
        <a href="//http:linkedin.com/in/benjibeck">
            <img src="C:\Users\Benji\Desktop\portfolio\img\linkedinlogo.png" alt="LinkedIn Logo">
        </a> 
        <a href="//http:facebook.com/beck.benji">
            <img src="C:\Users\Benji\Desktop\portfolio\img\facebooklogo.png" alt="Facebook Logo">
        </a>
        <a href="//http:twitter.com/benji_beck">
            <img src="C:\Users\Benji\Desktop\portfolio\img\twitterlogo.png" alt="Twitter Logo">
        </a> 
        <br><p>&copy; 2017 Benji Beck</p>
    </footer>
</body>
</html>

Not sure why you have commented stuff out and left it there??? Here is how i would indent it all so its easier to read

Benji Beck
Benji Beck
5,238 Points

Hi Rhys, I wasn't sure which set of syntax to go with, so I tried to hide it through comments and keep it as a reference until I figured things out. Your revisions look way cleaner, thanks for your help.

Benji Beck
Benji Beck
5,238 Points

Appreciate you showing clean code Rhys, I was able to understand a bit more and see where I went wrong when reviewing and making the necessary revisions.

Benji Beck
Benji Beck
5,238 Points
Benji Beck
Benji Beck
5,238 Points

Great, I could see how that would clutter things up in comparison with the code Rhys provided and also be difficult for others to read and understand. I'll brush up on the points covered and look forward to adding external CSS elements. Thanks Rhys and Steven for your help and the excellent tips!