html ul
Definition
HTML lists will allow us to group a set of related items into a list.
For example, if we wish to break the content into list of items, we can do this in two ways.
- With
<ol>ordered list- With
<ul>unordered list
The <ul> tag defines an unordered (bulleted) list.Use the <ul> tag together with the <li> tag to create unordered lists. To create unordered lists, we need to use <ul> and </ul> tags.
<h4>Web Development Languages & Frameworks</h4> <ul> <li>JavaScript</li> <li>HTML</li> <li>CSS</li> <li>Tailwind CSS</li> <li>UNOCSS</li> <li>React</li> <li>Angular</li> <li>Svelte JS</li> <li>Vue JS</li> <li>Python</li> <li>PHP</li> <li>Perl</li> </ul>
html ul tag
A nested list
<h4>Web Development Languages & Frameworks</h4> <ul> <li>HTML</li> <li>CSS</li> <ul> <li>Tailwind CSS</li> <li>UNOCSS</li> </ul> <li>JavaScript</li> <ul> <li>Svelte JS</li> <li>Vue JS</li> <li>React</li> <li>Angular</li> </ul> <li>Python</li> <li>PHP</li> <li>Perl</li> </ul>
html tags ul
For both list types, each of the list items will be in a separate line or under each other.
Browser Support
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Default CSS Settings
Most browsers will display the <ul> element with the following default values.
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }