What is the way to keep list of elements straight in HTML file ?
Last Updated :
21 Jan, 2022
In this article, we will discuss various methods to keep the list of elements straight in an HTML file. Generally, The proper indented content in the browser makes the content well-organized & structured, enhancing the overall readability, along with increasing the interactivity of the website. This could be possible by using the HTML semantic elements.
A semantic element explains the meaning of the piece of code to both the developer & machine-readable way. HTML lists allow the content to follow a proper semantic structure. Lists are important for the visual experience of a user so that they can read content in a proper flow rather than jumbled texts or paragraphs. It allows to group elements that are relatable together in the form of bullet points or numbered lists. There are 2 types of lists in HTML, namely, Unordered List & Ordered List.
Unordered Lists: It consists of the small black bullets, by default, that represents the list of items. The list starts with <ul> tag and contains the list of items that start with <li> tag.
Syntax:
<ul>
<li>List Items</li>
</ul>
Ordered List: An ordered list consists of a numbered list, by default. The list starts with <ol> tag and contains the list of items that start with <li> tag.
Syntax:
<ol>
<li>List Items</li>
</ol>
Example: This example illustrates the Unordered List & Ordered List to indent the content in the list form the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Types of Lists</title>
</head>
<body>
<h2>Unordered list </h2>
<ul>
<li>DSA</li>
<li>Algorithm</li>
<li>Web Tech</li>
</ul>
<h2>Creating an Ordered list </h2>
<ol>
<li>Placement Courses</li>
<li>Online Self-pace Course</li>
<li>Offline-Classes</li>
</ol>
</body>
</html>
|
Output:
HTML List Types
We have learned to create both types of lists. Now, we will know the indentation of the list, their importance & various ways to keep the list of elements straight in an HTML document.
Indentation of List:
Indentation is a formatting technique that helps to well-organized and represent the content in the proper structure, on the webpage. This can help to increase the interactivity of the webpage along with enhancing the user experience that not only helps to enhance the readability but also helps to improve the ranking of the page, which in turn, reaches the maximum users.
Importance of Proper Indentation of List:
- Indentation helps a reader to clearly understand the flow of context.
- It provides sense to similar elements when they are grouped together.
- It allows differentiating parent item and child item/subitem if any.
- Finding consistency between different browser displays.
Ways to keep the list of items in a straight line:
Lists are automatically indented, by default & it is important to keep the list aligned according to the display preferences. In order to keep the list items in a straight line, there are a few CSS properties that are not only used to indent the content but also used for styling the list by featuring the customizable options, which are given below:
- text-indent property
- margin-left & padding-left property
- display property
- list-style-type property
There are several other approaches to accomplish this task, but we will discuss the above 4 CSS properties, in this article.
text-indent Property: This property is used to define the indentation of the first line in each block of text. It also accepts the negative values. It means if the value is negative then the first line will be indented to the left.
Syntax:
text-indent: length;
Example: This example describes the various ways to indent the list using the text-indent property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Indenting the list using CSS Propert
</title>
<style>
.sudo {
text-indent: 5px;
}
.geeks {
text-indent: 5em;
}
.gfg {
text-indent: 30%;
}
</style>
</head>
<body>
<h2>text-indent: 50px:</h2>
<ol class="sudo">
<li>
The Best Data Structure and Algorithm Course
Available Online From Skilled mentors at GFG.
</li>
<li>
The course focuses on various MCQ's &
Coding question likely to be asked in
the interviews & make your upcoming
placement season efficient and
successful.
</li>
</ol>
<h2>text-indent: 5em:</h2>
<ol class="geeks">
<li>
The Best Data Structure and Algorithm Course
Available Online From Skilled mentors at GFG.
</li>
<li>
The course focuses on various MCQ's &
Coding question likely to be asked in
the interviews & make your upcoming
placement season efficient and
successful.
</li>
</ol>
<h2>text-indent: 30%:</h2>
<ol class="gfg">
<li>
The Best Data Structure and Algorithm Course
Available Online From Skilled mentors at GFG.
</li>
<li>
The course focuses on various MCQ's &
Coding question likely to be asked in
the interviews & make your upcoming
placement season efficient and
successful.
</li>
</ol>
</body>
</html>
|
Output:
Indenting the list using the text-indent property
margin-left property: It is used to increase or decrease the margin around the list from outside the block. For example, you wish to provide a margin around the block, you can use this property. You can define the attribute value in px; being a static measurement, by mentioning the value according to the indentation required.
padding-left property: It is used to increase or decrease the padding from inside the block. For example, you wish to increase or decrease the inner space of the block i.e., padding, you can use this property by defining the attribute value in em; being a relative measurement, by mentioning the value according to the indentation required.
Syntax:
<style>
ul.o{
margin-left: 50px;
padding-left: 50px;
}
</style>
Example: In this example, we have made four lists. The first list is without indentation or we can say default indentation, the second list is with indentation using margin-left property, providing a positive value to push the list towards the right, the third list is with indentation using margin-left property, providing a negative value to push the list towards the left side and the fourth list is with indentation using the padding-left property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Indenting the list item in various format
</title>
<style>
ul.o {
margin-left: 50px;
}
ul.p {
margin-left: -20px;
}
ul.m {
padding-left: 20em;
}
</style>
</head>
<body>
<h2>
<strong>List without Indent</strong>
</h2>
<ul class="i">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<h2>
<strong>List with Indent using margin-left[+ve]</strong>
</h2>
<ul class="o">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<h2>
<strong>List with Indent using margin-left[-ve]</strong>
</h2>
<ul class="p">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<h2>
<strong>List with Indent using padding-left</strong>
</h2>
<ul class="m">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</body>
</html>
|
Output:
Indentation of HTML lists
list-style-type property: It is used to remove the type of list if required. The bullet points or numbers in front of the list items are removed using this property.
Syntax:
li {
list-style-type: none;
}
display property: It is used to align the list items in a single line which forms a block of elements. However, you can add margins and padding around the list items for a better view.
Syntax:
li {
display: inline-block;
}
Example: In this example, we have made an unordered list inside the body and styled the same list inside the head by providing a class to the unordered list.
HTML
<!DOCTYPE html>
<html>
<head>
<title> List items in a Straight Line </title>
<style>
ul.i {
list-style-type: none;
}
li {
display: inline-block;
}
</style>
</head>
<body>
<h2>
<strong> List items in a Straight Line</strong>
</h2>
<ul class="i">
<li>DSA</li>
<li>Web Tech</li>
<li>Algorithm</li>
</ul>
</body>
</html>
|
Output:
HTML list items in a straight line
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...