Sideway
output.to from Sideway
Draft for Information Only

Content

HTML List
   List item <li> in unordered list <ul> and ordered list <ol>
   List of term <dt> and definition <dd> in definition list <dl>
   List item <li> in directory list <dir> and menu list <menu>
   Nested list

HTML List

A simple list division in the HTML document can be defined by a <ul> element or a <ol> element. An unordered list is created and enclosed by open tag <ul> and end tag </ul>. An ordered list is created and enclosed by open tag <ol> and end tag <ol>.

A more complex definition list division in the HTML document can also be defined by a <dl> element. A definition list is created and enclosed by open tag <dl> and end tag </dl>.

Besides, there are also two deprecated elements, <dir> and <menu> to define  directory listing and menu listing. An directory list is created and enclosed by open tag <dir> and end tag </dir>. An menu list is created and enclosed by open tag <menu> and end tag </menu>.

List item <li> in unordered list <ul> and ordered list <ol>

A nested <li> element is used to define a list item in the list. The list content is held between the open tag <li> and the optional end tag </li>. List items are rendered as bulleted items in a unordered list <ul>. And list items are rendered as numbered items in a ordered list.

Code Sample of unordered list division:
<ul>
<li>
first list item
</li>
<li>
second list item
</li>
<li>
third list item
</li>
</ul>
HTML web page:
  • first list item
  • second list item
  • third list item
Code Sample of ordered list division:
<ol>
<li>
first list item
</li>
<li>
second list item
</li>
<li>
third list item
</li>
</ol>
HTML web page:
  1. first list item
  2. second list item
  3. third list item

List of term <dt> and definition <dd> in definition list <dl>

A nested <dt> element is first used to define the "term" of a list item in the list. The "term" is held between the open tag <dt> and the optional end tag </dt>. Then a nested <dd> element is used to define the "description" of a list item in the list. The "description" is held between the open tag <dt> and the optional end tag </dt>.
The "term" of the definition list items are rendered in a left column of the definition list. And  the "description" of the definition items are rendered in a right column of the definition list with a wider left indent. Besides the text content of <dt> element is restricted to inline content. While  the text content of <dd> element can be block-level content.

Code Sample of list of term <dt> and definition <dd> in definition list <dl>:
<dl>
<dt>
first term
</dt>
<dd>
first term description 1
</dd>
<dt>
second term
</dt>
<dd>
second term description 1
</dd>
<dd>
second term description 2
</dd>
<dt>
third term 1
</dt>
<dt>
third term 2
</dt>
<dd>
third description
</dd>
</dl>
HTML web page:
first term
first term description 1
second term
second term description 1
second term description 2
third term 1
third term 2
third description

List item <li> in directory list <dir> and menu list <menu>

The <dir> element and <menu> element are deprecated elements
A nested <li> element is also used to define a list item in the directory list <dir> and menu list <menu>. The list content is held between the open tag <li> and the optional end tag </li>. List items in directory list <dir> and menu list <menu> are rendered as bulleted items as in a unordered list <ul>.

Code Sample of directory list division:
<dir>
<li>
first directory item
</li>
<li>
second directory item
</li>
<li>
third directory item
</li>
</dir>
HTML web page:
  • first directory item
  • second directory item
  • third directory item
Code Sample of menu list division:
<menu>
<li>
first menu item
</li>
<li>
second menu item
</li>
<li>
third menu item
</li>
</menu>
HTML web page:
  • first menu item
  • second menu item
  • third menu item

Nested list

Different types of list can be nested together. The nested list is enclosed inside the corresponding list item element.

Code Sample of directory list division:
<dl>
<dt>
Nested List
</dt>
<dd>
A list inside a list
</dd>
<dt>
Nested List Example 1
</dt>
<dd>
<ol>
<li>
first list item
</li>
<li>
second directory item
</li>
<li>
third directory item
</li>
</ol>
</dd>
<dt>
Nested List Example 2
</dt>
<dd>
<ul>
<li>
first level list item 1
<ol>
<li>
second level list item 1
</li>
<li>
second level list item 2
</li>
<li>
second level list item 3
</li>
</ol>
</li>
<li>
first level list item 2
</li>
<li>
first level list item 3
</li>
</ul>
</dd>
</dl>
HTML web page:
Nested List
A list inside a list
Nested List Example 1
  1. first list item
  2. second directory item
  3. third directory item
Nested List Example 2
  • first level list item 1
    1. second level list item 1
    2. second level list item 2
    3. second level list item 3
  • first level list item 2
  • first level list item 3

©sideway

ID: 110300029 Last Updated: 3/14/2011 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019