HTML Lists
An HTML list is a way to organize information on a web page, similar to how you make a list in your notebook. There are three main types of lists:
⦁ Ordered Lists: These are numbered lists (like 1, 2, 3).
⦁ Unordered Lists: These are bulleted lists (like with dots or squares).
⦁ Definition Lists: These list terms and their definitions.
Lists make content more readable and organized for people visiting your website.
1. Ordered List
Ordered lists are used when the order of items is important. They are numbered automatically by the browser. You create an ordered list using the <ol> tag and each item within the list is placed inside an <li> tag.
Example
Output
In this example:
⦁ The <ol> tag signifies an ordered list, which means the items in the list will be numbered automatically by the browser.
⦁ The <li> tags denote individual list items within the ordered list.
⦁ So, when a web browser renders this code, it will display a numbered list with three items.
Attributes for Ordered List (<ol>)
Type Attribute
It specifies the kind of marker to use (e.g., 1, A, a, I, i).
<ol type=”A”>
<li>First item</li>
<li>Second item</li>
</ol>
Output
In this example:
⦁ type=”A”: This attribute specifies the type of numbering or bullet style for the list. In this case, it’s using uppercase letters (A, B, C, etc.) to number the items.
Start Attribute
It specifies the starting number of the list.
<ol start=”5″>
<li>Fifth item</li>
<li>Sixth item</li>
</ol>
Output
In this example:
⦁ start=”5″: This attribute specifies the starting number for the list. In this case, the list starts from 5 instead of the default 1.
Reversed Attribute
It reverses the order of the list items.
<ol reversed>
<li>Third item</li>
<li>Second item</li>
<li>First item</li>
</ol>
Output
In this example
<ol reversed>: This attribute reversed is used to reverse the numbering order of the list. By default, ordered lists start from 1 and go up. When the reverse is included, the numbering starts from the highest number and goes down.
2. Unordered Lists
Unordered lists are used for items where the order does not matter. These lists use bullets (typically small black circles) as the default markers. You create an unordered list using the <ul> tag and each item within the list is placed inside an <li> tag.
Example
Output
In this example
⦁ <ul>: This is the unordered list tag. It’s used to create a list where the order of items doesn’t matter.
⦁ <li>: These are the list item tags, defining each item in the list.
⦁ Item one, Item two, and Item three: These are the actual items in the list.
Attributes for Unordered List (<ul>)
List Style Type:
It Specifies the type of bullet to use (e.g., disc, circle, square).
<ul style=”list-style-type: square;”>
<li>Item one</li>
<li>Item two</li>
</ul>
Output
In this example
style=”list-style-type: square;”: This inline CSS style sets the list item marker type to square. It overrides the default bullet point style for the list.
3. Definition Lists
Definition lists are used for a set of terms and their definitions. They are created using the <dl> tag. Within this, terms are defined using <dt> (definition term) and the definition of those terms are provided using <dd> (definition description).
Example
Output
In this example
⦁ <dl>: This is the description list tag. It is used to contain groups of terms and descriptions.
⦁ <dt>HTML</dt> is the term , and <dd>A markup language for creating web pages. </dd> is its description.
⦁ <dt>CSS</dt> is the term, and <dd> A stylesheet language used to style HTML documents.</dd> is its description.
⦁ <dt>JavaScript</dt> is the term, and <dd>A programming language for creating dynamic web content.</dd> is its description.
Nesting Lists
Lists can be nested within other lists, which is useful for creating sub-items within a main list.
Example
Output
In this example
⦁ <ol>: This is the ordered list tag, creating a list with numbered items.
⦁ <li>: These are the list item tags, defining each main item in the ordered list.
⦁ Main item one and Main item two: These are the main items in the ordered list.
⦁ <ul>: These are unordered list tags nested inside the <li> tags of the ordered list, creating lists with bullet points for sub-items.
⦁ <li> (inside <ul>): These define each sub-item in the nested unordered lists.
⦁ Sub-item one and Sub-item two: These are the sub-items under each main item.
Styling Lists
You can style lists using CSS to customize their appearance.
<ul style=”list-style-type: circle; padding-left: 20px;”>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Example:
In this example
list-style-type: circle; changes the bullets to circles and padding-left: 20px; adds some padding to the left.
YouTube Reference :
Practice Scenario
Scenario 1: Basic Unordered List
Objective: Create a basic unordered list with three items.
Expected Output: A webpage with a bulleted list displaying three items.
<!DOCTYPE html>
<html>
<head>
<title>Basic Unordered List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul>
<li>Buy groceries</li>
<li>Clean the house</li>
<li>Pay bills</li>
</ul>
</body>
</html>
Output
Scenario 2: Basic Ordered List
Objective: Create a basic ordered list with three items.
Expected Output: A webpage with a numbered list displaying three items.
<!DOCTYPE html>
<html>
<head>
<title>Basic Ordered List</title>
</head>
<body>
<h1>Steps to Make Tea</h1>
<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Pour water into a cup</li>
</ol>
</body>
</html>
Output
Scenario 3: Nested Lists
Objective: Create a nested list where one of the items in an unordered list has another unordered list within it.
Expected Output: A webpage with a nested list displaying sub-items under one main item.
Output
Scenario 4: Description List
Objective: Create a description list with three items, each having a term and a description.
Expected Output: A webpage with a description list displaying terms and their descriptions.
Output
Scenario 5: Custom Styled List
Objective: Create a styled list with different colors for list items using inline CSS.
Expected Output: A webpage with a colored list.
<!DOCTYPE html>
<html>
<head>
<title>Styled List</title>
</head>
<body>
<h1>Favorite Colors</h1>
<ul>
<li style=”color: red;”>Red</li>
<li style=”color: green;”>Green</li>
<li style=”color: blue;”>Blue</li>
</ul>
</body>
</html>
Output
Scenario 6: Alphabetically Ordered List
Objective: Create an ordered list that uses alphabetical characters instead of numbers.
Expected Output: A webpage with an ordered list using alphabetical characters.
Output
Scenario 7: Creating an Ordered List
Objective: Create an ordered list with multiple levels.
Expected Output:
– A heading saying “My Favorite Movies”.
– An ordered list with three main items, each having sub-items.
Output
Scenario 8: Creating a Navigation Bar
Objective: Create a simple navigation bar using CSS.
Expected Output: A webpage with a horizontal navigation bar.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar Example</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
<h1>Navigation Bar Example</h1>
<p>This is a simple navigation bar.</p>
</body>
</html>
Output
