#13 HTML Lists
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.
- − 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,
-
- − Defines the start of the list
-
- − A term
-
- − Term definition
- − Defines the end of the list
<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.
Example
See the Pen definition list by Arpit (@soniarpit) on CodePen.
Hope you enjoyed this tutorial. Happy coding :)
Previous: #12 HTML Tables