Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a parent to several tags in HTML?
In HTML, certain tags like <li> (list items) require parent elements to be semantically correct and functional. The <li> tag must be enclosed within a parent container that defines the type of list being created.
When adding a parent to several <li> tags, you choose from three main list types based on your content structure
Ordered List
<ol>For numbered or sequenced itemsUnordered List
<ul>For bulleted items without sequenceDefinition List
<dl>For term-definition pairs
HTML Ordered List
The ordered list displays items in a numbered sequence using the <ol> parent tag. Each <li> item automatically receives sequential numbering. Use ordered lists when the sequence or ranking of items matters, such as instructions, rankings, or step-by-step procedures.
Syntax
Following is the syntax for HTML ordered list
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Example
Following example demonstrates creating ordered lists with different attributes
<!DOCTYPE html>
<html>
<head>
<title>Ordered Lists Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9;">
<h1 style="color: #333;">Ordered Lists</h1>
<h3>Default numbering:</h3>
<ol>
<li>BMW</li>
<li>BUGATTI</li>
<li>CHEVRON</li>
</ol>
<h3>Starting from 4:</h3>
<ol start="4">
<li>BMW</li>
<li>BUGATTI</li>
<li>CHEVRON</li>
</ol>
<h3>Roman numerals:</h3>
<ol type="I">
<li>AUDI</li>
<li>RS7</li>
<li>Q4</li>
</ol>
</body>
</html>
The output shows different numbering styles applied to the ordered lists
Default numbering: 1. BMW 2. BUGATTI 3. CHEVRON Starting from 4: 4. BMW 5. BUGATTI 6. CHEVRON Roman numerals: I. AUDI II. RS7 III. Q4
HTML Unordered List
The unordered list displays items with bullet points using the <ul> parent tag. Each <li> item appears with a bullet marker. Use unordered lists for items where sequence doesn't matter, such as feature lists, ingredients, or navigation menus.
Syntax
Following is the syntax for HTML unordered list
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Example
Following example demonstrates unordered lists with different bullet styles
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9;">
<h1 style="color: #333;">Unordered Lists</h1>
<h3>Default bullets:</h3>
<ul>
<li>ANT</li>
<li>BAT</li>
<li>CAT</li>
<li>DOG</li>
</ul>
<h3>Square bullets:</h3>
<ul type="square">
<li>ANT</li>
<li>BAT</li>
<li>CAT</li>
<li>DOG</li>
</ul>
<h3>Circle bullets:</h3>
<ul type="circle">
<li>ELEPHANT</li>
<li>FISH</li>
<li>GOAT</li>
<li>HEN</li>
</ul>
</body>
</html>
The output displays various bullet styles for unordered lists
Default bullets: ? ANT ? BAT ? CAT ? DOG Square bullets: ? ANT ? BAT ? CAT ? DOG Circle bullets: ? ELEPHANT ? FISH ? GOAT ? HEN
HTML Definition List
The definition list uses the <dl> parent tag to create term-definition pairs. Unlike <li> tags, definition lists use <dt> (definition term) and <dd> (definition description) tags. Use definition lists for glossaries, FAQs, or any content with term-description relationships.
Syntax
Following is the syntax for HTML definition list
<dl> <dt>Term 1</dt> <dd>Description for term 1</dd> <dt>Term 2</dt> <dd>Description for term 2</dd> </dl>
Example
Following example shows how to create a definition list
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9;">
<h1 style="color: #333;">Definition List</h1>
<dl>
<dt style="font-weight: bold; margin-top: 10px;">CHIRON</dt>
<dd style="margin-left: 20px;">A high-performance sports car by Bugatti</dd>
<dt style="font-weight: bold; margin-top: 10px;">Q4</dt>
<dd style="margin-left: 20px;">A luxury SUV series by Audi</dd>
<dt style="font-weight: bold; margin-top: 10px;">HTML</dt>
<dd style="margin-left: 20px;">HyperText Markup Language used for web structure</dd>
</dl>
</body>
</html>
The output displays terms with their corresponding definitions
CHIRON
A high-performance sports car by Bugatti
Q4
A luxury SUV series by Audi
HTML
HyperText Markup Language used for web structure
Adding Parent to Multiple List Items
When you have several <li> tags that need a parent, follow these steps
Example Converting Standalone Items to Lists
Converting individual items into properly structured lists
<!DOCTYPE html>
<html>
<head>
<title>Adding Parent to List Items</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Before: Invalid HTML (no parent)</h2>
<!-- This is incorrect HTML -->
<div style="background: #ffe6e6; padding: 10px; border: 1px solid red;">
<p>? Invalid structure:</p>
<!-- <li>Item 1</li> -->
<!-- <li>Item 2</li> -->
<!-- <li>Item 3</li> -->
<p>(List items without parent cannot be displayed)</p>
</div>
<h2>After: Valid HTML (with parent)</h2>
<div style="background: #e6ffe6; padding: 10px; border: 1px solid green;">
<p>? Valid structure with <ul> parent:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
The output shows the importance of proper parent-child structure
Before: Invalid HTML (no parent) ? Invalid structure: (List items without parent cannot be displayed) After: Valid HTML (with parent) ? Valid structure with <ul> parent: ? Item 1 ? Item 2 ? Item 3
205 Views
