List tags

List tags#

Lists are an important part of most documents, so here are ways to create lists in HTML.

<ul>,<li> - unordered list#

Tags:

  • <ul> describes an unordered list;

  • <li> describes a item of list.

%%HTML
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>...</li>
    <li>item n</li>
</ul>
  • item 1
  • item 2
  • ...
  • item n

Markers can be setted as style="list-style-type:<marker type>". There are following markers available:

  • disc;

  • square;

  • circle.

%%HTML
<text>Marker type for whole list:
<ul style="list-style-type:square">
    <li>item 1</li>
    <li>item 2</li>
    <li>...</li>
    <li>item n</li>
</ul>
<text>Different marker type for each point:</text>
<ul>
    <li style="list-style-type:disc">disc</li>
    <li style="list-style-type:square">square</li>
    <li style="list-style-type:circle">circle</li>
</ul>
Marker type for whole list:
  • item 1
  • item 2
  • ...
  • item n
Different marker type for each point:
  • disc
  • square
  • circle

<ol>,<li> - ordered list#

  • <ol> describes an ordered list;

  • <li> describes a item of list.

%%HTML
<ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>...</li>
    <li>item n</li>
</ol>
  1. item 1
  2. item 2
  3. ...
  4. item n

type - attribute#

Numeration type:

  • “1” - arabian numeration;

  • “A” - Latin caps;

  • “a” - lowercase Latin letters;

  • “I” - uppercase Roman numerals;

  • “i” - lowercase Roman numerals.

For some reasons these features can’t be displayed in jupyter, so the following cell generates this file where you can check the result of using these features.

variants = ["1", "A", "a", "I", "i"]
format_str = '''
    <ol type=\"{}\">
        <li>item 1</li>
        <li>item 2</li>
        <li>...</li>
        <li>item n</li>
    </ol>
'''

html_line = ""
for var in variants:
    html_line += format_str.format(var)

with open("html_files/ordered_lists_types.html", "w") as file:
    file.write(html_line)

reversed#

Display the list in reverse order

%%HTML
<ol reversed>
    <li>item 1</li>
    <li>item 2</li>
    <li>...</li>
    <li>item n</li>
</ol>
  1. item 1
  2. item 2
  3. ...
  4. item n

start - first number#

You can select the number to use as the first value.

%%HTML
<ol start = 5>
    <li>item 1</li>
    <li>item 2</li>
    <li>...</li>
    <li>item n</li>
</ol>
  1. item 1
  2. item 2
  3. ...
  4. item n

Negative elements#

I wonder how the list will behave if I start counting from 2 but there are more than two items. As it turns out the list goes beyond natural numbers.

%%HTML
<ol start = 1 reversed>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ol>
  1. item 1
  2. item 2
  3. item 3
  4. item 4

<dt>, <dd>, <dl> - definitions list#

  • <dl> (definitions list) sets a definitions list;

  • <dt> (definitions term) sets a new term;

  • <dd> (definitions descriptions) describe the term.

%%HTML
<dl>
    <dt>Term1</dt>
    <dd>Definition 1</dd>
    <dt>Term2</dt>
    <dd>Definition 2</dd>
    <dt>...</dt>
    <dd>...</dd>
    <dt>Term n</dt>
    <dd>Definition n</dd>
</dl>
Term1
Definition 1
Term2
Definition 2
...
...
Term n
Definition n