Skip to main content
Engineering LibreTexts

3.7: List Structures

  • Page ID
    93796
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Listing Elements

    HTML 5 provides text structuring in the form of lists. You can produce lists of bulleted items, lists of numbered items, and lists of terms and definitions. The first two lists resemble single-spaced lines of text with the addition of prefixed bullets or numbers. The latter list is similar in display to a series of blockquoted paragraphs.

    Unordered Lists

    An unordered list is a series of items preceded by bullet characters and set off from surrounding text by blank lines. The list is single spaced and indented from the left margin. Unordered lists should be used when the order of each item in the list is not important. An example unordered list:

    • List Item #1
    • List Item #2
    • List Item #3

    An unordered list is created with the block-level <ul> container tag enclosing listed items identified with block-level <li> <ul> container tag enclosing listed items identified with block-level <li> (list item) container tags. The general format for an unordered list is:

    <ul>
      <li>list item</li>
      <li>list item</li>
      ...
    </ul>
    

    For example, the bulleted list shown above is given by the following code.

    <ul>
      <li>List Item #1</li>
      <li>List Item #2</li>
      <li>List Item #3</li>
    </ul>
    

    Items in the list are single spaced and preceded by a bullet character. If text for a list item is wider than the width of the page it is word wrapped and indented inside the bullet character. Items can be enclosed inside <p> tags or <br /> tags can be coded between items to increase line spacing between them. The following list, for example, surrounds list items with <p> tags to leave blank lines between entries.

    <ul>
      <li><p>This is the first item in the list. Text following the bullet
      character is word wrapped inside the bullet. Paragraph tags are used to
      leave blank lines between items in the list.</p></li>
      
      <li><p>This is the second item in the list. Text following the bullet
      character is word wrapped inside the bullet. Paragraph tags are used to
      leave blank lines between items in the list.</p></li>
    </ul>
    

    Browser output for the above html is:

     
    • This is the first item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

    • This is the second item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

    Nested Unordered Lists

    Unordered lists can be nested inside each other. For example, a bulleted list appearing inside a second bulleted list appearing inside a third bulleted list is produced by the following code and is displayed in the browser as shown after the html code below. Note that a nested unordered list is part of the list items of its container list. That is, the <ul>...</ul> tags for the nested list appear inside a pair of <li>...</li> tags of <ul>...</ul> tags for the nested list appear inside a pair of <li>...</li> tags of the enclosing list.

    <ul>
        <li>List Item 1</li>
        <li>List Item 2
            <ul>
            <li>List Item 2a</li>
            <li>List Item 2b
                <ul>
                <li>ListItem 2b1</li>
                <li>List Item 2b2</li>
                </ul>
            </li>
            </ul>
        </li>
        <li>List Item 3</li>
    </ul>
    
     
    • List Item 1
    • List Item 2
      • List Item 2a
      • List Item 2b
        • ListItem 2b1
        • List Item 2b2
    • List Item 3

    Each nested list is further indented inside its container list. Also, different bullet characters are used for nested lists. By default, a disc character marks the outer-most list, a circle marks the next inner-most list, and a square marks the inner list. Notice that when lists are contained inside other lists that no blank lines surround the interior lists as they do when a single list appears within the normal flow of text on the page.

     

    Deprecated type Attribute

     

    The type="disc|circle|square" attribute can be coded inside the opening <ul> tag in order to specify the style of bullet character to use if different from the default disc character. HTML5 standards do not allow the use of the type attribute and suggest using CSS for specifying bullet characters.

    Ordered Lists

    An ordered list is a series of items preceded by sequence numbers and set off from surrounding text by single blank lines. By default, the list is numbered with decimal numbers beginning with 1 and numbered consecutively through the last item in the list. The list is single spaced and indented from the left margin in the same way as an unordered list. Ordered lists should be used when the order of each list item is important. An example ordered list is shown below.

    1. List Item #1
    2. List Item #2
    3. List Item #3

     

    The html to create that ordered list is here: 

    <ol>
        <li>List Item #1</li>
        <li>List Item #2</li>
        <li>List Item #3</li>
    </ol>
    

    Items in the list are single spaced and word-wrapped inside the numbering character. <li> can contain other tags like <p><blockquote><h1>, and other tags. It is important to remember that <ol><li> and <ul><li> is a structure

    Nested Ordered Lists

    Ordered lists can be nested inside each other, with subordinate lists indented from the next outer-most list. All nested ordered lists use the same decimal numbering system beginning with decimal 1. For example, the following code produces the numbered lists.

    <ol>
        <li>List Item 1</li>
        <li>List Item 2
            <ol>
            <li>List Item 2.1</li>
            <li>List Item 2.1</li>
            </ol>
        </li>
        <li>List Item 3</li>
    </ol>
    

     

     
    1. List Item 1
    2. List Item 2
      1. List Item 2.1
      2. List Item 2.2
    3. List Item 3

    Note that when ordered lists are contained inside other ordered lists that no blank lines surround the interior lists as they do when a list appears within the normal flow of page text.

    Ordered List Attributes

    type attribute can be coded inside the opening <ol> tag in order to specify one of five different numbering characters. The attribute value can be <ol type='1'> for decimal numerals (the default), <ol type='A'> for upper-case letters, <ol type='a'> for lower-case letters, <ol type='I'> for upper-case Roman numerals, and <ol type='i'> for lower-case Roman numerals. The tag <ol type='A'>, for example, produces the following list of alphabetically ordered items.

    <ol type='A'>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ol>
    

     

    1. List Item 1
    2. List Item 2
    3. List Item 3

    You can choose the beginning sequence value of an ordered list by coding the optional <ol start='n'> attribute for the <ol> tag. Here, n must be a valid integer. For instance, a starting sequence value is needed, when an ordered list is interrupted by other elements on the page.

    As shown in the output below, two consecutively sequenced lists are separated by a paragraph. The first list begins with "A" and is sequenced through "E" since there are five items in the list. The second list needs to begin its sequence with the sixth letter "F". If a starting value is not specified, sequencing begins anew with "A".

    This is the beginning of the list:

    1. List Item A
    2. List Item B
    3. List Item C
    4. List Item D
    5. List Item E

    This is a continuation of the list:

    1. List Item F
    2. List Item G
    3. List Item H
    4. List Item I
    5. List Item J

    Code for the above lists is shown below. The first ordered list uses upper-case letters (type="A") beginning with "A" and ending with "E". The second list overrides this default sequencing by specifying start="6" in its opening <ol> tag. Thus, the second list is (type="A") beginning with "A" and ending with "E". The second list overrides this default sequencing by specifying start="6" in its opening <ol> tag. Thus, the second list is ordered consecutively from "F" through "J".

    <p>This is the beginning of the list.</p>
    
    <ol type='A'>
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
      <li>List Item D</li>
      <li>List Item E</li>
    </ol>>
    
    <p>This is a continuation of the list.</p>
    
    <ol type='A' start='5'>
      <li>List Item F</li>
      <li>List Item G</li>
      <li>List Item H</li>
      <li>List Item I</li>
      <li>List Item J</li>
    </ol>>
    

    You can reverse the order of the sequence of list markers through the use of the reversed attribute. This is a boolean attribute that can be applied to an <ol> tag in multiple ways. For instance, you could reverse the order of markers through adding the attribute itself without a value, such as in <ol reversed>. Optionally, you could also add a value to the attribute, and set it equal to either "reversed" or a blank string "". For example, <ol reversed='reversed'> and <ol reversed=''> also accomplishes the same effect. This is true of other boolean attributes you may come across in future elements. All of these forms are valid under HTML5. Below is an example of ordered list with the attribute reversed.

    1. List Item 1
    2. List Item 2
    3. List Item 3

    Definition Lists

    definition list is a series of terms and definitions offset from surrounding text by blank lines. The terms in the list are blocked at the left margin, and definitions are indented and word wrapped on the following lines. An example definition list is shown below with the html to create the list.

    Term 1
    This is the Term 1 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.
    Term 2
    This is the Term 2 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

    A definition list is enclosed inside <dl> tags and contains one or more <dt> (definition term) tags listing the items to be defined. Each definition term has an associated <dd> (definition description) tag enclosing the definition for the term.

    The definition list shown above is produced with the following code.

    <dl> 
        <dt>Term 1</dt> 
            <dd>This is the Term 1 definition. The definition term appears on 
            a line by itself and is followed by a definition text block.
            The definition is indented and word wrapped.</dd> 
        <dt>Term 2</dt> 
            <dd>This is the Term 2 definition. The definition term appears on 
            a line by itself and is followed by a definition text block.
            The definition is indented and word wrapped.</dd> 
    </dl> 
    

    When displayed in the browser, items in the list are single spaced with no blank lines appearing between the terms. If you wish to include additional line spacing, you can code <p> tags surrounding the definitions or <br /> tags between them.

    A definition list, of course, can be used for purposes other than defining terms. Any situation where you have a name and value relationship among content you can employ a definition list. Another example where a definition list might be appropriate is for a frequently asked questions, or FAQ, section of a web site.


    3.7: List Structures is shared under a CC BY-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?