The <li> aspect in HTML stands for “listing merchandise” and is used to outline particular person objects inside ordered (<ol>) and unordered (<ul>) lists. It helps construction content material and create internet web page lists of things, steps, or choices.
Syntax
The <li> aspect is used as a baby aspect inside ordered and unordered lists (<ol> and <ul>). Right here’s a primary instance of the syntax:
1 |
<ul>
|
2 |
<li>Merchandise 1</li> |
3 |
<li>Merchandise 2</li> |
4 |
<li>Merchandise 3</li> |
5 |
</ul>
|
Instance
Let’s discover a sensible code snippet to grasp how the <li> aspect is utilized in a real-world situation:
1 |
<ol>
|
2 |
<li>Begin the engine.</li> |
3 |
<li>Put the automotive in gear.</li> |
4 |
<li>Speed up gently.</li> |
5 |
</ol>
|
On this instance the order of the objects is necessary. An ordered listing (<ol>) subsequently offers step-by-step automotive driving directions. Every <li> aspect represents a selected motion or merchandise within the listing.
End result
Attributes
The <li> aspect does have a few very related attributes:
-
kind: signifies the numbering kind and could be utilized to the guardian<ol>or<ul>aspect, or extra particularly on the<li>aspect:-
a: lowercase letters -
A: uppercase letters -
i: lowercase Roman numerals -
I: uppercase Roman numerals -
1: numbers
-
-
worth: dictates the variety of the listing merchandise. Subsequent objects observe on accordingly.
Right here’s our earlier demo of the steps required to drive, with the kind and worth attributes added to make issues barely complicated!
Content material
The <li> aspect accepts varied sorts of content material, together with:
-
Textual content: Plain textual content or inline HTML parts resembling hyperlinks (
<a>), photographs (<img>), or inline formatting parts (<robust>,<em>). -
Nested Lists:
<li>parts can include different lists, permitting for the creation of nested lists inside guardian lists.
Styling Issues
When styling the <li> aspect, contemplate the next finest practices:
- Record Marker Types: Customise the looks of listing markers (e.g., bullets for unordered lists, numbers for ordered lists) utilizing CSS. You possibly can change their dimension, shade, and positioning.
- Textual content Styling: Outline font kinds, textual content shade, and spacing for the textual content inside listing objects to make sure readability and consistency together with your total design.
- Spacing: Management the spacing between listing objects utilizing margin and padding. Adjusting these values can affect the visible separation between objects and surrounding content material.
- Nested Lists: Apply indentation or different styling methods to distinguish nested lists from guardian lists.
Did You Know?
- Lists created with
<li>parts are versatile and generally used for navigation menus, directions, product options, and extra. - The selection between ordered (
<ol>) and unordered (<ul>) lists is dependent upon whether or not you want a selected order (numbers) or not (bullets) to your listing objects. - You should use the
worthattribute with ordered lists (<ol>) to specify a beginning worth for the listing numbering.
Study Extra
Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].
