Unordered Lists

Bullet point lists for unordered content.

Basic Unordered List

  • First item
  • Second item
  • Third item
  • Fourth item
HTML 
<ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
            <li>Fourth item</li>
        </ul>

Nested Unordered List

  • Coffee
  • Tea
    • Black tea
      • Earl Grey
      • English Breakfast
    • Green tea
    • Herbal tea
  • Milk
HTML 
<ul>
            <li>Coffee</li>
            <li>
                Tea
                <ul>
                    <li>
                        Black tea
                        <ul>
                            <li>Earl Grey</li>
                            <li>English Breakfast</li>
                        </ul>
                    </li>
                    <li>Green tea</li>
                    <li>Herbal tea</li>
                </ul>
            </li>
            <li>Milk</li>
        </ul>

Ordered Lists

Numbered lists for sequential content.

Basic Ordered List

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
HTML 
<ol>
            <li>First step</li>
            <li>Second step</li>
            <li>Third step</li>
            <li>Fourth step</li>
        </ol>

Starting Number

  1. This is item five
  2. This is item six
  3. This is item seven
HTML 
<ol start="5">
            <li>This is item five</li>
            <li>This is item six</li>
            <li>This is item seven</li>
        </ol>

Reversed Order

  1. Third place
  2. Second place
  3. First place
HTML 
<ol reversed>
            <li>Third place</li>
            <li>Second place</li>
            <li>First place</li>
        </ol>

Nested Ordered List

  1. Chapter One
    1. Section 1.1
    2. Section 1.2
      1. Subsection 1.2.1
      2. Subsection 1.2.2
  2. Chapter Two
  3. Chapter Three
HTML 
<ol>
            <li>
                Chapter One
                <ol>
                    <li>Section 1.1</li>
                    <li>
                        Section 1.2
                        <ol>
                            <li>Subsection 1.2.1</li>
                            <li>Subsection 1.2.2</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>Chapter Two</li>
            <li>Chapter Three</li>
        </ol>

Definition Lists

Term and definition pairs for glossaries and descriptions.

Basic Definition List

HTML
HyperText Markup Language - the standard markup language for web pages.
CSS
Cascading Style Sheets - a style sheet language for describing presentation.
JavaScript
A programming language that enables interactive web pages.
HTML 
<dl>
            <dt>HTML</dt>
            <dd>
                HyperText Markup Language - the standard markup language for
                web pages.
            </dd>

            <dt>CSS</dt>
            <dd>
                Cascading Style Sheets - a style sheet language for describing
                presentation.
            </dd>

            <dt>JavaScript</dt>
            <dd>A programming language that enables interactive web pages.</dd>
        </dl>

Multiple Definitions

Recursion
See recursion.
A method where the solution depends on solutions to smaller instances of the same problem.
Term
Word
A word or expression with a specific meaning in a particular context.
HTML 
<dl>
            <dt>Recursion</dt>
            <dd>See recursion.</dd>
            <dd>
                A method where the solution depends on solutions to smaller
                instances of the same problem.
            </dd>

            <dt>Term</dt>
            <dt>Word</dt>
            <dd>
                A word or expression with a specific meaning in a particular
                context.
            </dd>
        </dl>

Mixed Lists

Combining different list types.

Unordered with Ordered Nested

  • Unordered item
    1. Ordered sub-item one
    2. Ordered sub-item two
  • Another unordered item
HTML 
<ul>
            <li>
                Unordered item
                <ol>
                    <li>Ordered sub-item one</li>
                    <li>Ordered sub-item two</li>
                </ol>
            </li>
            <li>Another unordered item</li>
        </ul>

Ordered with Unordered Nested

  1. First main item
    • Supporting point
    • Another supporting point
  2. Second main item
HTML 
<ol>
            <li>
                First main item
                <ul>
                    <li>Supporting point</li>
                    <li>Another supporting point</li>
                </ul>
            </li>
            <li>Second main item</li>
        </ol>