HTML for Education section of Resume/CV site

[Alpha1980]

Can anybody advise if I've marked-up the below code correctly and semantically?

I've been playing with this for too long and could use some fresh eyes to help refocus.

Thanks in advance.

    <form>
        <ol>
            <li>
            	<fieldset><legend>Institution</legend>
                <ol>
                    <li><label>Name:</label><input type="text" /></li>
                    <li><label>Duration:</label><input type="text" /></li>
                    <li>
                    	<ol>
            		     <li>
                                <fieldset><legend>Qualifications</legend>
                                    <ol>
                                        <li><input type="text" /></li>
                                        	<li>
                                                <fieldset><legend>Subjects</legend>
                                                    <ol>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                    </ol>
                                                </fieldset>
                            		   </li>
                                    </ol>
                                </fieldset>
                            </li>
            		    <li>
                                <fieldset><legend>Qualifications</legend>
                                    <ol>
                                        <li><input type="text" /></li>
                                        	<li>
                                                <fieldset><legend>Subjects</legend>
                                                    <ol>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                    </ol>
                                                </fieldset>
                            				</li>
                                    </ol>
                                </fieldset>
                            </li>
            				<li>
                                <fieldset><legend>Qualifications</legend>
                                    <ol>
                                        <li><input type="text" /></li>
                                        	<li>
                                                <fieldset><legend>Subjects</legend>
                                                    <ol>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                        <li><input type="text" /></li>
                                                    </ol>
                                                </fieldset>
                            		</li>
                                    </ol>
                                </fieldset>
                            </li>
                    	</ol>
                    </li>
                </ol>
                </fieldset>
            </li>
        </ol>
    </form>

[Mittineague]

The thing that strikes me right off is the use of nested lists. This might be OK, but I have never seen it before. If you are using lists to style the form, IMHO it would be better to keep the form "clean" and style it using CSS.

Is there a valid reason for using nested lists?

[Alpha1980]

The thing that strikes me right off is the use of nested lists. This might be OK, but I have never seen it before. If you are using lists to style the form, IMHO it would be better to keep the form "clean" and style it using CSS.

Is there a valid reason for using nested lists?

Thanks for replying.

The only reason for the nested lists is the semantics of subgrouping form elements.

There is a Sitepoint article I used to help design this form that uses nested lists to subgroup form elements:

http://www.sitepoint.com/article/fan...-design-css/6/

[zcorpan]

The only reason for the nested lists is the semantics of subgrouping form elements.

That's what the fieldsets are for...

There is a Sitepoint article I used to help design this form that uses nested lists to subgroup form elements:

Seemingly for styling purposes.

[Alpha1980]

Seemingly for styling purposes.

The nested-lists are semantic too though, aren't they?

Surely nobody would use lists for styling if they weren't also semantic.

[JsD2K]

You can validate code at validator.w3.org

Also just off the bat first thing I noticed was

<form>

The form tag requires an action and You should use either a POST or a GET method.

[Mittineague]

According to the article http://www.sitepoint.com/print/fancy-form-design-css/

However, you should see one glaring addition: inside the fieldset [64] elements is an ordered list whose list items wrap around each of the form element/label pairs that we're using.

The reason for this addition? We need some extra markup in order to allow for all of the styling that we'll do to our forms in this chapter. There are just not enough styling hooks in the standard fieldset-label structure to allow us to provide robust borders, background colors, and column alignment.

There are a number of superfluous elements that we could add to the form that would grant us the extra styling hooks. We could move the form elements inside their label [65] elements and wrap the label [66] text in a span [67], or wrap a div [68] around each form element/label pair. However, none of those choices would really contribute anything to the markup other than its presence.

The beauty of using an ordered list is that it adds an extra level of semantics to the structure of the form, and also makes the form display quite well in the absence of styles (say, on legacy browsers such as Netscape 4, or even simple mobile devices).
.......
If you're vehemently opposed to the inclusion of an ordered list inside your form.markup, you can easily substitute it for some other wrapper element; all you need is one extra container around each form element/label pair in order to style your forms any way you want.

So I guess there's nothing that wrong with using lists to get a style that may be difficult if not impossible to without them. But if your form isn't going to be "fancy" you don't need them. I'm not sure I agree with the statement that you "need an extra container around them". I get the feeling that it's just easier to get satisfactory cross-browser "fancy" styling by using them. I'll admit styling forms can be very frustrating, but then again, I'm not a CSS guru. I don't know if I'd worry about Netscape 4, but I guess if you want to have some semblance of styling in non-style supporting mobile devices, then this technique has merit. As long as it validates it should be OK.