Sunday, April 11, 2010
Nested Lists
Posted by devlevis | Sunday, April 11, 2010 | Category:
free html course,
html tricks,
learn html,
nested lists in html
|
You can nest lists of the same or different types. For example, suppose you have a
bulleted list and need a numbered list beneath one of the items, as shown:
✦ Send us a letter detailing the problem. Be sure to include the following:
1. Your name
2. Your order number
3. Your contact information
4. A detailed description of the problem
In such a case, you would nest an ordered list inside an unordered one, as shown in
the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example Definition List</title>
</head>
<body>
<ul style="list-style: disc;">
<li>Send us a letter detailing the problem. Be sure to
include the following:</li>
<ol style="list-style: decimal;"> <li>Your name.</li>
<li>Your order number.</li>
<li>Your contact information.</li>
<li>A detailed description of the problem.</li>
</ol>
</ul>
</body>
</html>
The output of the code is shown in Figure ."http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example Definition List</title>
</head>
<body>
<ul style="list-style: disc;">
<li>Send us a letter detailing the problem. Be sure to
include the following:</li>
<ol style="list-style: decimal;"> <li>Your name.</li>
<li>Your order number.</li>
<li>Your contact information.</li>
<li>A detailed description of the problem.</li>
</ol>
</ul>
</body>
</html>
close tag of the parent’s item and before any other tags in the parent list. It is also
formatted (indented) to make it easier to identify in the code. Using this method, you
can nest any list within any other list.
Subscribe to:
Post Comments (Atom)
Currently have 0 comments: