There are 3 ways to specifying HTML Lists.

•  − An unordered list. This will list items using plain bullets.
  •  − An ordered list. This will use different schemes of numbers to list your items.

    1.  − 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

  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

  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

  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

  You can use start attribute for

  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.

  • − Defines the start of the list

  • − A term
  • − Term definition
  • − 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