1 of 13

�HTML – LISTS ��

Amity School of Engineering & Technology

2 of 13

�HTML – LISTS ��

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

​

​

  • <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.

​

Amity School of Engineering & Technology

3 of 13

�HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML Unordered List</title>
  • </head>
  • <body>
  • <ul>
  • <li>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ul>
  • </body>
  • </html>

Amity School of Engineering & Technology

4 of 13

�The type Attribute

You can use type attribute for <ul> tag to 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“>

Following is an example where we used <ul type="square">

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML Unordered List</title>
  • </head>
  • <body>
  • <ul type=“square">
  • <li>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ul>
  • </body>
  • </html>

Amity School of Engineering & Technology

5 of 13

�HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, 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>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ol>
  • </body>
  • </html>

Amity School of Engineering & Technology

6 of 13

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.

Amity School of Engineering & Technology

7 of 13

Following is an example where we used <ol type="1">

​

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML Ordered List</title>
  • </head>
  • <body>
  • <ol type=“i”>
  • <li>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ol>
  • </body>
  • </html>

Amity School of Engineering & Technology

8 of 13

Following is an example where we used <ol type="I">

​

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML Ordered List</title>
  • </head>
  • <body>
  • <ol type="I">
  • <li>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ol> HTML
  • </body>
  • </html>

Amity School of Engineering & Technology

9 of 13

�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="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.

Amity School of Engineering & Technology

10 of 13

Following is an example where we used <ol type="i" start="4" >

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML Ordered List</title>
  • </head>
  • <body>
  • <ol type="i" start="4">
  • <li>Beetroot</li>
  • <li>Ginger</li>
  • <li>Potato</li>
  • <li>Radish</li>
  • </ol>
  • </body>
  • </html>

Amity School of Engineering & Technology

11 of 13

�HTML Definition Lists

  • HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

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

​

Amity School of Engineering & Technology

12 of 13

  • <!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>

Amity School of Engineering & Technology

13 of 13

Thanks

Amity School of Engineering & Technology