Table of contents

HTML <li> Tag

What is HTML <li> Tag?

The HTML li tag is used to define a list item inside ordered lists, unordered lists, and menu lists. It helps display information in a clear, structured way that is easy for both users and search engines to understand. List items can contain text, links, images, or other HTML elements.

The li tag always works inside a parent list element such as ul (unordered list), ol (ordered list), or menu. Lists are an important part of web content because they improve readability, navigation, and SEO by organizing data into meaningful sections.

Syntax of the HTML <li> Tag

plaintext
<ul>
  <li>Item Name</li>
</ul>

The li tag defines a single list entry inside a list. You can add as many li items as needed.

Examples of HTML <li> Tag

Example 1: Basic HTML <li> Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<ul>
  <li>Home</li>
  <li>About Us</li>
  <li>Services</li>
</ul>

</body>
</html>

In this example, the li tags are used inside an unordered list to create simple website navigation items.

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<ol>
  <li><a href="https://www.scholar247.com/web-design">Web Design Services - Scholar247</a></li>
  <li><a href="https://www.scholar247.com/seo-services">Affordable SEO Services -  Scholar247</a></li>
  <li><a href="https://www.scholar247.com/digital-marketing">Digital Marketing Agency - Scholar247</a></li>
</ol>

</body>
</html>

This example improves SEO by adding useful keywords inside list items along with relevant links. Ordered lists also show clear hierarchy, which is helpful for users and search engines.

Attributes of the HTML <li> Tag

The li tag supports a few optional attributes:

• value: Used in ordered lists to set a custom numbering value
• type: Defines the marker style in some list types (not supported in HTML5 for ul)
• class, id: Used for CSS styling and JavaScript functionality
• style: Inline styling for custom formatting

Although attributes are optional, they allow more control over how list items appear and work.

Best Practices for HTML <li> Tag

• Keep list items short and meaningful for better readability
• Use relevant keywords naturally for improved SEO
• Avoid wrapping too much text inside one li tag
• Use ul for general lists and ol when order matters
• Make sure all li tags are inside a list container like ul or ol
• Use links inside li when creating menus or navigation sections

Following these points ensures a better user experience and optimized content structure.

FAQs About HTML <li> Tag

What is the purpose of the HTML li tag?

The li tag is used to represent individual items in ordered or unordered lists to organize content clearly and improve readability.

Can li be used outside ul or ol?

No. The li tag must always be placed inside a list tag such as ul or ol to function correctly in HTML.

Is HTML li tag good for SEO?

Yes. Search engines prefer well-structured content, and lists help highlight key information for better ranking and user engagement.

Can I style li items with CSS?

Yes. You can apply CSS using class, id, or direct selectors to control color, spacing, bullet style, numbering style, and more.

Can li contain other HTML elements?

Yes. List items can include text, links, buttons, images, or even nested lists to create complex content layouts.

HTML

Related Articles