#13 HTML Lists

There are 3 ways to specifying HTML Lists.

  • <ul> − An unordered list. This will list items using plain bullets.
  • <ol> − An ordered list. This will use different schemes of numbers to list your items.
  • <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list means no specific sequence. In HTML <ul> tag used to specify unordered list. Inside this tag, each list item starts with the <li> tag.

Example

See the Pen ul exampl 1 by Arpit (@soniarpit) on CodePen.

The type Attribute <ul>

You can specify the bullet style like circle, square, etc. using type attribute in <ul> tag.

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Example

See the Pen ul example 2 by Arpit (@soniarpit) on CodePen.

HTML Ordered Lists

Ordered Lists used to specify number in the list. This list created using <ol> tag. Inside this tag, each list item starts with the <li> tag.

Example

See the Pen ol exampl 1 by Arpit (@soniarpit) on CodePen.

The type Attribute in <ol>

You can specify the type of numbering using type attribute in <ol> tag. By default is a number. see the following example.

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example

See the Pen dyOvaBB by Arpit (@soniarpit) on CodePen.

The start Attribute for <ol>

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are some example,

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

See the Pen ol example 3 by Arpit (@soniarpit) on CodePen.

HTML Definition Lists

HTML and XHTML both support definition list. Definition lists used to specify list like dictionary or encyclopedia.

Definition List makes use of following three tags.

  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition
  • </dl> − Defines the end of the list

Example

See the Pen definition list by Arpit (@soniarpit) on CodePen.

Hope you enjoyed this tutorial. Happy coding 🙂

Previous: #12 HTML Tables

Next: #14 HTML Block and Inline Tags

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee

Related Articles

Leave a Comment

Copy link
Powered by Social Snap