HTML

Jack Hawkins
Jack Hawkins
Front End Web Development Techdegree Student 5,973 Points

can someone help with my flex as I cant have a div inside the <legend>

<div class="news">

  <legend class="headnews"> Newsletter </legend>

  <legend>Select the newsletters you would like to recieve</legend>
  <div class="flex">
    <fieldset>
      <div class="flex">
        <input type="checkbox" id="htmlnews">
        <label style="" class="checkbox" for="htmlnews">HTML News</label>
      </div>
      <div class="flex">
        <input type="checkbox" id="cssnews">
        <label class="checkbox" for="cssnews">CSS News</label>
      </div>

      <div class="flex">
        <input type="checkbox" id="javanews">
        <label class="checkbox" for="javanews">Javascript News</label>
      </div>
    </fieldset>

    <legend> Newsletter format</legend>

    <fieldset>
      <div class="flex">
        <input type="radio" name="check" id="html" value="html">
        <label class="checkbox" for="html">HTML</label>
      </div>
      <div class="flex">
        <input type="radio" name="check" id="plaintext" value="plaintext">
        <label class="checkbox" for="plaintext">Plain text</label>
      </div>
    </fieldset>

    <label class="textarea" for="textarea"> Other topics you'd like to hear about</label>

    <textarea id="textarea" name="message"></textarea>

    <input class="sign" type="submit" value="Sign Up">
  </div>
.flex{
  width:60%;
  display:flex;
  flex-direction: row
}
Rich Donnellan
Rich Donnellan
Treehouse Moderator 25,661 Points

Question updated with code formatting. Check out the Markdown Cheatsheet below the Add an Answer submission for syntax examples.

What are you trying to accomplish?

Chidiebere Ekennia
Chidiebere Ekennia
4,588 Points

Hello Jack. Please could you be a bit more specific on what you want the flex to do?

3 Answers

Chidiebere Ekennia
Chidiebere Ekennia
4,588 Points

Alright Jack, glad you got back to me. There's nothing wrong with the "flex" class you've been using. However, the reason for that error is because your HTML is "semantically" wrong. Semantics here refers to it's meaning, what the code means, or should mean. A "legend" element is like a title that defines a block of inputs. Eg: Personal details for inputs like: Name, Age, Sex, etc. A legend should only come after a "fieldset" element is defined, just like tables have captions. To correct your code, simply ensure that all "legend" elements are only ever placed after the opening tag of a "fieldset" element.

Example:

<fieldset>

 <legend>Personal Details</legend>
 ....

</fieldset>

Any legend element that is outside a fieldset element is semantically wrong.

Jack Hawkins
Jack Hawkins
Front End Web Development Techdegree Student 5,973 Points

hi there.

I used flex to make this form however when I run It thought the HTML validator. it comes up with this and i cant find a way round it.

Error: Element legend not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

From line 53, column 4; to line 53, column 28

ews">↩↩ <legend class="headnews"> Newsl

Contexts in which element legend may be used: As the first child of a fieldset element. Content model for element div: If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. If the element is not a child of a dl element: flow content.