In the last article we learned about:
- Simple HTML Tables
- colspan to expand cell more than one column
- rowspan to expand cell more than one row Now in this article let's study how to create lists in HTML. In HTML we can create two types of list:
- Unordered List
- Ordered List Let's see each one of them in detail. Unordered HTML List An unordered list in HTML starts with <ul> and ends with </ul> tag. Each list item starts with <li> tag and ends with </li> tag. The list items will be marked with bullets by default but we can customise it with type attribute in starting <ul> tag. The type attribute can have any one of following values:
- type="disc" : Item marker is bullet. This is also the default.
- type="circle" : Item marker is empty circles.
- type="square" : Item marker is square.
- type="none" : Items will not be marked.
Ordered HTML List
An ordered list in HTML starts with <ol> and ends with </ol> tag. Each list item starts with <li> tag and ends with </li> tag. The list items will be marked with integers by default but we can customise it with type attribute in starting <ul> tag.
The type attribute can have any one of following values:
- type="1" : Items will be be numbered with numbers starting from 1. This is default.
- type="A" : Items will be be numbered with uppercase letters.
- type="a" : Items will be be numbered with lowercse letters.
- type="I" : Items will be be numbered with uppercse roman numbers.
- type="i" : Items will be marked with lowercase roman numbers.
Description Lists in HTML
We can also create description list in HTML. Description list contains term followed by its description. The <dl> tag defines the description list. Inside of it, <dt> tag is used to define term of list and <dd> tag used for description of that term.
Nested HTML Lists
Like any other HTML elements we can nest one HTML list inside other list.
That's all for today. In the next part, we will learn about some more HTML tags important for good structure of document. Comment on how you think this article is, what improvements should I do and for any doubts. Share with your friends and _ keep coding _.
Top comments (0)