HTML List

In HTML, there are three kinds of lists.

1. Ordered list

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

In html we write this way:


Code:
<ol> <!--List container-->
<li>Example of an ordered</li> <!--List line-->
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

2. Unordered list

  • Example of an ordered list
  • Example of an ordered list
  • Example of an ordered list

Code:
<ul> <!--List container-->
<li>Example of an Unordered</li> <!--List line-->
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
</ul>

3. List with description

Example list with description
Example of line description
Example list with description
Example of line description
Example list with description
Example of line description

Code:
<dl> <!--List container-->
<dt>Example list with description</dt> <!--List line-->
<dd>Example of line description</dd> <!--Description of the line-->
<dt>Example list with description</dt>
<dd>Example of line description</dd>
<dt>Example list with description</dt>
<dd>Example of line description</dd>
</dl>

If you want to insert text into the ordered list between the lines, and then continue the numbering, add the attribute value to the row container.

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Text Text Text Text

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>
Text Text Text Text
<ol>
<li value="4">Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

In the ordered list, you can change the arabic numerals to roman numerals and Latin letters.

To do this, enter a style in the list container.

1. Roman upper case

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:upper-roman;">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

2. Roman numerals of lower case

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:lower-roman;">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

3. Latin letters upper case

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:upper-latin;">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

4. Latin letters lowercase

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:lower-latin;">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

5. The numbers start at 0

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:decimal-leading-zero;">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

6. Armenian letters

  1. Example of an ordered list
  2. Example of an ordered list
  3. Example of an ordered list

Code:
<ol style="list-style-type:armenian">
<li>Example of an ordered</li>
<li>Example of an ordered</li>
<li>Example of an ordered</li>
</ol>

In the unnumbered list, you can change the markers

1. A circle

  • Example of an ordered list
  • Example of an ordered list
  • Example of an ordered list

Code:
<ul style="list-style-type:circle;">
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
</ul>

2. The filled circle

  • Example of an ordered list
  • Example of an ordered list
  • Example of an ordered list

Code:
<ul style="list-style-type:disc;">
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
</ul>

3. Square

  • Example of an ordered list
  • Example of an ordered list
  • Example of an ordered list

Code:
<ul style="list-style-type:square;">
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
<li>Example of an Unordered</li>
</ul>

Html headers < < < HTML basics > > > Links HTML

This entry was posted in Html basics. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *