#13 HTML Lists

There are 3 ways to specifying HTML Lists.

    •  − An unordered list. This will list items using plain bullets.
      1.  − An ordered list. This will use different schemes of numbers to list your items.
      2.  − 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