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 Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I don't understand Fatal Error " Empty document, with no root element". HTML Validator.

In the HTML validator I get an error of Empty document, with no root element displayed every time I check my mark up.

10 Answers

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points 
<!doctype html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>THE CODE REVIEW</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/grey_Poupon.css"/>
</head>

<body>
<div id="wrap">

  <header class="main-header">

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

    <div class="main-head-info">

      <h3 class="sub-title">Signup for our newsletter</h3>

      <p>Get the latest news on how your code is doing in your inbox</p>

    </div>

  </header>

  <div class="contains-1" "clearfix">

    <h3 class="sub-title" id="con-info">Contact Information</h3>

    <div id="box1" "clearfix">

      <label for="fullname" class="lab">Full Name</label>
      <input type="text" id="fullname" name="fullname" placeholder="required" required="required"/>
      <label for="email"  class="lab" >Email Address</label>
      <input type="text" id="email" name="email" placeholder="required" required="required"/>
      <label for="phone" class="lab">Phone</label>
      <input type="text" id="phone" name="phone" placeholder="required" required="required"/>
      <label for="address" class="lab">Street Address</label>
      <input type="text" id="address" name="address" placeholder="required" required="required" class="data"/>
      <label for="city" class="lab">City</label>
      <input type="text" id="city" name="City" placeholder="required" required="required" class="data"/>
      <label for="state" class="lab">State</label>

      <div id="selButton" "clearfix">

        <select name="states">
          <option value="choose state">Choose State</option>
          <option value="alabama">Alabama</option>
          <option value="alaska">Alaska</option>
          <option value="arizona">Arizona</option>
          <option value="arkansas">Arkansas</option>
          <option value="california">California</option>
          <option value="colorado">Colorado</option>
          <option value="delaware">Delaware</option>
          <option value="florida">Florida</option>
          <option value="georgia">Georgia</option>
          <option value="hawaii">Hawaii</option>
          <option value="idaho">Idaho</option>
          <option value="illinois">Illinois</option>
          <option value="indiana">Indiana</option>
          <option value="iowa">Iowa</option>
          <option value="kansas">Kansas</option>
          <option value="kentucky">Kentucky</option>
          <option value="louisiana">Louisiana</option>
          <option value="maine">Maine</option>
          <option value="maryland">Maryland</option>
          <option value="massachusetts">Massachusetts</option>
          <option value="michigan">Michigan</option>
          <option value="minnesota">Minnesota</option>
          <option value="mississippi">Mississippi</option>
          <option value="missouri">Missouri</option>
          <option value="montana">Montana</option>
          <option value="nebraska">nebraska</option>
          <option value="nevada">Nevada</option>
          <option value="new hampshire">New Hampshire</option>
          <option value="new jersey">New Jersey</option>
          <option value="new mexico">New Mexico</option>
          <option value="new york">New York</option>
          <option value="north carolina">North Carolina</option>
          <option value="north dakota">North Dakota</option>
          <option value="ohio">Ohio</option>
          <option value="oklahoma">Oklahoma</option>
          <option value="oregon">Oregon</option>
          <option value="pennsylvania">Pennsylvania</option>
          <option value="rhode island">Rhode Island</option>
          <option value="south carolina">South Carolina</option>
          <option value="tennessee">Tennessee</option>
          <option value="texas">Texas</option>
          <option value="utah">Utah</option>
          <option value="vermont">Vermont</option>
          <option value="virginia">Virginia</option>
          <option value="washington">Washington</option>
          <option value="west virginia">West Virginia</option>
          <option value="wisconsin">Wisconsin</option>
          <option value="wyoming">Wyoming</option>
        </select>

      </div>

      <label for="zip" class="lab">Zip Code</label>
      <input type="text" id="zip" name="zip" placeholder="required" required="required"/>

    </div>

  </div>

  <div class="contains-2">

    <h3 class="sub-title" id="sub-2">Pamflet Selection</h3>

     <fieldset class="field1">

           <legend><p>Select the newsletters you would like to recieve.</p></legend>

      <label for="html" class="ch">HTML News</label>
      <input type="checkbox" id="html" name="html"/>
      <label for="css" class="ch">CSS News</label>
      <input type="checkbox" id="css" name="css"/>
      <label for="js" class="ch">Javascript News</label>
      <input type="checkbox" id="js" name="js"/>

    </fieldset>

    <fieldset class="field2">

      <legend> Newsletter format</legend>

      <div class="rad1">

        <label for="htmlrad">HTML</label>
        <input type="radio" id="htmlrad" name="radio"/>

      </div>

      <div class="rad2">

        <label for="plainrad">Plain Text</label>
        <input type="radio" id="plainrad" name="radio"/>

      </div>

    </fieldset>

    <div id="codeSnip">

      <label for="code">Code Snippet</label>

      <p id="codep">Enter a code snippet if you wish for it to be evaluated</p>

      <textarea name="snippet" id="code"  cols="45"  rows="8"></textarea>

      <input type="button" id="cancel" name="cancel" value="Cancel"/>

      <input type="button" id="enter" name="enter" value="Enter"/>

    </div>

  </div>

  <footer class="main-footer">

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

    <textarea name="user-con" id="user-con" cols="45" rows="8"></textarea>

    <input type="submit" name="submit" id="submit" value="Sign Up"/>

    <h5 class="copyright">&copy; The Code Review</h5>

  </footer>

</div>
</body>
</html>


```html
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

There is something wrong with your "clearfix" - To have two classes to an <div> should look like this:

         <div class="contains-1 clearfix">

And not like this:

         <div class="contains-1" "clearfix">

Same goes for id.

Which html validator are you using to check the code?

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

w3c

Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

Are you still getting the error? - if yes try copy paste your code in "validate by input".

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I didnt check yet I have been fixing my code ...I will let you know some time today perhaps.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I didnt check yet I have been fixing my code ...I will let you know some time today perhaps.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I fixed my code and I still keep getting that error when I validate my code.. I will show you once again my mark up.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points 
<!DOCTYPE HTML>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>THE CODE REVIEW</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/grey_Poupon.css"/>
</head>

<body>

<div id="wrap">

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

  <header class="main-header">



    <div class="main-head-info">

      <h3 class="sub-title">Signup for our newsletter</h3>

      <p>Get the latest news on how your code is doing in your inbox</p>

    </div>

  </header>

  <div class="contains-1" "clearfix">

    <h3 class="sub-title" id="con-info">Contact Information</h3>

    <div id="box1" class="clearfix">

      <label for="fullname" class="lab">Full Name</label>
      <input type="text" id="fullname" name="fullname" placeholder="required" required="required"/>
      <label for="email"  class="lab" >Email Address</label>
      <input type="text" id="email" name="email" placeholder="required" required="required"/>
      <label for="phone" class="lab">Phone</label>
      <input type="text" id="phone" name="phone" placeholder="required" required="required"/>
      <label for="address" class="lab">Street Address</label>
      <input type="text" id="address" name="address" placeholder="required" required="required" class="data"/>
      <label for="city" class="lab">City</label>
      <input type="text" id="city" name="City" placeholder="required" required="required" class="data"/>
      <label for="state" class="lab">State</label>



        <select name="states">
          <option value="choose state">Choose State</option>
          <option value="alabama">Alabama</option>
          <option value="alaska">Alaska</option>
          <option value="arizona">Arizona</option>
          <option value="arkansas">Arkansas</option>
          <option value="california">California</option>
          <option value="colorado">Colorado</option>
          <option value="delaware">Delaware</option>
          <option value="florida">Florida</option>
          <option value="georgia">Georgia</option>
          <option value="hawaii">Hawaii</option>
          <option value="idaho">Idaho</option>
          <option value="illinois">Illinois</option>
          <option value="indiana">Indiana</option>
          <option value="iowa">Iowa</option>
          <option value="kansas">Kansas</option>
          <option value="kentucky">Kentucky</option>
          <option value="louisiana">Louisiana</option>
          <option value="maine">Maine</option>
          <option value="maryland">Maryland</option>
          <option value="massachusetts">Massachusetts</option>
          <option value="michigan">Michigan</option>
          <option value="minnesota">Minnesota</option>
          <option value="mississippi">Mississippi</option>
          <option value="missouri">Missouri</option>
          <option value="montana">Montana</option>
          <option value="nebraska">nebraska</option>
          <option value="nevada">Nevada</option>
          <option value="new hampshire">New Hampshire</option>
          <option value="new jersey">New Jersey</option>
          <option value="new mexico">New Mexico</option>
          <option value="new york">New York</option>
          <option value="north carolina">North Carolina</option>
          <option value="north dakota">North Dakota</option>
          <option value="ohio">Ohio</option>
          <option value="oklahoma">Oklahoma</option>
          <option value="oregon">Oregon</option>
          <option value="pennsylvania">Pennsylvania</option>
          <option value="rhode island">Rhode Island</option>
          <option value="south carolina">South Carolina</option>
          <option value="tennessee">Tennessee</option>
          <option value="texas">Texas</option>
          <option value="utah">Utah</option>
          <option value="vermont">Vermont</option>
          <option value="virginia">Virginia</option>
          <option value="washington">Washington</option>
          <option value="west virginia">West Virginia</option>
          <option value="wisconsin">Wisconsin</option>
          <option value="wyoming">Wyoming</option>
        </select>



      <label for="zip" class="lab">Zip Code</label>
      <input type="text" id="zip" name="zip" required="required"/>

    </div>

  </div>

  <div class="contains-2">

    <h3 class="sub-title" id="sub-2">Pamflet Selection</h3>

     <fieldset class="field1">

           <legend><p>Select the newsletters you would like to recieve.</p></legend>

      <label for="html" class="ch">HTML News</label>
      <input type="checkbox" id="html" name="html"/>
      <label for="css" class="ch">CSS News</label>
      <input type="checkbox" id="css" name="css"/>
      <label for="js" class="ch">Javascript News</label>
      <input type="checkbox" id="js" name="js"/>

    </fieldset>

    <fieldset class="field2">

      <legend> Newsletter format</legend>

      <div class="rad1">

        <label for="htmlrad">HTML</label>
        <input type="radio" id="htmlrad" name="radio"/>

      </div>

      <div class="rad2">

        <label for="plainrad">Plain Text</label>
        <input type="radio" id="plainrad" name="radio"/>

      </div>

    </fieldset>

    <div id="codeSnip">

      <label for="code">Code Snippet</label>

      <p id="codep">Enter a code snippet if you wish for it to be evaluated</p>

      <textarea name="snippet" id="code"  cols="45"  rows="8"></textarea>

      <input type="button" id="cancel" name="cancel" value="Cancel"/>

      <input type="button" id="enter" name="enter" value="Enter"/>

    </div>

  </div>

  <footer class="main-footer">

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

    <textarea name="user-con" id="user-con" cols="45" rows="8"></textarea>

    <input type="submit" name="submit" id="submit" value="Sign Up"/>

    <h5 class="copyright">&copy; The Code Review</h5>

  </footer>

</div>
</body>
</html>


```html
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

You still need to change this line:

          <div class="contains-1" "clearfix">

To this:

         <div class="contains-1 clearfix">

Did you remember to try and copy paste your html into link

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

AHHHH I c i wasn't sure if there had to be a comma separating the two are the way I did it or the way u did it I was confused ... thanks for letting me know how to apply classes correctly to my code .. I will fix my code and tell you what happens in a few .

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

your suggestion did not work ... but I tried class= "name" "name"> that seems to work and throw things back into order .. the other way you suggested I guess is not the proper syntax.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

also I am still getting that same error which is bizarre , because this is the first time I am having a problem like so with my mark up .. it seems so peculiar.

Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

Can you upload a screenshot of how you do it?

Because it working fine for me if I just copy paste the code in the validator.

http://imgur.com/clpXuTv