HTML offers authors several mechanisms for specifying lists of information. All lists must
contain one or more list elements. Lists may contain: unordered information, ordered
information and definitions. (from http://www.w3.org/TR/html4/struct/lists.html#edef-UL)
I think lists are the most important elements in HTML: semantically, there are so many objects that are pure lists. It is also a good practice to use ul
or dl
to group input fields and labels in form
too.
Someone will markup form using paragraphs:
<form action="" method="post">
<fieldset>
<p>
<label>
Full Name:
<input type="text" name="name" />
</label>
</p>
<p>
<label>
Password:
<input type="password" name="password" />
</label>
</p>
</fieldset>
<fieldset>
<p>
<label>
Occupation:
<input type="text" name="occupation" />
</label>
</p>
<p>
<label>
Location:
<input type="text" name="location" />
</label>
</p>
</fieldset>
<p>
<input type="submit" value="Submit" />
</p>
</form>
And someone will markup it using lists (and this looks very organic in my opinion):
<form action="" method="post">
<fieldset>
<dl>
<dt><label for="name">Full Name:</label></dt>
<dd><input id="name" type="text" name="name" /></dd>
<!-- <dd class="error">Some errors/validation warnings</dd> -->
<dt><label for="password">Password:</label></dt>
<dd><input id="password" type="password" name="password" /></dd>
<!-- <dd class="note">Some notes about the field above</dd> -->
</dl>
</fieldset>
<fieldset>
<dl>
<dt><label for="occupation">Occupation:</label></dt>
<dd><input id="occupation" type="text" name="occupation" /></dd>
<dt><label for="location">Location:</label></dt>
<dd><input id="location" type="text" name="location" /></dd>
</dl>
</fieldset>
<p>
<input type="submit" value="Submit" />
</p>
</form>
Forms are lists (lists of fields, grouped data), because they have uniform and repetitive structure:
INPUT_1
INPUT_2
...
INPUT_N