HTML li: Main Tips
- You can use HTML
li
tags as descendants of <ol>, <ul>, or <menu> elements to define a single item in a list. - Both starting and ending tags are mandatory.
- You can style HTML
li
elements using CSS.
Using li in HTML
HTML <li>
tag defines a list item within a list:
<p>This list is unordered:</p>
<ul>
<li>Cacao</li>
<li>Water</li>
<li>Juice</li>
</ul>
<p>This list is ordered:</p>
<ol>
<li>Cacao</li>
<li>Water</li>
<li>Juice</li>
</ol>
Note: you have to place HTML li tags in a parent element: <ol>, <ul>, or <menu>.
In most browsers, <li>
element will be displayed with these default values:
Using HTML <li>
tags, you can also create lists within lists (nested lists):
<ul>
<li>Cacao</li>
<li>Water
<ul>
<li>Clean water</li>
<li>Tap water</li>
</ul>
</li>
<li>Juice</li>
</ul>

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Attributes for <li>
value
defines the ordinal value of a list item:
<ol>
<li value="100">Cacao</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
<li>Cola</li>
</ol>
value
can only be used with numbered lists and defined in a number. It was deprecated in HTML4, but then brought back in HTML5.
The currently deprecated type
attribute defined the kind of bullet point to use:
<ol>
<li>Cacao</li>
<li type="a">Water</li>
<li>Juice</li>
</ol>
<ul>
<li>Cacao</li>
<li type="square">Water</li>
<li>Juice</li>
</ul>
Note: instead of type, use CSS list-style-type property.
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!