HTML Component: li | Envato Tuts+
The
- ) and unordered (
- ingredient is used as a toddler ingredient inside ordered and unordered lists (
- and
- ingredient is utilized in a real-world situation:
1 2 Begin the engine. 3 Put the automobile in gear. 4 Speed up gently. 5 On this instance the order of the objects is necessary. An ordered listing (
- ) subsequently gives step-by-step automobile driving directions. Every
- ingredient represents a selected motion or merchandise within the listing.
End result
Attributes
The
- ingredient does have a few very related attributes:
- kind: signifies the numbering kind and could be utilized to the guardian
- or
- ingredient:
- 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 comply with on accordingly.
- ingredient accepts varied sorts of content material, together with:
- Textual content: Plain textual content or inline HTML parts reminiscent of hyperlinks (), photographs (
), or inline formatting parts (, ).
- Nested Lists:
- parts can comprise different lists, permitting for the creation of nested lists inside guardian lists.
Styling Issues
When styling the
- Textual content: Plain textual content or inline HTML parts reminiscent of hyperlinks (), photographs (
- ingredient, contemplate the next greatest practices:
- Record Marker Kinds: 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 types, textual content shade, and spacing for the textual content inside listing objects to make sure readability and consistency along 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
- parts are versatile and generally used for navigation menus, directions, product options, and extra.
- The selection between ordered (
- ) and unordered (
- ) lists will depend on whether or not you want a selected order (numbers) or not (bullets) on your listing objects.
- You should use the worth attribute with ordered lists (
- ) to specify a beginning worth for the listing numbering.
Study Extra
- ingredient, or extra particularly on the
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
- ingredient:
- kind: signifies the numbering kind and could be utilized to the guardian
- ingredient represents a selected motion or merchandise within the listing.
- ). Right here’s a fundamental instance of the syntax:
1 2 Merchandise 1 3 Merchandise 2 4 Merchandise 3 5 Instance
Let’s discover a sensible code snippet to grasp how the
- ingredient is utilized in a real-world situation:
- ) lists. It helps construction content material and create internet web page lists of things, steps, or choices.
Syntax
The
