Home HTML Tutorial for beginners 22 HTML Unordered list

22 HTML Unordered list

18
0

HTML unordered list is used to display list items with bullets or circles. An unordered list starts with <ul> tag and list items starts with <li> tag. bullet type can be specified with optional type attribute.

SYNTAX :

<ul [type="bullet type"]>

<li> list item 1

<li> list item 2

...

</ul>

The type attribute may have a value from below table

disc This is the default style. In this style the list items are displayed with prefixed bullets.
circle in this style the list items are displayed with prefixed circles
square in this type the list items are displayed with prefixed squared
none in this type the list items are not prefixed with any item.

The Css list-style-type property can also be used to specify the type of bullet. The example for this is as below :

<ul style="list-style-type:disc;">

Let us change the code written in myskills.html using <ol> tag to <ul> tag and find the difference.

We will write the below code in myskills.html page, after h1 tag.

<ul>

<li> HTML

<li> CSS

<li> Java Script

<li> WordPress

</ul>

The closing tag for <li> is optional but it is a good practice to write those. So we will write the above code again as below.

<ul>

<li> HTML </li>

<li> CSS </li>

<li> Java Script </li>

<li> WordPress </li>

</ul>

The numbering of the list items may not be visible, because these are hidden inside the boundary. So we will use padding for ul tag with in our style tag. write the below code with in style tag to provide ul tag a padding of 40px.

ul {padding:40px;}

Check your progress :

Q) The unordered list starts with a ___ tag.

  • ul
  • li
  • ol
  • None of these

Q) HTML5 does not support unordered list.

  • True
  • False

Q) TYPE attribute is compulsory for an unordered list.

  • True
  • False

LEAVE A REPLY

Please enter your comment!
Please enter your name here