| Code As | Displays As |
|
<ol> <li>First Item</li> <li>Second Item</li> </ol> |
|
Unordered or Bulleted Lists
The <ul> tag can also have a type=shape attribute. The syntax for this attribute is:
<ul type="circle">. The type attribute can also appear in the <li> tag, making it possible
for each item in the list to have a different bullet, e.g., <li type="circle">. Types include: circle, disc and square. Example:
Definition Lists
Nested Lists
Create a web page with an ordered list showing your class schedule (just periods 1-6 . . .)
and an unordered list showing your favorite after-school activities. Create a nested list on the same web page for extra credit. (See my example.)
Bulleted lists begin with a <ul> tag (for unordered list). Each item in the list begins
with a <li> tag (for list item) and ends with a </li> tag. A </ul> tag ends the list. Example:Code As Displays As
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
Code As Displays As
<ul>
<li type="square">First Item</li>
<li type="disc">Second Item</li>
</ul>
Definition lists begin with a <dl> tag (for definition list). Each item in the list begins
with a <dt> tag (for definition term) and ends with a </dt> tag. In addition, each item in the list also has a
<dd> tag (for definition) and ends with a </dd> tag. A </dl> tag ends the list. Example:Code As Displays As
<dl>
<dt>http</dt>
<dd>hypertext transport protocol</dd>
<dt>html</dt>
<dd>hypertext markup language</dd>
</dl>
Lists can be nested inside of other lists. Example:
Code As Displays As
<ol>
<li>First Item</li>
<ul>
<li>First Sub-Item</li>
<li>Second Sub-Item</li>
</ul>
<li>Second Item</li>
</ol>