HTML List Styles-HTML Tutorial-php.cn

Table of Contents

Different List Styles in HTML

Below are the various HTML list styles explained.

1) Unordered Lists

Here the order of display of the content is not something that we need to care about; just we need to place the things well, such that the HTML page makes them placed up in front of the user in a well-formatted and clear way.

There are two tags in HTML language that handle these lists, and likely you can make a navigation bar and vertical sidebar using these tags only.

- : this represents the list items, the set of items to be placed in the unordered list i.e. under the
  - tag. The items marked with these markups will be automatically carrying some bullets or circles in their beginning; these are the basic HTML features.

Now let us see a piece of code for

based unordered lists and how the HTML page will look; once you execute that file, note that you can write in an editor like notepad and save the file with “.html” extension; hence it can be opened with any of the browsers.

Example Snippet –

Code:
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>
```
Copy after login
Output:

2) Ordered Lists

Now will see a case where we are looking to place the students in an ordered manner based on their ranks in class, and this will appear in a sorted manner by using the
1. tags, those will have the list items in it.
  1. tags.
  2. tag has been explained above.
    
    For this case, let’s see an example, too, and you need to save this just like done above.
    
    Code:
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>
```
    Copy after login
    Output/ HTML page
    
    Now let’s see some variants of these where we can customize or well format these lists only by adding some CSS properties into the HTML page, which will make the appearance of the page look better.
    1. In the unordered lists, we have the following properties that can be given –
    2. List-style-type – can be disc, circle, square or none. So the circles you saw in unordered list items will not appear if we choose none here, let’s do it.
    Example –
    
    Code:
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>
```
    Copy after login
    Output/ HTML page –
    
    So, the circle bullets no longer exist; you can customize them with the above-provided options.
    
    Similarly, there is a provision to choose whether the order list values will appear with numerals or Romans or alphabets in the order lists.
    
    You can set the property type in

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn