The `<ul>` tag is one of the fundamental HTML tags used to create unordered lists. Unordered lists are used to display a list of items that do not have a specific order or hierarchy.
Here’s a tutorial on how to use the `<ul>` tag:
### Syntax
The basic syntax for using the `<ul>` tag is as follows:
“`
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
“`
The `<ul>` tag should be placed at the beginning of the list and closed with the `</ul>` tag at the end of the list. Each item in the list should be enclosed in an `<li>` tag, which stands for “list item”.
### Attributes
There are several attributes that can be used with the `<ul>` tag. Some of the most commonly used ones are:
– `type`: This attribute specifies the type of bullet point to use for each item in the list. The possible values are `disc` (a filled circle), `circle` (an empty circle), `square` (a filled square), and `none` (no bullet point). The default value is `disc`.
– `start`: This attribute specifies the starting number for the first item in the list. For example, if you set `start=”3″`, the first item in the list will be number 3.
– `class` and `id`: These attributes are used to apply CSS styles to the list. `class` is used to apply a style to a group of elements, while `id` is used to apply a style to a specific element.
### Example
Here’s an example of how to use the `<ul>` tag with some of the attributes:
“`
<ul type=”square” start=”2″ id=”mylist”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
“`
In this example, the list will be displayed with square bullet points, starting from the number 2, and with the ID “mylist” for styling purposes.
### Styling
Unordered lists can be styled with CSS to change the appearance of the bullet points, text, and spacing. Here’s an example of how to change the bullet points to be red circles:
“`
ul {
list-style: circle;
color: red;
}
“`
In this example, the `list-style` property is set to `circle` to change the bullet points to circles, and the `color` property is set to `red` to change the color of the bullet points.
### Conclusion
The `<ul>` tag is a simple but powerful HTML tag that is used to create unordered lists. By using the `<ul>` tag with the `<li>` tag, you can create a list of items that can be styled with CSS to match the look and feel of your website.
