HTML LISTS
HTML has three ways for specifying lists of information. Lists may be:
- <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 description lists. This is a list of terms, with a description of each term.
HTML Unordered Lists
It is a collection of related items that have no special order or sequence.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul> <li>Page</li> <li>Pencil</li> <li>Eraser</li> <li>Sharpner</li> <li>Ruler</li> </ul> </body> </html>
It gives the following result:
- Page
- Pencil
- Eraser
- Sharpner
- Ruler
The type Attribute
You can specify the type of bullet you like. By default it is a disc. Following are the possible options:
<ul type="square"> <ul type="disc"> <ul type="circle">
HTML Ordered Lists
If you want to put your items in a numbered list then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol> <li>Page</li> <li>Pencil</li> <li>Eraser</li> <li>Sharpener</li> <li>Ruler</li> </ol> </body> </html>
This will produce following result:
- Page
- Pencil
- Eraser
- Sharpener
- Ruler
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. Following are the possible options:
<ol type="1"> - Default-Case Numerals. <ol type="I"> - Upper-Case Numerals. <ol type="i"> - Lower-Case Numerals. <ol type="a"> - Lower-Case Letters. <ol type="A"> - Upper-Case Letters.
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:
<ol type="1" start="5"> - Numerals starts with 5. <ol type="I" start="V"> - Numerals starts with V. <ol type="i" start="5"> - Numerals starts with v. <ol type="a" start="5"> - Letters starts with e. <ol type="A" start="5"> - Letters starts with e.
HTML Description Lists
It 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
<!DOCTYPE html> <html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html>
This gives the result:
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Note: Lists can be nested.
PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com
