Among HTML tags, there are several types and types of list tags, ul, and li. Learn more below.
# Learn about ul, li tag type and style

First, the ul and li tags are a combination of tags that you can use inside the ul tags. Look down, please.
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

As shown above, several list items will be located inside. At this point, you can decide how to show each list. In general, square, circle etc. are frequently used, but there are many different styles. The method available is type attribution or css. Let's look at the type first.


! To add code as inline as type attribution to a tag
We added type views inline below. You can see that the code type="square" is located. You can use values other than square. Select the desired list type and apply it.
<ul type="square">
  <li>web</li>
  <li>is</li>
  <li>free</li>
</ul>

How does the code appear if you execute it? It's going to look just like this.
<ul type="square">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>

Next, let's find out how to use the attributes of css.


! Declaring as list-style-type property of CSS
Let's use css to set it up. If you use the list-style-type property for the style tag and give a disk with a value, it will be as follows:
<ul class="test">
  <li>web</li>
  <li>is</li>
  <li>free</li>
</ul>

@ list_style.css
ul.test {
  list-style-type: disc;
}

See below what happens when you actually operate the code.
<ul class="test">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<style>
ul.test {
list-style-type: disc;
}
</style>

The disc type is output as shown above.


! Find out the type value of the list style
It's convenient to know in advance how you look when you apply different values. Below is what happens when you apply different values to a web document.

  • disc

  • hiragana

  • hiragana

  • lower-alpha

  • lower-alpha

  • square


  • circle

  • decimal

  • decimal

  • upper-alpha

  • upper-alpha

  • upper-roman

  • upper-roman

  • none



Here's how to apply the list styles and the different styles.