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

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

HTML validation code errors, help understanding where I have gone wrong please.

Hello,

I have run this code through the HTML validator and have 3 errors, but I do not understand them to be able to fix my code accordingly. I have played around with it a bit, but do not want to ruin it. I have put *** next to the section of HTML where the errors are. If anyone was able to read this and explain where I have gone it would be appreciated.

Error: End tag div seen, but there were open elements. From line 84, column 3; to line 84, column 8 et>↩ ↩ </div>↩ ↩

Error: Unclosed element form. From line 28, column 2; to line 28, column 51 n</h2>↩ ↩ <form action="https://example.com/" method="post">↩ ↩ <

Error: Stray end tag form. From line 127, column 2; to line 127, column 8 </div>↩ ↩ </form>↩ ↩ <f Document checking completed.

Source

<!DOCTYPE html>↩ <html lang ="en">↩ ↩ <head>↩ <meta charset="utf-8">↩ <title>Registration Form</title>↩ <meta name="viewport" content="width=device-width, initial-scale=1">↩ <link rel="stylesheet" href="base.css">↩ <link rel="stylesheet" href="nav.css">↩ <link rel="stylesheet" href="normalize.css">↩ <link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'>↩ </head>↩ ↩ <body>↩ <div class="wrapper">↩ ↩ <header>↩ <h1>THE CODE REVIEW</h1>↩ <h2>Signup for our newsletter</h2>↩ <p>Get the latest news on how your code is doing right in your inbox</p>↩ </header> ↩ ↩ <div class="container">↩ ↩ <div id="contact-information"> ↩ <h2>Contact Information</h2>↩ ↩ **<form action="https://example.com/" method="post">↩ ↩ <fieldset style="border:none">↩ <legend>Contact-information</legend>↩ ↩ <div>↩ <label for="name">Name:</label>↩ <input type="text" id="name" name="name" placeholder="Required" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">↩ <span id="name-format" class="help">Format: first name last name</span>↩ </div>↩ ↩ <div>↩ <label for="email">Email Address:</label>↩ <input type="email" id="email" name="user_email-address" placeholder="Required">↩ </div>↩ ↩ <div>↩ <label for="home-number">Home Phone Number:</label>↩ <input type="tel" id="home-number" name="user_homeNumber">↩ </div>↩ ↩ <div>↩ <label for="mobile-number">Mobile Phone Number:</label>↩ <input type="tel" id="mobile-number" name="user_mobileNumber">↩ </div>↩ ↩ <div>↩ <label for="address">Street Address:</label>↩ <input type="text" id="address" name="user_address">↩ </div>↩ ↩ <div>↩ <label for="city">City:</label>↩ <input type="text" id="city" name="user_city">↩ </div>↩ ↩ <div class="state">↩ <label for="state">State:</label><br>↩ ↩ <select id="state" name="user_state">↩ <option value="Choose-state">Choose State</option>↩ <option value="Mississippi">Mississippi</option>↩ <option value="Washington">Washington</option>↩ <option value="Oklahoma">Oklahoma</option>↩ <option value="Texas">Texas</option>↩ <option value="Virgina">Virgina</option> ↩ </select>↩ </div>↩ ↩ <div id="zip">↩ <label for="zip-code">Zip Code:</label>↩ <input type="text" id="zip-code" name="user_zip-code">↩ </div>↩ ↩ </fieldset>↩ ↩ *</div>↩ ↩ <div id="newsletter-info">↩ <h2>Newsletter</h2>↩ <p>Select the newsletters you would like to recieve</p>↩ ↩ ↩ <fieldset style="border:none">↩ <legend>Newsletters</legend>↩ ↩ <input type="checkbox" id="HTML-News" value="HTML" name="user_HTML-news"><label class="news" for="HTML-News">HTML News</label><br>↩ <input type="checkbox" id="CSS-News" value="CSS" name="user_CSS-news"><label class="news" for="CSS-News">CSS News</label><br>↩ <input type="checkbox" id="Javascript-News" value="JAVA" name="user_java-news"><label class="news" for="Javascript-News">Javascript News</label><br>↩ <input type="checkbox" id="All-News" value="ALL" name="user_All-news"><label class="news" for="All-News">All of the above</label><br>↩ ↩ </fieldset>↩ ↩ </div>↩ ↩ <div id="format-info"> ↩ <h3>Newsletter Format</h3>↩ ↩ <fieldset style="border:none">↩ <legend>Buttons</legend>↩ <input type="radio" id="HTML" name="newsletter"><label for="HTML" class="html-newsletter">HTML</label><br>↩ <input type="radio" id="plain-text" name="newsletter"><label for="plain-text" class="plain-text-newsletter">Plain Text</label><br>↩ </fieldset>↩ ↩ </div>↩ ↩ <p>Other topics you'd like to hear about</p>↩ ↩ <div id="flex"> ↩ ↩ <textarea id="topics" name="user_topics"></textarea><br>↩ ↩ <button type="submit">Clear Text</button><br> ↩ <button type="submit">Sign Up</button><br>↩ </div> ↩ ↩ </div> ↩ </div>↩ ↩ **</form>↩ ↩ <footer>↩ <p><i>Copyright The Code Review</i></p>↩ </footer>↩ ↩ </body>↩ </html>

6 Answers

Steve Linn
Steve Linn
11,841 Points

you have a misplaced div tag -- on line 68 you close your div for contact information -- however you do not close the form until line 108. Move the closing div for contact information after line 108 ----- I moved it and tested it and it validates.

Cheers

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hi, I checked my css and did not need that div in the end and removed it. The code now validates. Thank you for taking the time to help me, I could not work out what was going on there. Do you understand why it was causing problems? I would love to know so I do not make the same mistake again. Thank you.

Steve Linn
Steve Linn
11,841 Points

You closed a containing div before you closed the form inside of the div. It's like closing a box and then having some stuff in the box and some stuff outside the box....HTML does not know what to do with the stuff outside the box.

A good strategy for writing good code is to write your opening and closing elements first, comment them then put the stuff that goes in the elements in next. Make sure to indent your code. Mistakes will happen. It's part of development

here's an example

I start by creating my outermost elements

<div> <!--container-->
</div><!--/container-->

then add in my inner elements

<div> <!--container-->
     <form><!--contact info form-->
            stuff goes here
     </form><!--/contact info form-->
</div><!--/container-->

1) Create outer elements open and close 2) Comment all elements 3) indent

Steve Linn
Steve Linn
11,841 Points

Hi Tracy - you have an extra div in your code right before you close your form. I'll let you find the other errors. A simple way to troubleshoot your code is to use a program like Brackets from Adobe (it's free) - it will highlight errors in the code. I would also recommend that when you build your code adding a comment to the closing div's to help you keep track of them. For example

<div class="wrapper"> 
..content here
</div><!-- /close wrapper -->

cheers!

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you for the tips. I have checked and labeled each closing div, but the same problems are showing in the validator, and as I'm learning, I do not yet understand where the mistakes are and what the validators comments mean. I have been unable to work it out myself, therefore if someone could please specifically tell me where I have gone wrong, it would be much appreciated.

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Updated code from trying to fix it with labeling divs

Error: End tag div seen, but there were open elements. From line 84, column 3; to line 84, column 8 et>↩ ↩ </div><!--/c

Error: Unclosed element form. From line 28, column 2; to line 28, column 51 n</h2>↩ ↩ <form action="https://example.com/" method="post">↩ ↩ <

Error: Stray end tag form. From line 124, column 3; to line 124, column 9 div> ↩ ↩ </form> ↩ </d

Document checking completed.

Source

<!DOCTYPE html>↩ <html lang ="en">↩ ↩ <head>↩ <meta charset="utf-8">↩ <title>Registration Form</title>↩ <meta name="viewport" content="width=device-width, initial-scale=1">↩ <link rel="stylesheet" href="base.css">↩ <link rel="stylesheet" href="nav.css">↩ <link rel="stylesheet" href="normalize.css">↩ <link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'>↩ </head>↩ ↩ <body>↩ <div class="wrapper">↩ ↩ <header>↩ <h1>THE CODE REVIEW</h1>↩ <h2>Signup for our newsletter</h2>↩ <p>Get the latest news on how your code is doing right in your inbox</p>↩ </header> ↩ ↩ <div class="container">↩ ↩ <div id="contact-information"> ↩ <h2>Contact Information</h2>↩ ↩ ***** <form action="https://example.com/" method="post">↩ ↩ <fieldset style="border:none">↩ <legend>Contact-information</legend>↩ ↩ <div>↩ <label for="name">Name:</label>↩ <input type="text" id="name" name="name" placeholder="Required" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">↩ <span id="name-format" class="help">Format: first name last name</span>↩ </div>↩ ↩ <div>↩ <label for="email">Email Address:</label>↩ <input type="email" id="email" name="user_email-address" placeholder="Required">↩ </div>↩ ↩ <div>↩ <label for="home-number">Home Phone Number:</label>↩ <input type="tel" id="home-number" name="user_homeNumber">↩ </div>↩ ↩ <div>↩ <label for="mobile-number">Mobile Phone Number:</label>↩ <input type="tel" id="mobile-number" name="user_mobileNumber">↩ </div>↩ ↩ <div>↩ <label for="address">Street Address:</label>↩ <input type="text" id="address" name="user_address">↩ </div>↩ ↩ <div>↩ <label for="city">City:</label>↩ <input type="text" id="city" name="user_city">↩ </div>↩ ↩ <div class="state">↩ <label for="state">State:</label><br>↩ ↩ <select id="state" name="user_state">↩ <option value="Choose-state">Choose State</option>↩ <option value="Mississippi">Mississippi</option>↩ <option value="Washington">Washington</option>↩ <option value="Oklahoma">Oklahoma</option>↩ <option value="Texas">Texas</option>↩ <option value="Virgina">Virgina</option> ↩ </select>↩ </div>↩ ↩ <div id="zip">↩ <label for="zip-code">Zip Code:</label>↩ <input type="text" id="zip-code" name="user_zip-code">↩ </div>↩ ↩ </fieldset>↩ ↩ ***** </div><!--/contact-inforamtion div -->↩ ↩ <div id="newsletter-info">↩ <h2>Newsletter</h2>↩ <p>Select the newsletters you would like to recieve</p>↩ ↩ ↩ <fieldset style="border:none">↩ <legend>Newsletters</legend>↩ ↩ <input type="checkbox" id="HTML-News" value="HTML" name="user_HTML-news"><label class="news" for="HTML-News">HTML News</label><br>↩ <input type="checkbox" id="CSS-News" value="CSS" name="user_CSS-news"><label class="news" for="CSS-News">CSS News</label><br>↩ <input type="checkbox" id="Javascript-News" value="JAVA" name="user_java-news"><label class="news" for="Javascript-News">Javascript News</label><br>↩ <input type="checkbox" id="All-News" value="ALL" name="user_All-news"><label class="news" for="All-News">All of the above</label><br>↩ ↩ </fieldset>↩ ↩ </div><!--newsletter-info div -->↩ ↩ <div id="format-info"> ↩ <h3>Newsletter Format</h3>↩ ↩ <fieldset style="border:none">↩ <legend>Buttons</legend>↩ <input type="radio" id="HTML" name="newsletter"><label for="HTML" class="html-newsletter">HTML</label><br>↩ <input type="radio" id="plain-text" name="newsletter"><label for="plain-text" class="plain-text-newsletter">Plain Text</label><br>↩ </fieldset>↩ ↩ </div><!--format-info div -->↩ ↩ <p>Other topics you'd like to hear about</p>↩ ↩ <div id="flex"> ↩ ↩ <textarea id="topics" name="user_topics"></textarea><br>↩ ↩ <button type="submit">Clear Text</button><br> ↩ <button type="submit">Sign Up</button><br>↩ </div> ↩ ↩ **** </form> ↩ </div><!--container div -->↩ ↩ ↩ </div><!--wrapper div -->↩ ↩ <footer>↩ <p><i>Copyright The Code Review</i></p>↩ </footer>↩ ↩ </body>↩ </html>

Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points

Hi. It will be much easy to analyse yor code if you put it inside tags as described in Markdown cheestsheet. Hard to parsing code and comments in one line. For html

     <p>This is code!</p>

For css

     .my_class{}

Thank you :)

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

<!DOCTYPE html> <html lang ="en">

<head> <meta charset="utf-8"> <title>Registration Form</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="nav.css"> <link rel="stylesheet" href="normalize.css"> <link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'> </head>

<body> <div class="wrapper">

<header>
    <h1>THE CODE REVIEW</h1>
    <h2>Signup for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
</header>   

<div class="container">

<div id="contact-information">  
    <h2>Contact Information</h2>

<form action="https://example.com/" method="post">

    <fieldset style="border:none">
        <legend>Contact-information</legend>

        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"  placeholder="Required" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
            <span id="name-format" class="help">Format: first name last name</span>
        </div>

        <div>
            <label for="email">Email Address:</label>
            <input type="email" id="email" name="user_email-address" placeholder="Required">
        </div>

        <div>
            <label for="home-number">Home Phone Number:</label>
            <input type="tel" id="home-number" name="user_homeNumber">
        </div>

        <div>
            <label for="mobile-number">Mobile Phone Number:</label>
            <input type="tel" id="mobile-number" name="user_mobileNumber">
        </div>

        <div>
            <label for="address">Street Address:</label>
            <input type="text" id="address" name="user_address">
        </div>

        <div>
            <label for="city">City:</label>
            <input type="text" id="city" name="user_city">
        </div>

        <div class="state">
            <label for="state">State:</label><br>

            <select id="state" name="user_state">
                <option value="Choose-state">Choose State</option>
                <option value="Mississippi">Mississippi</option>
                <option value="Washington">Washington</option>
                <option value="Oklahoma">Oklahoma</option>
                <option value="Texas">Texas</option>
                <option value="Virgina">Virgina</option>    
            </select>
        </div>

        <div id="zip">
            <label for="zip-code">Zip Code:</label>
            <input type="text" id="zip-code" name="user_zip-code">
        </div>

    </fieldset>

    </div><!--/contact-inforamtion div -->

    <div id="newsletter-info">
        <h2>Newsletter</h2>
            <p>Select the newsletters you would like to recieve</p>


        <fieldset style="border:none">
            <legend>Newsletters</legend>

                <input type="checkbox" id="HTML-News" value="HTML" name="user_HTML-news"><label class="news" for="HTML-News">HTML News</label><br>
                <input type="checkbox" id="CSS-News" value="CSS" name="user_CSS-news"><label class="news" for="CSS-News">CSS News</label><br>
                <input type="checkbox" id="Javascript-News" value="JAVA" name="user_java-news"><label class="news" for="Javascript-News">Javascript News</label><br>
                <input type="checkbox" id="All-News" value="ALL" name="user_All-news"><label class="news" for="All-News">All of the above</label><br>

        </fieldset>

        </div><!--newsletter-info div -->

    <div id="format-info">      
        <h3>Newsletter Format</h3>

    <fieldset style="border:none">
        <legend>Buttons</legend>
            <input type="radio" id="HTML" name="newsletter"><label for="HTML" class="html-newsletter">HTML</label><br>
            <input type="radio" id="plain-text" name="newsletter"><label for="plain-text" class="plain-text-newsletter">Plain Text</label><br>
    </fieldset>

    </div><!--format-info div -->

    <p>Other topics you'd like to hear about</p>

    <div id="flex"> 

            <textarea id="topics" name="user_topics"></textarea><br>

            <button type="submit">Clear Text</button><br>   
            <button type="submit">Sign Up</button><br>
    </div>  

    </form> 
</div><!--container div -->


</div><!--wrapper div -->

        <footer>
            <p><i>Copyright The Code Review</i></p>
        </footer>

</body>
</html>
Steve Linn
Steve Linn
11,841 Points

typically yes, this is because the form element acts as a container for all the values. For example - once someone fills out all of the information in the form and clicks "submit" an action will take place such as saving all the data to a database. The script that gets called will look for the form "action" method. So, for your example you would want all of those items to be available in the form element. If you did not have them in the same form - all of the fields you left out would not be passed through. Hope that helps