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 Sophie Labrey
Sophie Labrey
7,894 Points

Stray start tag <tfoot>

Hey, when running my HTML through a validator, it's telling me that I have a stray start tag with the <tfoot> and then the following <tr> <td> and so on. I read it's because the element(s) are placed out of content, but I cannot see any unclosed tags, or obvious errors as to why this is happening. Here is my HTML, it would be awesome if somebody could help me in figuring this out, as I have tried numerous times to fix it and it still throws an error in the validator: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE CODE REVIEW</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <div class="container">

    <h1 class="title-header">THE CODE REVIEW</h1>

      <form action="index.html" method="host">

        <div class="header">
          <h2 class="news-header">Signup for our Newsletter</h2>
          <p>Get the latest news on how your code is doing right in your inbox</p>
        </div>

        <hr>
        <hr class="light">

          <fieldset>
            <legend>Contact Information</legend>

            <div class="contact-information">
              <label for="name">Full Name</label>
              <input type="text" id="name" name="user_name" placeholder="Required *" required="required">
            </div>

            <div class="contact-information">
              <label for="email">Email Address</label>
              <input type="text" id="email" name="user_email" placeholder="Required *" required="required">
            </div>

            <div class="contact-information">
              <label for="number">Phone Number</label>
              <input type="number" id="number" name="user_number" placeholder="01-234-5678">
            </div>

            <div class="contact-information">
              <label for="address">Street Address</label>
              <input type="text" id="address" name="user_address" placeholder="Ice Cream Avenue">
            </div>

            <div class="contact-information">
              <label for="city">City</label>
              <input type="text" id="city" name="user_city" placeholder="Manchester">
            </div>

            <div class="contact-information">
              <label for="state">State</label>
                <select class="select-styling" id="state" name="user_state">
                <option value="choose_state">Choose State</option>
                <optgroup label="North">
                  <option value="new_york">New York</option>
                  <option value="conneticut">Conneticut</option>
                  <option value="new_jersey">New Jersey</option>
                  <option value="iowa">Iowa</option>
                  <option value="kansas">Kansas</option>
                </optgroup>
                <optgroup label="East">
                  <option value="florida">Florida</option>
                  <option value="georgia">Georgia</option>
                  <option value="south_carolina">South Carolina</option>
                  <option value="virginia">Virginia</option>
                  <option value="maryland">Maryland</option>
                </optgroup>
                <optgroup label="South">
                  <option value="texas">Texas</option>
                  <option value="arkansas">Arkansas</option>
                  <option value="louisiana">Louisiana</option>
                  <option value="oklahoma">Oklahoma</option>
                  <option value="tennesee">Tennesee</option>
                </optgroup>
                <optgroup label="West">
                  <option value="california">California</option>
                  <option value="colorado">Colorado</option>
                  <option value="idaho">Idaho</option>
                  <option value="alaska">Alaska</option>
                  <option value="montana">Montana</option>
                </select>
              </div>
              <div class="contact-information">
                <label for="zip">Zip Code</label>
                <input type="number" id="zip" name="user_zip" placeholder="12345">
              </div>
        </fieldset>

          <hr class="light">

        <fieldset class="newsletter">
        <legend>Newsletter</legend>
            <label class="copy">Select the newsletters you would like to receive</label><br>
                <input type="checkbox" id="html_news" value="yes_html" name="receive_news">
                <label for="html_news" class="choice">HTML News</label><br>
                <input type="checkbox" id="css_news" value="yes_css" name="receive_news">
                <label for="css_news" class="choice">CSS News</label><br>
                <input type="checkbox" id="javascript_news" value="yes_javascript" name="receive_news">
                <label for="javascript_news" class="choice">Javascript News</label><br>

            <label class="copy">Newsletter format</label><br>
              <input type="radio" id="html_format" value="html_format" name="newsletter_format">
              <label for="html_format" class="choice">HTML</label><br>
              <input type="radio" id="text_format" value="text_format" name="newsletter_format">
              <label for="text_format" class="choice">Plain Text</label><br>

            <label for="other" class="copy">Other topics you'd like to hear about</label><br>
            <textarea id="other" name="other_topics"></textarea>

        </fieldset>

          <button type="submit">Sign Up</button>

            <div class="footer">
              <tfoot>
                <tr>
                  <td colspan="3">Copyright The Code Review</td>
                </tr>
              </tfoot>
            </div>
        </form>
  </div>
 </body>
</html>

1 Answer

Armin Kadic
Armin Kadic
16,242 Points
Armin Kadic
Armin Kadic
16,242 Points

From a quick check I figured that this might be the problem:

"The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements."

I got this from w3schools, here is the link: https://www.w3schools.com/TAGS/tag_tfoot.asp

I did the check with a HTML validator, it is really helpful. Try it out! https://validator.w3.org/#validate_by_input

I hope this will solve your problem :)

Sophie Labrey
Sophie Labrey
7,894 Points

Hey, I totally didn't spot that I was using a table property in a form. Thanks for pointing that out, I think I jumped the gun a little when building my project!

Armin Kadic
Armin Kadic
16,242 Points
Armin Kadic
Armin Kadic
16,242 Points

Don't worry, it happens to all of us, all the time :) I'm glad I could help!