Learn HTML

HTML: li tag

March 21, 2023
11 Min Read

HTML: <li> tag

In this series of learning HTML, we will teach you how to use HTML li tag with proper syntax and lots of examples. Let’s start on the HTML li tag.

Description of HTML li tag

The HTML <li> tag is used to create a list item within an ordered (<ol>) or unordered (<ul>) list in a web page. The <li> tag defines a single item in a list, and is typically used alongside other list-related tags such as <ol>, <ul>, and <li> to create structured and organized content.

Here is an example of how the <li> tag can be used in an unordered list:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

In this example, the <li> tag is used to create three list items within an unordered list. When the code is rendered in a web browser, the list items will typically be displayed with a bullet point or other marker, like this:

  • Item 1
  • Item 2
  • Item 3

The <li> tag can also be used in an ordered list (<ol>) to create a numbered list:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

In this example, the <li> tag is used to create three numbered list items within an ordered list. When the code is rendered in a web browser, the list items will typically be displayed with a number, like this:

  1. First item
  2. Second item
  3. Third item

The <li> tag can also be used in nested lists to create sub-items within a list.

Overall, the <li> tag is a fundamental building block for creating lists in HTML, and is essential for creating structured and organized content on the web.

 

Syntax of HTML li tag

The syntax of HTML li tag (short for list item) is as follows:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

This code creates an unordered list (<ul>) with three list items (<li>). The li tag is used to define a list item in an ordered or unordered list.

Note that the li tag must be nested inside an ordered list (<ol>) or an unordered list (<ul>).

 

Global Attributes

The “li” tag in HTML is used to create a list item within an ordered or unordered list. It does not have any global attributes, but it can have specific attributes that are used to define the characteristics of the list item. Some of the common attributes used with “li” tag are:

  1. value – This attribute is used to specify the value of the list item in ordered lists.
  2. type – This attribute is used to specify the type of marker used in unordered lists. It can be set to “disc” (default), “circle”, or “square”.
  3. class – This attribute is used to specify one or more class names for the list item, which can be used to apply CSS styles.
  4. id – This attribute is used to specify a unique identifier for the list item, which can be used for scripting or styling purposes.
  5. style – This attribute is used to apply inline styles to the list item.

Example usage:

<ul>
<li class="red" id="item1">First item</li>
<li class="blue" id="item2">Second item</li>
<li class="green" id="item3">Third item</li>
</ul>

In this example, the “li” elements have “class” and “id” attributes that can be used to apply styles or manipulate the elements using JavaScript.

Event Attributes

The li tag in HTML is used to define a list item within an ordered or unordered list. Some of the common event attributes that can be used with the li tag are:

  1. onclick: This attribute specifies a JavaScript function to be executed when the list item is clicked.
  2. ondblclick: This attribute specifies a JavaScript function to be executed when the list item is double-clicked.
  3. onmousedown: This attribute specifies a JavaScript function to be executed when the mouse button is pressed down over the list item.
  4. onmouseup: This attribute specifies a JavaScript function to be executed when the mouse button is released over the list item.
  5. onmouseover: This attribute specifies a JavaScript function to be executed when the mouse pointer is moved over the list item.
  6. onmouseout: This attribute specifies a JavaScript function to be executed when the mouse pointer is moved out of the list item.
  7. onkeydown: This attribute specifies a JavaScript function to be executed when a key is pressed down while the list item has focus.
  8. onkeyup: This attribute specifies a JavaScript function to be executed when a key is released while the list item has focus.

Note that these event attributes can be used with other HTML elements as well. It is important to use them appropriately to ensure that the user interface is intuitive and user-friendly.

 

 

 

Other Attributes

In addition to the global and event attributes that can be used with any HTML element, the li tag also supports some specific attributes that are relevant to list items. These include:

  1. value: This attribute specifies the value of the list item in an ordered list. It can be used to override the default numbering of the list items.

Example: <ol><li value="3">Third item</li></ol>

  1. type: This attribute specifies the type of marker used for the list item in an unordered list. The default value is “disc”, but other values such as “circle” and “square” can be used.

Example: <ul><li type="circle">Item 1</li><li type="square">Item 2</li></ul>

  1. disabled: This attribute specifies that the list item is disabled and cannot be selected or interacted with.

Example: <ul><li disabled>Disabled item</li></ul>

  1. hidden: This attribute specifies that the list item should be hidden from view.

Example: <ul><li hidden>Hidden item</li></ul>

  1. id: This attribute specifies a unique identifier for the list item, which can be used to target it with CSS or JavaScript.

Example: <ul><li id="my-item">My item</li></ul>

  1. class: This attribute specifies a class name for the list item, which can be used to apply CSS styles to it.

Example: <ul><li class="my-class">My item</li></ul>

These attributes can be used in combination with each other and with other HTML elements to create rich and interactive lists on a webpage.

 

Notes on HTML li tag

The <li> tag in HTML stands for “list item”. It is used to create a list of items on a web page. The <li> tag is a child element of the <ul> (unordered list) or <ol> (ordered list) tag.

Here are some important notes about the <li> tag in HTML:

  1. The <li> tag is used to define each item in a list.
  2. The <li> tag must be used within an <ul> or <ol> tag.
  3. You can nest <ul> and <ol> tags inside <li> tags to create nested lists.
  4. The <li> tag does not have a closing tag, but it must be closed with a closing </ul> or </ol> tag.
  5. You can add other HTML tags inside an <li> tag, such as images, links, or text formatting tags.
  6. You can add attributes to the <li> tag, such as class or id, to style or manipulate the list items.

Here is an example of an unordered list created with the <ul> and <li> tags:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

And here is an example of an ordered list created with the <ol> and <li> tags:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

 

 

Browser Compatibility

The HTML li tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples of HTML li tag

We will discuss the <li> tag below, exploring examples of how to use the <li> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML li tag below, with some examples of how to use the li tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

HTML5 Document

Here’s an example of an HTML5 document that uses the li tag:

<!DOCTYPE html>
<html>
<head>
<title>Example List</title>
</head>
<body>
<h1>My Favorite Books</h1>
<ul>
<li>The Hitchhiker's Guide to the Galaxy</li>
<li>The Lord of the Rings</li>
<li>To Kill a Mockingbird</li>
</ul>
</body>
</html>

In this example, we have an HTML5 document that includes a list of my favorite books. The li tag is used to create each item in the list.

The ul tag is used to create an unordered list, which means that the list items will be displayed with bullet points. If we wanted to create an ordered list instead, we would use the ol tag.

Note that the ul tag must be used to wrap the li elements. The li tag cannot be used outside of a list.

When we view this HTML document in a web browser, it will be rendered as:

My Favorite Books

  • The Hitchhiker’s Guide to the Galaxy
  • The Lord of the Rings
  • To Kill a Mockingbird

Each item in the list will be displayed with a bullet point, thanks to the ul tag.

 

HTML 4.01 Transitional Document

here’s an example of an HTML 4.01 Transitional document that uses the em tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example Text Formatting</title>
</head>
<body>
<h1>My Trip to <em>Paris</em></h1>
<p>During my trip to <em>Paris</em>, I visited the <em>Eiffel Tower</em> and the <em>Louvre Museum</em>.</p>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document that uses the em tag to emphasize certain words in the text.

The em tag is used to indicate that the enclosed text should be emphasized, typically displayed in italics by default.

In this example, we use the em tag to emphasize the name of the city “Paris” and the names of the tourist attractions “Eiffel Tower” and “Louvre Museum”.

When we view this HTML document in a web browser that supports HTML 4.01 Transitional, it will be rendered as:

My Trip to Paris

During my trip to Paris, I visited the Eiffel Tower and the Louvre Museum.

The text inside the em tags will be displayed in italics, indicating emphasis.

XHTML 1.0 Transitional Document

Here’s an example of an XHTML 1.0 Transitional document with a list created using the <li> tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example List using HTML li tag</title>
</head>

<body>
<h1>List of Fruits</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>
</body>

</html>

In this example, the <li> tag is used to create an unordered list (<ul>) of fruits. Each item in the list is represented by an <li> tag.

Note that this document is written in XHTML 1.0 Transitional, which is an XML-based markup language that is similar to HTML but more strict in its syntax rules. As a result, all elements and attributes must be closed properly and all tags must be lowercase.

 

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict Document that uses the HTML li tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.0 Strict Document with li tag</title>
</head>
<body>
<h1>Shopping List</h1>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
</body>
</html>

In this example, we have a ul (unordered list) element that contains three li (list item) elements. Each li element contains an item for a shopping list: “Milk,” “Eggs,” and “Bread.” The ul and li tags are used to create a bulleted list of items, which can be useful for presenting information in a clear, organized way.

Note that in XHTML, all tags must be closed, so the li tags are closed with </li>. Additionally, XHTML requires all tags to be in lowercase, so we use <ul> instead of <UL> and <li> instead of <LI>. Finally, we use the XHTML 1.0 Strict doctype to ensure that our document follows a strict set of rules for XHTML markup.

 

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 Document that uses the HTML li tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.1 Document with li tag</title>
</head>
<body>
<h1>Shopping List</h1>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
</body>
</html>

In this example, we have a ul (unordered list) element that contains three li (list item) elements. Each li element contains an item for a shopping list: “Milk,” “Eggs,” and “Bread.” The ul and li tags are used to create a bulleted list of items, which can be useful for presenting information in a clear, organized way.

Note that in XHTML 1.1, the document must be well-formed XML and must be served with an XML MIME type. Therefore, the document begins with an XML declaration that specifies the version of XML being used, as well as the character encoding. In addition, the XHTML 1.1 doctype is different from the XHTML 1.0 doctype.

Overall, the use of the li tag in XHTML 1.1 is the same as in XHTML 1.0. However, the differences in the document structure and doctype declaration are important to note when writing valid XHTML 1.1 code.

Tags

About the author

View All Posts

Home4Cloud