;

Learn HTML List - How to create square, circle, number List

How to Add List In HTML


How to create make add number circle square List in HTML

buayaberdiri.blogspot.com - When we want to create a web page, maybe we need a list. This list is widely used in navigation menus, displaying the order of a food and drink, price, list of options and others.

Inside the html element we can easily list the pages on the website. And I'm sure you will quickly understand the steps on how to add it.

There are 2 options to make list in html :



1.How To Made Unordered HTML List



To create an Unordered List in HTML, we need the <ul> code and inside there is the <li> list code. by default the Unordered List symbol is a small black circle.


How to write Unordered List code inside html element :


<ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
</ul>



You can make a list with a black box symbol and a small size. To make a box image in the list, you need the CSS code in <ul> .

the CSS code you added to make the list square is list-style-type

See example below:

<ul style="list-style-type:square;">
        <li>Menu 6</li>
        <li>Menu 5</li>
        <li>Menu 4</li>
</ul>



An example of how to make a list with a black circle shape and a small size :


<ul style="list-style-type:circle;">
        <li>Menu satu</li>
        <li>Menu dua</li>
        <li>Menu tiga</li>
</ul>



You can also add lists in html without symbols like squares, circles, and numbers.

See the example below:

 <ul style="list-style-type:none;">
        <li>Menu</li>
        <li>Home</li>
        <li>About</li>
</ul>




2.How To Create Ordered HTML List


The second option for creating a list is an Ordered List, by default an Ordered List generates number symbols. With this list you can count the number of lists contained in the website page content.

To add an Ordered List, you can write the code <ol> and inside you can add the code list <li>.

See the example below:

<ol>
        <li>Privacy And Policy</li>
        <li>Disclaimer</li>
        <li>Sitemap</li>
</ol>



Earlier I said that by default Ordered List returns number results, but in Ordered List you can return Uppercase and Lowercase results.

See the example below Uppercase Letter List :


<ol type="A">
        <li>Coffee Chocholate</li>
        <li>Milk Red</li>
        <li>Water Venus Planet</li>
</ol>


See the example below Lowercase Letter List :


<ol type="a">
        <li>Red Hat</li>
        <li>Black Hat</li>
        <li>Gold Hat</li>
</ol>



Not only letters, Ordered List can also generate Uppercase and Lowercase roman number symbols.

See an example below of uppercase roman numerals :


<ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
</ol>


See an example below of lowercase roman numbers :


<ol type="i">
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
</ol>





You can see posts about HTML on this website.




List of Article Posts https://buayaberdiri.blogspot.com