HTML List - Ordered, Unordered, And Definition Lists With Examples - October 3rd, 2024

Q: What are the types of HTML lists?

There are three main types of HTML lists: ordered lists ( ), unordered lists ( ), and definition lists ( ).

Suppose you are creating content with a list of top courses available at PW Skills. How do you keep this information structured and organized within your web page? This is where the HTML List comes in. These lists help developers organize and structure content in a visually appealing manner. Let’s read this article in detail and explore everything about HTML List. By the end of this article, you will be familiar with the concept and proficient enough to create your own lists within a web page.

Table of Contents

HTML List – Key Takeaways

Understanding what an HTML list is and what are the different types of lists in HTML.
Getting insights into ordered and unordered list in HTML.
Understanding the syntax and implementation of Ordered list HTML and unordered list HTML.
Understanding HTML list with a detailed example.

What Is An HTML List?

An HTML list is a way to organize and display content on a web page using a series of items. There are two main types of lists in HTML: ordered lists and unordered lists. Ordered lists use numbers to show a sequence, while unordered lists use bullet points to highlight items without a specific order. Lists make it easy to present information clearly and neatly. They are created using simple HTML tags, making them beginner-friendly and essential for structuring web content effectively.

Types Of Lists In HTML

Talking about HTML list, you must be familiar with mainly two types of lists in HTML we have mentioned above, let us understand these lists in detail and learn how to implement them for better structuring of content.

1. Ordered List HTML

An ordered HTML list is a way to display items in a specific sequence using numbers or letters. Each item in the list is numbered, making it easy to follow the step-by-step sequence. This type of list is useful for instructions, steps, or any content that needs to be shown in a particular order.

Creating An Ordered List HTML

To create an ordered HTML list, use the <ol> (ordered list) element, and each item is placed inside an <li> tag. The basic syntax of creating an ordered list along with the output is written below for your reference.

Syntax Of Ordered HTML List

<!DOCTYPE html>

<head>

<title>Ordered List Example</title>

</head>

<body>

<h2>Steps To Enroll In PW Skills Course</h2>

<ol>

<li>Open the web browser.</li>

<li>Type PWSkills.com into the search engine.</li>

<li>Open the website.</li>

<li>Search your desired course through the website.</li>

<li>Click on the enroll now button on the right corner.</li>

<li>Make the payment through your desired method.</li>

<li>Get enrolled in the course successfully.</li>

</ol>

</body>

</html>

Output-

Open the web browser.
Type PWSkills.com into the search engine.
Open the website.
Search for your desired course through the website.
Click on the Enroll Now button in the right corner.
Make the payment through your desired method.
Get enrolled in the course successfully.

2. Unordered List HTML

An unordered HTML list is a way to display items using bullet points. It helps organize content that doesn’t need a specific order. To create an unordered list, we generally use the `<ul>` tag for the list and `<li>` tags for each item within the list. This makes the information easy to read and visually appealing.

The basic syntax of creating an Unordered list HTML, along with the output is written below for your better understanding of the concept.

Syntax Of Unordered HTML List

<!DOCTYPE html>

<html>

<head>

<title>Unordered HTML List Example</title>

</head>

<body>

<h1>Top Courses at PW Skills</h1>

<ul>

<li>Full Stack Development</li>

<li>Data Science with Gen AI</li>

<li>Programming Powerhouse Course</li>

<li>Digital Marketing With AI course</li>

<li>Python with DSA course</li>

</ul>

</body>

</html>

Output-

Full Stack Development
Data Science with Gen AI
Programming Powerhouse Course
Digital Marketing With AI course
Python with DSA course

3. Definition HTML List

A Definition HTML list is a way to display terms and their descriptions. It uses three tags: `<dl>` for the list itself, `<dt>` known as “definition term” for each term, and `<dd>` known as “definition description” for the definition of each term. This type of list is useful for creating glossaries or any content where you need to pair items with their explanations. The basic implementation of this list along with its example is written below for your reference.

Syntax Of Definition HTML List

<!DOCTYPE html>

<html>

<head>

<title>Definition HTML List Example</title>

</head>

<body>

<h1>Essential Terms Of Web Development</h1>

<dl>

<dt>HTML</dt>

<dd>A markup language for creating web pages.</dd>

<dt>CSS</dt>

<dd>A style sheet language used for describing the look and formatting of a document written in HTML.</dd>

<dt>JavaScript</dt>

<dd>A programming language commonly used in web development to create interactive effects within web browsers.</dd>

</dl>

</body>

</html>

Output-

HTML

A markup language for creating web pages.

CSS

A style sheet language used for describing the look and formatting of a document written in HTML.

JavaScript

A programming language commonly used in web development to create interactive effects within web browsers.

HTML List Attributes Using CSS

The basic structure of the list is provided by HTML, but to make it visually appealing and interactive, CSS is used. CSS has various interesting properties that help us to customize lists according to our needs and preferences. Some the the important CSS properties are listed below along with the example for your better understanding.

1. Changing The Bullet Style In The HTML List

To change the bullet style in the unordered list or the numbering style in an ordered list, we can use the “list-style-type” property, the basic example of this property is given below for your better understanding of the topic.

Changing The Bullet Style In HTML List

.fruit-list { list-style-type: square; //Using square bullets

}

Output-

Apple
Banana
Orange
Grapes

2. Adding Spacing And Padding

You can change the spacing in the items by adjusting the spacing and padding properties of CSS. For example, you can add space between list items which will make them more readable and clean. The basic syntax for creating space between items is listed below for your reference.

li {

margin-bottom: 10px;

}

3. Styling List Items

This property is responsible for the styling of listing items that make the content visually attractive and engaging. Using this property, you change the color of the list item whenever the user hovers over them.

The basic syntax of this property is written below for your reference-

li:hover {

color: blue;

}

A Complete Example Of HTML List With Styling Properties

Now, after understanding all the necessary syntax and related terms for HTML list. Let us understand it more clearly with the help of basic example.

HTML Code For List

<!DOCTYPE html>

<head>

<title>Styling List Items Example</title>

</head>

<body>

<h2>Favorite Movies</h2>

<li>The Shawshank Redemption</li>

<li>The Godfather</li>

<li>The Dark Knight</li>

<li>Pulp Fiction</li>

</ul>

</body>

</html>

Now for styling properties, we can add CSS code given below.

CSS Code For List

.movie-list {

font-family: Arial, sans-serif;

font-size: 18px;

color: #333;

}

.movie-list li {

margin-bottom: 10px;

list-style-type: disc; /* Bullet style

background-color: #f0f0f0;

padding: 5px 10px;

border-radius: 5px;

}

.movie-list li:hover {

color: blue;

}

Learn Full Stack Development With PW Skills

If you are an aspiring full stack developer looking to start a career in full-stack web development. Enroll in our comprehensive full stack web development course specially designed by experts considering various factors and demands of the individuals.

The key features of this 6-month-long job assistance program include- mentorship from experts, daily practice sheets, regular doubt sessions, a 100% job assistance guarantee, networking opportunities, alumni support, easy EMI options on course fees, and much more. So, what are you waiting for? Enroll today and grab your seat on this journey of success.