HTML list

Using an HTML list of web documents any information or items can be presented nicely by a special mark or number. Tags are required to create a list:
Ol= ordered list
Ul= unordered list
Li= list item
Dl= definition list

Numbered or ordered list:

This list is used to present any specific data or items numbering systems in web document,such as the 1,2,3,4 … etc. For this format is<ol>….</ol>

But items to present one by one of it,s left side by the number will be kept inside <li>…..</li> tag.

Coding format as follows:

<ol>
<li> List item one</li> or <li> first list item………..
<li> List item two</li> or <li> second list item……
</ol>

Examples:
Displays a list according to the serial number.

Using type attributes in the ordered list:

You saw that till now how the item is presented the periodic numerical such as the 1,2,3,4 … etc. It is a default behavior of the list. But Arabic numbers, Roman alphabet, numeral is used with the type attribute as a value.

Attribute Value Description
type 1 Arabic Number, Lowercase alphabet,
Uppercase alphabet, Lowercase Roman Numeral,
Uppercase Roman Numeral,
By default value is “1”
a
A
i
I
start “start_Sequence_number” Define start sequence number of the list

Format:

<ol type=”1|a|A|i|I”>

<ol type=1>: decimal numbers (1,2,3…..) is the default type. The other type of sample is shown below :

<ol type=”I”> <ol type=”i”> <ol type=”a”> <ol type=”A”>
I. Bangla i. Bangla a. Bangla A. Bangla
II. English ii. English b. English b. English
III. Maths iii. Maths c. Maths c. Maths
IV. Physics iv. Physics d. Physics D. Physics

Example:

Type the following codes in Notepad or other html editing software. When you open the ol_type.html file, you will see output like the following.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ol type="I">
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ol>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  1. HTML and CSS
  2. JavaSript
  3. PHP and Perl

 

Using start attributes in the ordered list:

The start attribute can be used in ordered list and using any numbers or letters as value list item can be initiated. The first few items are made from such as 4,5,6……
Format:

<ol start=”number”>

Type the following codes in Notepad or other html editing software. When you open the ol_start.html file, you will see output like the following.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ol start="4">
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ol>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  1. HTML and CSS
  2. JavaSript
  3. PHP and Perl

Using value attributes in the ordered list:

Using these attributes, you can change the number of items list. That is to say using the value attribute of item list as the value of its that will set the standard it will be presented.

Type the following codes in Notepad. Now ol_value.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ol>
  <li>HTML and CSS</li>
  <li value="5">JavaSript</li>
  <li>PHP and Perl</li>
  </ol>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  1. HTML and CSS
  2. JavaSript
  3. PHP and Perl

 

Using type and start attributes in the ordered list:

In ordered list, by the type attribute the list will be determined based on the number or letters and start attribute associated with its from how many numbers or letter will start that can be set.

Type the following codes in Notepad. Now ol_type_start.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ol type="1" start="10">
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ol>
</body>
</html>

 Display in Browser

Do you need to learn make a website?

  1. HTML and CSS
  2. JavaSript
  3. PHP and Perl

 

Using reversed attributes in the ordered list:

Revised attribute is a new addition of HTML5. List items can be displayed instead of the default ascending order to descending order by this attribute. Internet Explorer and Safari 5 browser does not support this attribute.

Syntax: <ol reversed>

Type the following codes in Notepad. Now list_reserved.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ol reversed>
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ol>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  1. HTML and CSS
  2. JavaSript
  3. PHP and Perl

Bullet or unordered list:

By using unordered list in the web page written in any items by the bullet or other mark can be presented nicely. The tags are used for this. Coding format as follows:

<ul>
<li>List item one</li>
<li>List item two</li>
……………………
</ul>

Type the following codes in Notepad. Now list_unordered.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ul>
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ul>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  • HTML and CSS
  • JavaSript
  • PHP and Perl

 

Using type and start attributes in an unordered list:

By adding type and start attribute in unordered list marks can be shuffled in the items list. This type of list is usually circle, square, disc marks is used. With the start of ul tag type, start as well as value to use disc, circle, square. By default, the markers of the list contains solid dot (filled circles).

Syntax:

<ul type=”square”> <ul type=”disc”> <ul type=”circle”>
▪ Bangla • Bangla ○ Bangla
▪ English • English ○ English
▪ Maths • Maths ○ Maths
▪ Physics • Physics ○ Physics

Example:
Type the following codes in Notepad. Now square_item_marker.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<body>
<h3>Do you need to learn make a website?</h3>
<ul tyep="square">
  <li>HTML and CSS</li>
  <li>JavaSript</li>
  <li>PHP and Perl</li>
  </ul>
</body>
</html>

Display in Browsers:

Do you need to learn make a website?

  • HTML and CSS
  • JavaSript
  • PHP and Perl

Use nested list:

Make a list inside of the list is called nested list. For example: Use unordered list inside of ordereded list and in unordered list use of ordered list.

Example:
Type the following codes in Notepad. Now list_nested.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html>
<style>body{font-family:verdana;}</style>
<body>
<ol>
   <li>Thursday: Do Maths homework</li>
   <li>Friday: Housesit for neighbors:
      <ul><li>Bring in the mail</li>
      <li>Take out the trash</li>
      <li>Stop the newspaper delivery</li></ul></li>
   <li>Saturday: Wash your bike</li>
</ol>
</body>
</html>

Display in Browsers:

  1. Thursday: Do Maths homework
  2. Friday: Housesit for neighbors:
    • Bring in the mail
    • Take out the trash
    • Stop the newspaper delivery
  3. Saturday: Wash your bike

Free Style List:

You can add any compatible image in the list item. For this image size to be smaller as necessary. Before the image is saved to a folder on your computer use Photoshop or any other program to the small size of the image as .gif, .jpg, or .png format stored in the same folder the html coding to save.

One thought on “HTML list

  1. Aw, this was a really nice post. In idea I want to put in writing like this additionally ?taking time and actual effort to make a very good article?but what can I say?I procrastinate alot and by no means seem to get something done.

Leave a Reply

Your email address will not be published. Required fields are marked *