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 nicholas maddren
nicholas maddren
12,793 Points

A question about lists

Can I put anything inside the <li> tag?

Here is an example of some html:

<li class="li-toggle">
            <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
            <div class="panel">
             <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="automatic-checkbox" class="label-checkbox">Automatic</label>
             <input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="manual-checkbox" class="label-checkbox">Manual</label>
             <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
            </div>
          </li>

Or should all of that html be within sections?

Thanks

4 Answers

Marko Koron
Marko Koron
20,658 Points
Marko Koron
Marko Koron
20,658 Points

Since it seems like a part from a form have take in consideration using a fieldset tag instead?

Lucas Krause
Lucas Krause
19,924 Points

For me it doesn't seem to be part of a form since the <input>s don't have any name attributes and hence aren't posted when submitting the form.

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

The specification here : http://www.w3.org/TR/html5/grouping-content.html#the-li-element Check the Content model section.

You must decide if you use h4 or h3 :) on line 2

Lucas Krause
Lucas Krause
19,924 Points
Lucas Krause
Lucas Krause
19,924 Points

The markup is perfectly valid (except that you are opening a <h4> but closing a <h3>).

Validated markup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <ul>
            <li class="li-toggle">
                <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
                <div class="panel">
                    <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
                    <label for="automatic-checkbox" class="label-checkbox">Automatic</label>
                    <input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
                    <label for="manual-checkbox" class="label-checkbox">Manual</label>
                    <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
                    <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
                </div>
            </li>
        </ul>
    </body>
</html>
Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

Fieldset tag is your key