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:
Example
<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):
Example
<ul>
<li>Cacao</li>
<li>Water
<ul>
<li>Clean water</li>
<li>Tap water</li>
</ul>
</li>
<li>Juice</li>
</ul>
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
Pros Main Features
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Attributes for <li>
value
defines the ordinal value of a list item:
Example
<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:
Example
<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
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
1+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
All
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
4+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
All