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
