Creating bullet and number list on HTML

Asked By 0 points N/A Posted on -
qa-featured

How do I go about creating a bullet and number list in a hypertext markup language(HTML)?

SHARE
Best Answer by Sharath Reddy
Answered By 15 points N/A #145957

Creating bullet and number list on HTML

qa-featured

Bullet and Numbering Feature in HTML
 

 

Bullet and Numbering Feature in HTML

You can use bullet or numbering via HTML script. Which tag of HTML can show the line as listing order by bullets of numbering that’s called list tag. The main tag to add bullet or numbering in any text are

<li> </li>

This is a simple code with strong power to manage text line by bullet or numbering.

Example :

 <ol>
<li>love</li>
<li>friendship </li>
<li> relation </li>
</ol>

You can change bullet style as square bullet, as disc bullet, as circle bullet. Just use bellows code for that :

<ul type="square">
<ul type="disc">
<ul type="circle">
 

I hope bullet and numbering concept is now clear for you.

Best Answer
Best Answer
Answered By 590495 points N/A #145958

Creating bullet and number list on HTML

qa-featured

The bullet and list tags are very simple and easy to apply in an HTML page. It helps you create a much organized appearance on the information you displayed on the page especially if you need to enumerate something. You can also use these two kinds of tags to create horizontal or vertical menus on the page.

To create a vertical menu out of these tags, you may try to follow the example below.

<ul>
<li><a href="URL">Menu 1</a>
<ul>
<li><a href="URL">Submenu 1</a></li>
<li><a href="URL">Submenu 2</a></li>
<li><a href="URL">Submenu 3</a></li>
</ul>
</li>
<li><a href="URL">Menu 2</a>
<ul>
<li><a href="URL">Submenu 1</a></li>
<li><a href="URL">Submenu 2</a></li>
</ul>
</li>
</ul>

These sets of tags will create this vertical menu on the HTML page:

  • Menu 1

    • Submenu 1
    • Submenu 2
    • Submenu 3
  • Menu 2

    • Submenu 1
    • Submenu 2

Now, if you want to create a horizontal menu, you need to use an extra tag to enclose the whole structure. You need to use the tag <nav></nav>. When applied, it will be like this:

<nav>
<ul>
<li><a href="URL">Menu 1</a>
<ul>
<li><a href="URL">Submenu 1</a></li>
<li><a href="URL">Submenu 2</a></li>
<li><a href="URL">Submenu 3</a></li>
</ul>
</li>
<li><a href="URL">Menu 2</a>
<ul>
<li><a href="URL">Submenu 1</a></li>
<li><a href="URL">Submenu 2</a></li>
</ul>
</li>
</ul>
</nav>

Related Questions