Introduction
HTML, or Hypertext Markup Language, is the primary language for structuring web pages. It collaborates with CSS and JavaScript to define content, appearance, and behavior. HTML comprises elements enclosed in angle brackets, encompassing various webpage components like headings, paragraphs, images, and links. The standard structure includes the , , and elements. HTML facilitates hyperlink creation through the tag, enabling seamless navigation between web pages. HTML5, the latest version, introduces new elements and attributes, enhancing web functionality and accessibility. In essence, HTML serves as the foundation for creating structured, interactive web content, essential for web development and design.

Unordered lists
About Lesson

Unordered lists in HTML are used to display lists of items in no particular order, typically using bullet points. Here’s how to create unordered lists:

1. **Using the `<ul>` Tag:**
– The `<ul>` tag is used to define an unordered list.
– Each list item within the `<ul>` tag is displayed with a bullet point by default.
– Example:
“`html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
“`
– This code creates an unordered list with three items, each displayed with a bullet point.

2. **List Items (`<li>`):**
– Each item in the unordered list is defined using the `<li>` (list item) tag.
– Place the content of each list item between the opening and closing `<li>` tags.
– Example:
“`html
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
“`

3. **Customizing Unordered Lists:**
– You can customize the appearance of unordered lists using CSS.
– Common CSS properties for styling unordered lists include `list-style-type`, `list-style-position`, and `list-style-image`.

4. **Changing the Bullet Style:**
– The `list-style-type` property in CSS can be used to change the style of the bullet points.
– Supported values for `list-style-type` include `disc` (default), `circle`, `square`, and `none`.
– Example:
“`html
<style>
ul {
list-style-type: circle;
}
</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
“`

5. **Nesting Unordered Lists:**
– Unordered lists can be nested within one another to create hierarchical structures.
– Use indentation to visually indicate the nesting levels.
– Example:
“`html
<ul>
<li>Main item 1</li>
<li>Main item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
<li>Main item 3</li>
</ul>
“`

Unordered lists are useful for presenting information in a structured manner without indicating any specific order or sequence. By understanding how to use the `<ul>` tag and list items (`<li>`), you can effectively create and customize unordered lists in your HTML documents.

Join the conversation