How to use Lists in HTML? ~ MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.

HTML Lists

You can represent any information through the lists in HTML. HTML list make your webpage in well-formed look. There are three types of the list in HTML. These are an ordered list, unordered list, description list and nested list is nothing but list inside a list. In the web designing and development, lists play the vital role, basically creating menu or navigation bar.

There are some terms, you should have to know.

<ul>:- It is used for the unordered list.
<ol>:- It is used for the ordered list.
<li>:- It is used for list item.
<dl>:- It is used for description list.
<dt>:- It is used for the term in the description list.
<dd>:- It is used to describe the term in a description list.
type:- This an attribute which is used to define item serial number.
start:- This an attribute which is used to define start point.

Ordered-Lists

This list is in the order form. You can order such a list in many ways, such as numbers (1, 2, 3, 4), small Roman numbers (I, ii, iii, iv), capital Roman (I, II, III, IV) small alphabets (a, b, c, d), capital alphabets (A, B, C, D) etc. This type of list you can create by using <ol> tag.

Example of Ordered Lists

You use the <ol> tag to create the ordered list as I told you earlier. After this tag, you define the list item to use <li> tag. This tag is also used in the unordered list. An example of this is being given below.

The above script will generate the given web page.

Attribute

Attribute type in the ordered lists

You can also use the type attribute with the Ordered List. By Type Attribute, you tell how you want to order the list. Like if you want a list of numbers, then you define the value of type attribute 1. Apart from this, if you want to list in alphabet order, the value of the type attribute will be a. You can also define the list with roman letters, for this, you give the value I of the type attribute.

type="1“ --> start numbering with numbers (default)

type="A“ --> start numbering with uppercase (capital) letters

type="a“ --> start numbering with lowercase (small) letters

type="I“ --> start numbering with uppercase (capital) roman numbers

type="i“ --> start numbering with lowercase (small) roman numbers

Attribute start in the ordered lists

This an attribute which is used to define start point from where item serial number will continue.

Start=“20” à By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute.

<li>Book</li>
<li>Copy</li>
<li>Pen</li>
</ol>

Output:- 20 Book
21 Copy
22 Pen

Now you can use the below code and try to get the output using both attribute type and start.

<!DOCTYPE html>
<html>
 <head>
  <title> Type attribute </title>
 </head>
 <body>
  <ol type = "I">
<li> Home </li>
<li> Blog </li>
<li> Service </li>
<li> Contact </li>
</ol>
</body>
</html>

The above script will generate the given web page.

Unordered-Lists

This type of list is in unordered form. Items like this list are represented with bullets, circle and squire etc. This type of list you can create by using <ul> tag.

Attribute type unordered lists

Disc --> Sets bullet (default)

Circle --> Sets circle

Square --> Sets square

None --> The list items will not be marked

Example of Unordered Lists

You use the <ul> tag to create an unordered list. After this tag <li> tag item list is defined. In this type of list, 3 types of type attribute can be given.

With disc, circle and square values, you can create different types of unordered lists. An example is given below.

<!DOCTYPE html>
<html>
 <head>
  <title> Unordered list menu </title>
 </head>
 <body>
  <ul type = "square">
<li> Home </li>
<li> Blog </li>
<li> Service </li>
<li> Contact </li>
</ul>
</body>
</html>

The above script will generate the given web page.

Nested Ordered Lists

List under list is called nested list. It can be defined for each list ordered list, unordered list and definition list accordingly. You can see in the below example. Inside Tea, there are two items Black tea and Green tea.

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black Tea</li>

<li>Green Tea</li>
</ul>

</li>

</ul>

For your practice, you can use the below code.

<!DOCTYPE html>
<html>
 <head>
  <title> Nested List </title>
 </head>
 <body>
  <h1>
 Ordered Nested list menu </h2>
<ol>
<li> Home </li>
<li> Blog </li>
<li> Web Design & Development </li>
<ol>
<li> Design </li>
<ol>
<li> HTML </li>
<ol>
<li> HTML3 </li>
<li> HTML4.01 </li>
<li> XHTML </li>
<li> HTML5 </li>
</ol>
<li> CSS </li>
<ol>
<li> CSS3 </li>
</ol>
<li> JavaScript </li>
<ol>
<li> JQuery </li>
</ol>
</ol>
<li> Development </li>
<ol>
<li> PHP </li>
<li> JAVA </li>
<li> ASP </li>
</ol>
</ol>
<li> Service </li>
<li> Contact </li>
</ol>
</body>
</html>

The above script will generate the given web page.

Hopefully, this "HTML Tutorial - Lists” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips.

Previous:- Img tag in HTML? Next:- Block & Inline tag in HTML?

Wednesday, December 5, 2018

How to use Lists in HTML?

HTML Lists

Ordered-Lists

Example of Ordered Lists

Attribute

Attribute type in the ordered lists

Example of Unordered Lists

Example of Description Lists

Nested Ordered Lists

Nested Unordered Lists

Nested Description Lists

5 comments:

Followers

Blog Archive

Popular Posts

Contact Us

About MyBlogHelp

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review