3.3.2 Bullet Points in HTML

Introduction

Recall that you may create lists with bullet points in HTML in two major ways. Lists are used to organize information in a clear and readable format. They are commonly used for menus, instructions, features, and any content that needs to be presented as a series of items.

Definition

Bullet Points in HTML are list items displayed with a marker (such as a bullet, number, or letter) before each item. HTML provides two main types of lists: Unordered Lists and Ordered Lists.

Main Idea

There are two major ways to create lists with bullet points in HTML:

• Unordered List (`<ul>`): Lists with bullet points that often resemble squares, circles, or other symbols.
• Ordered List (`<ol>`): Lists with bullet points that are numbers (1, 2, 3, etc.) in order.

Core Concept

Unordered List (`<ul>`)

Lists with bullet points that often resemble squares, circles, or other symbols fall under this category.

Syntax:

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

Output:

• Item 1
• Item 2
• Item 3

Ordered List (`<ol>`)

Lists with bullet points that are numbers (1, 2, 3, etc.) in order fall under this category.

Syntax:

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

Output:

• First item
• Second item
• Third item

Detailed Explanation

The `<li>` Tag

The `<li>` tag defines a list item. It is used inside both `<ul>` and `<ol>` to define each item in the list.

Example: Doctor's Visit Appointments with Fee Packages

The footnote portion of a page can be updated to highlight fee packages using an unordered list.

```html <!DOCTYPE html> <html lang="en"> <head> <title>Doctor's Visit Appointments</title> <style> table { border: 2px solid black; border-collapse: collapse; } th, td { padding: 10px; text-align: left; } th { background-color: lightblue; color: white; } tr:nth-child(odd) { background-color: lightyellow; } </style> </head> <body> <h1>Doctor's Visit Appointments</h1> <table> <caption>List of upcoming appointments</caption> <thead> <tr> <th>Patient Name</th> <th>Date</th> <th>Time</th> <th>Doctor</th> <th>Reason for Visit</th> </tr> </thead> <tbody> <tr> <td>Adil</td> <td>2024-05-10</td> <td>10:00 AM</td> <td>Dr. Shams</td> <td>Follow-up</td> </tr> <tr> <td>Zaki</td> <td>2024-05-15</td> <td>2:00 PM</td> <td>Dr. Qamar</td> <td>Check-up</td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> This table displays a sample list of appointments. <br><br><br> <ul> <li>Standard Consultation: Rs.500</li> <li>Follow-up Visit: Rs.300</li> <li>Comprehensive Check-up: Rs.1,000</li> </ul> </td> </tr> </tfoot> </table> </body> </html> ```

Explanation:

• The footnote portion of the page is updated and clearly highlights the fee package.
• An unordered list (bullet points) may now be found after the footnote.
• In this list, each fee package is represented by a list item (`<li>`) element.
• The line break (`<br>` tag) is inserted between the phrase "Fee Packages:" and the asterisk (*) symbol to make it easier to read and helps in understanding the content.

Comparison: Unordered vs. Ordered List

Intermediate Level

At the intermediate level, you should understand how to style lists with CSS.

Removing bullets: ```css ul { list-style-type: none; } ```

Changing bullet style: ```css ul { list-style-type: square; } ```

Using ordered list with letters: ```html <ol type="A"> <li>Item A</li> <li>Item B</li> </ol> ```

Nesting lists: ```html <ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> </ul> </li> <li>Vegetables <ul> <li>Carrot</li> <li>Potato</li> </ul> </li> </ul> ```

Important Points

• - Two main types of lists: Unordered (`<ul>`) and Ordered (`<ol>`).
• - `<li>` defines a list item.
• - Unordered lists use bullets.
• - Ordered lists use numbers or letters.
• - Lists can be nested.
• - CSS can change the appearance of lists.
• - Lists improve readability and organization.

Remember

• - `<ul>` = unordered list (bullets).
• - `<ol>` = ordered list (numbers).
• - 0 = list item.
• - Unordered = order does not matter.
• - Ordered = order matters.
• - Lists can be nested.
• - CSS can style lists.

Common Mistakes

• - Forgetting to close the `<li>` tag.
• - Using `<ul>` when order matters (use `<ol>` instead).
• - Using `<ol>` when order does not matter (use `<ul>` instead).
• - Forgetting to close the `<ul>` or `<ol>` tag.
• - Nesting lists incorrectly (the nested list should be inside an `<li>`).
• - Using `<li>` outside of `<ul>` or `<ol>`.

Quick Revision

• HTML lists: Unordered (`<ul>`) and Ordered (`<ol>`).
• `<li>` defines each list item.
• Unordered lists use bullets (circles, squares).
• Ordered lists use numbers, letters, or Roman numerals.
• Lists can be nested.
• CSS can change list style (`list-style-type`).
• Lists improve readability and organization.

60-Second Revision

• 0 = unordered (bullets).
• 0 = ordered (numbers).
• 0 = list item.
• Unordered = no order; Ordered = order matters.
• Lists can be nested.
• CSS styles lists.
• Warning: Use `<ol>` when order matters; use `<ul>` when it does not.