Full width home advertisement

How To

Science

Post Page Advertisement [Top]


How to Set HTML Lists?

The HTML List tags is used to list information either by using alphabetical order, numerical order or bullet style. All lists must contain one or more list elements. HTML List includes:

1. An unordered list <ul>: This will list items using plain bullets 
having no special order or sequence.

2. An ordered list <ol>: This will use different formats of numbers or alphabets to list your items with special order or sequence.

3. A definition list <dl>: This arranges your items in the same way as they are arranged in a dictionary.



HTML Unordered List
This will list items using plain bullets having no special order or sequence.

Example

<!DOCTYPE html>

<html>

<head>

<title>Scholars Unordered List Example</title>

</head>

<body>

<ul>

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ul>


</body>

</html>



See Results:

·
Art

· Science

· Commercial

· Technology




HTML Unordered list type attribute

You can use type attribute for <ul> tag to indicate the type of bullet you are using. We have disc, square and circle attributes:

<ul type="square">  = 
§ 

<ul type="disc">       = 
·

<ul type="circle">     
o  


Example of <ul type="square">

<!DOCTYPE html>

<html>

<head>

<title>Scholars Unordered List</title>

</head>

<body>

<ul type="square">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ul>

</body>

</html>



Example of <ul type="disc">

<!DOCTYPE html>

<html>

<head>

<title>Scholars Unordered List</title>

</head>

<body>

<ul type="disc">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ul>

</body>

</html>


Example of <ul type="circle">


<!DOCTYPE html>

<html>

<head>

<title>Scholars Unordered List</title>

</head>

<body>

<ul type="circle">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ul>

</body>

</html>




HTML Ordered Lists

The HTML ordered list is used to list items in a numbered manner or alphabetic style. This list is created using <ol> tag. 

Example

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol>

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will produce the following result:

1. Art

2. Science

3. Commercial

4. Technology



HTML Ordered list type attributes

The type attribute for <ol> tag can be used to indicate the type of numbering you or lettering you want to use. I.E.

1. <ol type="1"> - Default-Case Numerals.

2. <ol type="I"> - Upper-Case Roman Numerals.

3. <ol type="i"> - Lower-Case Roman Numerals.

4. <ol type="a"> - Lower-Case Letters.

5. <ol type="A"> - Upper-Case Letters.


Example of <ol type="1">

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="1">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will produce:

1. Art

2. Science

3. Commercial

4. Technology



Example of <ol type="I">

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="I">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will produce:

I. Art

II. Science

III. Commercial

IV. Technology



Example of <ol type="i">

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="i">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will produce:

i. Art

ii. Science

iii. Commercial

iv. Technology



Example of <ol type="A">

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="A">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will produce the following result:

A. Art

B. Science

C. Commercial

D. Technology


Example of <ol type="a">

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="a">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will print:

a. Art

b. Science

c. Commercial

d. Technology



The Start HTML List Attribute

The start attribute <ol> tag is used to set the starting point of the numbering or lettering as you choose.

<ol type="1" start="3"> - Numerals starts with 3.

<ol type="I" start="3"> - Roman Numerals starts with III.

<ol type="i" start="3"> - Roman Numerals starts with iii.

<ol type="a" start="4"> - Letters starts with c.

<ol type="A" start="4"> - Letters starts with D.


Example of <ol type="1" start="3" >

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML Ordered List</title>

</head>

<body>

<ol type="1" start="3">

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ol>

</body>

</html>

This will print out:

i.

ii.

1.

2.

3. Art

4. Science

5. Commercial

6. Technology


No comments:

Post a Comment

Bottom Ad [Post Page]

| Designed by Colorlib