HTML Lists are utilized to determine arrangements of data. All rundowns or lists might contain at least one rundown or list component. There are three unique kinds of HTML lists
- <ul>- unordered or bulleted lists.
- <ol>-ordered or numbered list.
- <dl>- definition or description list.
HTML- Unordered or Bulleted list
you can use an unordered or bulleted list if your list doesn't require a specific sequence or order. The <ul> tag is used to list items in an unordered or bulleted list. you have four options to use an unordered list.
- disc: The list items are marked as bullate and it is the default value of unordered lists.
- circle: In this option, the list items are marked as circles.
- square: The list items are marked as square.
- none: The list items are not marked.
Example: unordered list with the type disk
<!DOCTYPE html> <html> <body> <ul type="disk"> <li>Youtube</li> <li>Facebook</li> <li>Twitter</li> </ul> </body> </html>
Example: unordered list with the type circle
<!DOCTYPE html> <html> <body> <ul type="circle"> <li>Youtube</li><li>Facebook</li><li>Twitter</li> </ul> </body> </html>
Example: unordered list with the type square
<!DOCTYPE html> <html> <body> <ul type="square"> <li>Youtube</li><li>Facebook</li><li>Twitter</li> </ul> </body> </html>
Example: unordered list with the type square
<!DOCTYPE html> <html> <body> <ul type="none"> <li>Youtube</li><li>Facebook</li><li>Twitter</li> </ul> </body> </html>
If you want to include an additional list of items inside an item you can use nested lists.
Example: Nested List with the same type "Square".
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul type="square" > <li>Youtube <ul type="square"> <li>Brand Account</li> <li>Personal Account</li> </ul> </li> <li>Facebook</li> <li>Twitter</li> </ul> </body> </html>
Example: Nested List with the different type.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul type="square" > <li>Youtube <ul type="circle"> <li>Brand Account</li> <li>Personal Account</li> </ul> </li> <li>Facebook</li> <li>Twitter</li> </ul> </body> </html>
0 Comments