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 Codepen

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 UL Nested Codepen

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;
}