Lists and Tables— Lists

• Unordered Lists (<ul>)
• Creating bulleted lists
• Ordered Lists (<ol>)
• Creating numbered lists
• Definition Lists (<dl>)
• Creating lists with terms and definitions

Lists

In HTML, lists are used to group related items. There are three types of lists: unordered lists, ordered lists, and definition lists. Each type has a specific purpose and is created using different HTML tags.

Unordered Lists (<ul>)

Unordered lists are used to create bulleted lists. Each item in the list is represented by the <li> (list item) tag.

Creating Bulleted Lists:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This code will produce a list with bullets:

• Item 1
• Item 2
• Item 3

Customization: You can customize the bullet style using CSS. For example, you can change the bullet type to a circle or square:

<ul style="list-style-type: circle;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Available bullet styles include:

• disc (default)
• circle
• square
• none (no bullets)

Ordered Lists (<ol>)

Ordered lists are used to create numbered lists. Each item in the list is represented by the <li> (list item) tag.

Creating Numbered Lists:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This code will produce a list with numbers:

1. First item
2. Second item
3. Third item

Customization: You can customize the numbering style using the type attribute or CSS. For example, you can change the numbering to letters or Roman numerals:

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Available numbering styles include:

• 1 (default)
• A (uppercase letters)
• a (lowercase letters)
• I (uppercase Roman numerals)
• i (lowercase Roman numerals)

Starting Number: You can also specify the starting number of the list using the start attribute:

<ol start="5">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This will produce a list starting from number 5: 5. First item 6. Second item 7. Third item

Definition Lists (<dl>)

Definition lists are used to create lists of terms and their definitions. A definition list is created using the <dl> tag, with each term wrapped in a <dt> (definition term) tag and each definition wrapped in a <dd> (definition description) tag.

Creating Lists with Terms and Definitions:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

This code will produce a list like this:

Term 1

• Definition 1

Term 2

• Definition 2

Term 3

• Definition 3

Nested Definitions: You can also nest definitions within a term:

<dl>
  <dt>Term 1</dt>
  <dd>
    <p>Definition 1</p>
    <dl>
      <dt>Subterm 1.1</dt>
      <dd>Subdefinition 1.1</dd>
    </dl>
  </dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

This will produce a nested definition list:

Term 1

• Definition 1
• Subterm 1.1
• Subdefinition 1.1

Term 2

• Definition 2

By using these list elements and understanding their attributes and customization options, you can effectively organize and present information on your web pages.