Full Stack Developer Masters Program (52 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (41 Blogs)
  • Comprehensive Java Course (2 Blogs)
  • Java/J2EE and SOA (323 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

How to Implement Different Types of List In HTML?

Published on Aug 21,2019 43 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Lists are one of the important ways to represent data & information where each record is displayed in a single line. There are various ways of representing data in a list such as in an ordered manner, or in an unordered manner. I’ll be covering the following topics in this List in HTML article:

 

Types of List in HTML

Before we start creating a list, let’s look at the HTML tags first: 

  • <ul> Used to define an unordered list
  • <ol> Used to define an ordered list
  • <li> Used to define a list item
  • <dl> Used to defines a description list
  • <dt> Used to defines a term in a description list
  • <dd> Used to describes the term in a description list

Let’s understand how you can create different kinds of a list in HTML.

 

Unordered List

To define an unordered list in HTML we use <ul> tag and then we define the list of items in <li> tag. By default, the list of items is marked with bullets (i.e. small black circles).

<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul> 
<li>Cricket</li>
<li>Football</li>  
<li>Baseball</li>
</ul>
</body> 
</html>

Output:

Unordered List in HTML

 

Unordered HTML List: Different Item Markers

You can choose from a list of markers using CSS list-style-type property. Let’s look at different CSS list-style-type property that you can use to define different style of markers:

  • disc: Sets the list item marker to bullet
  • circle: Sets the list item marker to a circle
  • square: Sets the list item marker to a square
  • none: The list items will not be marked

Disc:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul style="list-style-type:disc;">
<li>Cricket</li>
<li>Football</li>
<li>Baseball</li>
</ul>
</body> 
</html>

Output:

 

Disc in HTMLCircle:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul style="list-style-type:circle;">
<li>Cricket</li> 
<li>Football</li>
<li>Baseball</li>
</ul>
</body> 
</html>

Output:

Circle-List in HTMLSquare:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul style="list-style-type:square;"> 
<li>Cricket</li> 
<li>Football</li> 
<li>Baseball</li>
</ul>
</body> 
</html>

Output:

SquareNone:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul style="list-style-type:none;"> 
<li>Cricket</li> 
<li>Football</li> 
<li>Baseball</li>
</ul>
</body> 
</html>

Output:

NoneNow after understanding how to create an unordered list in HTML, let’s understand how to create an ordered list in HTML.

Ordered List

To define an ordered list in HTML we use <ol> tag and then we define the list of items in <li> tag.
By default, the list of items is marked with numbers.


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol>  
<li>Cricket</li>
<li>Football</li>  
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

Ordered List in HTMLNow let’s look at some of the variants of ordered lists.

Ordered HTML List – Type Attribute

There are different types of item markers for an ordered list: 

  • type=”1″ The list items will be numbered with numbers (default)

  • type=”A” The list items will be numbered with uppercase letters

  • type=”a” The list items will be numbered with lowercase letters

  • type=”I” The list items will be numbered with uppercase roman numbers

  • type=”i” The list items will be numbered with lowercase roman numbers

 

Numbers:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol type="1">  
<li>Cricket</li>  
<li>Football</li>
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

NumbersUppercase Letters:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol type="A">  
<li>Cricket</li> 
<li>Football</li> 
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

Uppercase LetterLowercase Letters:



<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol type="a">
<li>Cricket</li> 
<li>Football</li>
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

Lowercase LetterUppercase Roman Numbers:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol type="I"> 
<li>Cricket</li>
<li>Football</li> 
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

Uppercase Roman Number

 

Lowercase Roman Numbers:


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ol type="i">
<li>Cricket</li>  
<li>Football</li> 
<li>Baseball</li>
</ol>
</body> 
</html>

Output:

Lowercase Roman Numbers

HTML Description Lists

You can also create description lists in HTML. A description list is used to create a list of terms and adding a description to them. You create a description list using <dl> tag. <dt> tag defines the term & <dd> tag adds description to them.


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<dl> 
<dt>Cricket</dt> 
<dd> Cricket is a bat-and-ball game played between two teams of eleven players on a field at the centre of which is a 20-metre pitch with a wicket at each end, each comprising two bails balanced on three stumps.</dd>  
<dt>Table Tennis</dt>
<dd> Table tennis, also known as ping-pong, is a sport in which two or four players hit a lightweight ball back and forth across a table using small rackets. The game takes place on a hard table divided by a net.</dd>
</dl>
</body> 
</html>

Output:

 

 

Nested List in HTML

You can also create a nested list in HTML.


<!DOCTYPE html> 
<html> 
<body>
<h2>Sports</h2>
<ul> 
<li>Table Tennis</li>
<li>Cricket
<ul>   
<li>Virat Kohli</li>  
<li>Joe Root</li>
</ul>
</li></pre>
<pre><li>Basketball</li>
</ul>
</body> 
</html>

Output:

Nested List in HTML

Now after executing the above snippets you would have understood how to create lists in HTML. I hope this blog is informative and added value to you.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of “List in HTML” blog and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.